Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build Reusable Web Components using HTML5 Web cComponents


Published on

A session I presented in JavaScript Israel Meetup about the web components standards.

Published in: Technology
  • Be the first to comment

Build Reusable Web Components using HTML5 Web cComponents

  1. 1. Build Reusable Web Components Using HTML5 Web Components Gil Fink CEO and Senior Consultant, sparXys
  2. 2. The Pyramid of Doom
  3. 3. Build Reusable Web Components Using HTML5 Web Components Gil Fink CEO and Senior Consultant, sparXys
  4. 4. About Me • sparXys CEO and Senior consultant • ASP.NET/IIS Microsoft MVP • Co-author of Pro Single Page Application Development (Apress) • Co-author of 4 Microsoft Official Courses (MOCs) • Founder of Front-End.IL Meetup and co-organizer of GDG Rashlatz Meetup
  5. 5. Agenda • The problems we face • Web Components APIs o Templates o Imports o Shadow DOM o Custom Elements
  6. 6. 1. Undescriptive Markup Google+ Example
  7. 7. The Pyramid of Doom is Back
  8. 8. 2. Poor Separation of Concerns You want HTML, CSS and JavaScript to work together You end up with a mess The wiring gets in your way!
  9. 9. 3. No Native Templates • Store HTML in hidden DOM element and show it • Use script tag as a template holder: <script id=”myTemplate” type=”text/template”> <div> … </div> </script>
  10. 10. 4. No Bundling • You want to bundle a complex component The component includes HTML, CSS and JavaScript how would you do that? o Use a server side wrapping mechanism?
  11. 11. Web Components to the Rescue • A set of standards designed to componentize the web • Some general goals: Code Reuse Encapsulation Separation of Concerns Composition Theming Expressive Semantic
  12. 12. The Web Components Standards •Reusable DOM fragmentsTemplates •Load HTML declarativelyImports •DOM encapsulationShadow DOM •Create your own elements Custom Elements
  13. 13. Let’s Drill Down
  14. 14. Templates • A new HTML element – template • Can be used to instantiate document fragments • Can wrap HTML, style tags and script tags • To use the template you need some JavaScript magic <template id=”myTemplate”> <div> … </div> </template>
  15. 15. Cloning a Template • Select the template and extract its content o Using its content property • Use the importNode function to get the cloned content • Only when the clone is appended to the DOM o The style and JavaScript are executed o Resources like images are retrieved from the server var template = document.querySelector(‘#myTemplate’); var clone = document.importNode(template.content, true);
  16. 16. Demo Templates
  17. 17. Imports • Load additional HTML documents o Without Ajax • A new type of link tag • Use the rel attribute with the import type: <link rel=”import” href=”myImport.html”>
  18. 18. Imports and Bundling • Enable to bundle a full component into a HTML file o The HTML can include scripts and CSS styles • The whole bundle can be retrieved in a single call
  19. 19. Imports and The DOM • Importing a document doesn’t include it into the DOM o It will parse it in memory and load all the additional resources • Use the import property of the link tag: var content = document.querySelector(‘link[rel=”import”]’).import;
  20. 20. Demo Imports
  21. 21. Shadow DOM • Encapsulate DOM parts o The browser will know how to present those parts o The browser won’t show the encapsulated parts in the source code • Creates a boundary between the component and its user
  22. 22. Demo Enabling Chrome to Show Shadow DOM Elements
  23. 23. Shadow DOM – Cont. • Use the createShadowRoot function to wrap an element as a shadow DOM: var host = document.querySelector(‘#shadowDOMHost’); var root = host.createShadowRoot(); root.innerHTML = ‘<div>Lurking in the shadows</div>’;
  24. 24. Demo Shadow DOM
  25. 25. Custom Elements • Enable to extend or to create custom HTML elements o The new element must inherit from HTMLElement • Create a custom element using the registerElement function: • Extend an existing element: var myElement = document.registerElement(‘my-element’); var myInput = document.registerElement(‘my-input’, { prototype: Object.create(HTMLInputElement.prototype), extends: ‘input’ });
  26. 26. Custom Elements – Cont. • Use the element in your DOM: or use the createElement function • Custom elements have life cycle events. For example: o createdCallback o attributeChangedCallback <my-input></my-input>
  27. 27. Demo Custom Elements
  28. 28. The Current State of Web Components • Still W3C Working Drafts • Browser support: • Main Polyfills: Polymer X-Tag
  29. 29. Questions?
  30. 30. Summary • Web Components are emerging standards that enables: • Encapsulation • Separation of Concerns • Element portability • And more • They are still in working drafts • Taking the web one step forward!
  31. 31. Resources • Download the slide deck: • • My Blog – • Follow me on Twitter – @gilfink
  32. 32. Thank You!