Web components are the future of the web - Take advantage of new web technologies using PolymerJS

Web Components are the
future of the web
Take advantage of new web technologies using PolymerJS
Fakiolas Marios - fakiolasmarios@gmail.com / @fakiolinho
Frontend Developer at mist.io

Web Components Introduction
Web Components are a set of standards currently being produced as a W3C
specification that allow for the creation of reusable widgets in web documents.
They are part of the browser, and so they do not need external libraries like
jQuery or Dojo.
With a Web Component, you can do almost anything that can be done with
HTML, CSS and JavaScript, and it can be a portable component that can be re-
used easily.

Web Components Basic Ingredients
Web Components use following technologies:
● HTML Templates
● Shadow DOM
● Custom Elements
● HTML Imports
Each of them can be used separately but combined with the rest gives us Web
Components technology.

HTML Templates
The HTML template element <template> is a mechanism for holding client-
side content that is not to be rendered when a page is loaded but may
subsequently be instantiated during runtime using JavaScript.
Think of a template as a content fragment that is being stored for subsequent
use in the document. While the parser does process the contents of the
<template> element while loading the page, it does so only to ensure that
those contents are valid; the element's contents are not rendered, however.

HTML Templates (example)
<ul id="users-list"></ul>
<template id="user-item">
<li>
<span id="user-name"></span>
</li>
</template>

HTML Templates (example)
var t = document.querySelector('#user-item');
t.content.querySelector("#user-name").textContent = "Fakiolas Marios";
// Clone the new li and insert it into the ul
var list = document.querySelector("#users-list");
var clone = document.importNode(t.content, true);
list[0].appendChild(clone);

Shadow DOM
Shadow DOM provides encapsulation for the JavaScript, CSS, and templating
in a Web Component. Shadow DOM makes it so these things remain separate
from the DOM of the main document. You can also use Shadow DOM by itself,
outside of a web component.
Why would you want to keep some code separate from the rest of the page?
One reason is that on a large site, for example, if the CSS is not carefully
organized, the styling for the navigation can "leak" into the main content area
where it was not intended to go, or vice-versa. As a site or an app scales, this
kind of thing becomes difficult to avoid.

Shadow DOM (example)
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
...
</script>
</body>
</html>

Shadow DOM (example)
var shadow = document.querySelector('#hostElement').
createShadowRoot();
shadow.innerHTML = '<p>Here is some new text</p>';
shadow.innerHTML += '<style>p { color: red; }</style>';

Custom Elements
Custom Elements is a capability for creating your own custom HTML tags and
elements.
They can have their own scripted behavior and CSS styling.
They are part of Web Components but they can also be used by themselves.
<user-element data-url="http://someAvatar.com"></user-element>

Custom Elements (example)
var UserElementProto = Object.create(HTMLElement.prototype);
UserElementProto.createdCallback = function() {
var shadow = this.createShadowRoot();
var img = document.createElement('img');
img.url = this.getAttribute('data-url');
shadow.appendChild(img);
};
var UserElement = document.registerElement('user-element', {
prototype: UserElementProto
});

HTML Imports
HTML Imports is intended to be the packaging mechanism for Web
Components
Load it in your HTML5 just once:
<link rel="import" href="user-element.html">
Call it into action when you need it:
<user-element data-url="http://someAvatar.com"></user-element>

Web Components are awesome right?

Web Components support is limited yet

Custom Elements Support (1st of March 2016)

Shadow DOM Support (1st of March 2016)

HTML Imports Support (1st of March 2016)

HTML Templates Support (1st of March 2016)

Hmm, can i use Web Components today?
There is a solution!!!!

Use Web Components through Polymer
Polymer is the solution

What is Polymer?
Polymer is an open source js library supported officially by Google.
Since Web Components are not supported 100% yet, Polymer binds the gap by
using webcomponents.js polyfills. Also it offers a great variety of features and
utilities (2-way data-binding, observations, computed properties etc) so we can
build Rich Internet Applications with Web Components today.
It is hosted on Github since October of 2012 and at the moment (1st of March
2016) Polymer has 14.400 stars.
Its first stable 1.0 version was released in 2015 (28th of May 2015).

How Polymer works?
The Polymer library is designed to make it easier and faster for developers to
create great, reusable components for the modern web.
Polymer is built on top of the web components standards and it helps you build
your own custom elements.

Web Components Primitives
These standards provide the primitives you need to build new components.
You can build your own custom elements using these primitives, but it can be a
lot of work (we saw some vanilla js examples before).
Not all browsers support these standards yet, so the web components polyfill
library fills the gaps, implementing the APIs in JavaScript.

Polymer Library
Provides a declarative syntax that makes it simpler to define custom elements.
And it adds features like templating, two-way data binding and property
observation to help you build powerful, reusable elements with less code.

Custom Elements
If you don’t want to write your own elements, there are a number of elements
built with Polymer that you can drop straight into your existing pages. These
elements depend on the Polymer library, but you can use the elements without
using Polymer directly.
You can mix and match elements built with Polymer with other custom
elements, as well as built-in elements. The Polymer team has written
collections of elements that you can use in your apps.

Polymer Catalog (built in elements)

Polymer Google Web Components closer look

Use google-map element to show a simple map of Greece

<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="import" href="components/google-map/google-map.html">

<google-map latitude="38.605225" longitude="24.645403"></google-map>

Use google-map element adding some custom markers
<google-map latitude="38.605225" longitude="24.645403" fit-to-markers>
<google-map-marker latitude="37.969406" longitude="23.720744" title="
Hello Athens!"></google-map-marker>
<google-map-marker latitude="39.104739" longitude="26.557254" title="
Hello Mitilini!"></google-map-marker>
</google-map>

Create a custom element with Polymer
<dom-module id="user-element">
<style>...</style>
<template>
<img src="[[url]]" />
</template>
<script>
Polymer({
is: 'user-element',
properties: {
url: String
}
});
</script>
</dom-module>

Use our custom element

<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="import" href="components/user-element.html">

<user-element url="http://someAvatar.com"></user-element>

Web components are the future of the web - Take advantage of new web technologies using PolymerJS

Web components are the future of the web - Take advantage of new web technologies using PolymerJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Web components are the future of the web - Take advantage of new web technologies using PolymerJS

Similar to Web components are the future of the web - Take advantage of new web technologies using PolymerJS (20)

Recently uploaded

Recently uploaded (20)

Web components are the future of the web - Take advantage of new web technologies using PolymerJS