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 - [email protected] / @fakiolinho Frontend Developer at mist.io

What are Web Components then?

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...

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

Fakiolas Marios

More Decks by Fakiolas Marios

Other Decks in Programming

Featured

Transcript