Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Learn some more about Web Components, browsers support and check how to build RIA with Polymer today.

Avatar for Fakiolas Marios

Fakiolas Marios

February 27, 2016
Tweet

More Decks by Fakiolas Marios

Other Decks in Programming

Transcript

  1. 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
  2. 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.
  3. 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.
  4. 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.
  5. 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);
  6. 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.
  7. 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>';
  8. 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>
  9. 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 });
  10. 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>
  11. 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).
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. Use google-map element to show a simple map of Greece

    <!-- Polyfill Web Components support for older browsers --> <script src="components/webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Import element --> <link rel="import" href="components/google-map/google-map.html"> <!-- Use element --> <google-map latitude="38.605225" longitude="24.645403"></google-map>
  17. 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>
  18. 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>
  19. Use our custom element <!-- Polyfill Web Components support for

    older browsers --> <script src="components/webcomponentsjs/webcomponents-lite.min.js"></script> <!-- Import element --> <link rel="import" href="components/user-element.html"> <!-- Use element --> <user-element url="http://someAvatar.com"></user-element>