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.

Web components the future is here

5,017 views

Published on

A session I delivered in DevWeek 2016 conference. The session explains the Web Components API and later on delve into Polymer and x-tag.

Published in: Technology
  • Be the first to comment

Web components the future is here

  1. 1. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Web Components - The Future is Here Gil Fink CEO and Senior Consultant, sparXys
  2. 2. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek The Pyramid of Doom
  3. 3. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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)
  4. 4. Agenda • The problems we face • Web Components APIs o Templates o Imports o Shadow DOM o Custom Elements • Libraries to the rescue Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
  5. 5. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 1. Undescriptive Markup Markup Example
  6. 6. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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!
  7. 7. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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>
  8. 8. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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?
  9. 9. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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
  10. 10. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek The Web Components Standards •Reusable DOM fragmentsTemplates •Load HTML declarativelyImports •DOM encapsulationShadow DOM •Create your own elements Custom Elements
  11. 11. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Setting The Environment • Browsers have only partial support for Web Components o So we use the webcomponents.js Polyfill for Web Components • Download: o https://github.com/webcomponents/webcomponentsjs/ o Or install using your favorite package manager (Bower, Nuget) • Make sure the Polyfill script runs first
  12. 12. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Demo Setting the environment
  13. 13. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Let’s Drill Down
  14. 14. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Templates • A new HTML element – template • Can be used to instantiate document fragments • Can wrap HTML, style tags and script tags • No data binding support  • To use the template you need some JavaScript magic <template id=”myTemplate”> <div> … </div> </template>
  15. 15. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Templates Demo
  17. 17. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Imports and Bundling • Enable to bundle a full component into one HTML file o The HTML can include scripts and CSS styles • The whole bundle can be retrieved in a single call
  19. 19. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Imports Demo
  21. 21. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Import Additional Notes • Scripts running inside the import can reference the containing document by calling document.currentScript.ownerDocument • CORS constraints apply to documents imported from other domains
  22. 22. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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
  23. 23. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek The Problems Shadow DOM Tries to Solve • Encapsulation of components/widgets • Style leakage o Leaks from one component to another o Leaks from imported 3th party library/framework • Global DOM o id or class attributes all over the place
  24. 24. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Shadow DOM in The Browser <video src="media/myVideo.mp4" controls></video> <input type="date">
  25. 25. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Show Shadow DOM Elements in Chrome Demo
  26. 26. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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>’;
  27. 27. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Styling Shadow DOM • :host and :host() pseudo-class • ::content pseudo-element <div name="myElement"> <style> :host { border: 1px solid lightgray; } </style> <template>...</template> </div>
  28. 28. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Shadow DOM Demo
  29. 29. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek 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’ });
  30. 30. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Custom Elements – Naming • You can create named elements (almost) any way you want: o Same naming rules as other HTML tags o There must be a dash (“-”) in the name • To future-proof the name against the HTML standard • To avoid naming collisions
  31. 31. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Custom Elements – Usage • Use the element in your DOM: or use the createElement function: <my-input></my-input> var elm = document.createElement(‘my-input’);
  32. 32. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Custom Element Callbacks • Custom elements have life cycle events: • createdCallback o Called when an instance is created • attachedCallback o Called when an instance is added to DOM subtree • detachedCallback o Called when an instance is removed from a DOM subtree • attributeChangedCallback o Called after an attribute value changes
  33. 33. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Custom Elements Demo
  34. 34. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek The Current State of Web Components • Still W3C Working Drafts • Browser support: http://caniuse.com/#search=web%20components • Main libraries: Polymer X-Tag
  35. 35. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Polymer • Components library that is written and maintained by Google • Includes o Ability to build your own custom components o Ready to use web components • Polymer leverages the web components standard
  36. 36. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Polymer Catalog • Full catalog that includes various ready to use components • You can look at the component categories here: https://elements.polymer-project.org/ • Support to Google material design and Google API components included
  37. 37. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Creating Custom Elements in Polymer <dom-module id="contact-card"> <link rel="import" type="css" href="contact-card.css"> <template> <content></content> <iron-icon icon="star" hidden$="{{!starred}}"></iron-icon> </template> <script> Polymer({ is: 'contact-card', properties: { starred: Boolean } }); </script> </dom-module>
  38. 38. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Using The Custom Elements in Polymer <contact-card starred> <img src="profile.jpg" alt="Gil's photo"> <span>Gil Fink</span> </contact-card>
  39. 39. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Polymer Demo
  40. 40. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek X-Tag • Components library that is supported by Microsoft • Includes only the ability to write your own custom components o Ready to use web components can be found in the Brick library • X-Tag leverages the web components standard
  41. 41. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Creating Web Components in X-Tag xtag.register('x-myelement', { lifecycle: { created: function(){ // do something when the element is created } }, events: { focus: function(){ // do something when the element in focus } }, methods: { someMethod: function(){ // implementation } } });
  42. 42. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek X-Tag Demo
  43. 43. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Questions?
  44. 44. Summary • Web Components are emerging standards that enables: • Encapsulation • Separation of Concerns • Element portability • And more • They are still in development • Taking the web one step forward! Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek
  45. 45. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Resources • Download the slide deck: http://bit.ly/1OCOnbL • http://webcomponents.org/ https://www.polymer-project.org/1.0/ http://www.x-tags.org/ • My Blog – http://www.gilfink.net • Follow me on Twitter – @gilfink
  46. 46. Join the conversation on Twitter: @DevWeek // #DW2016 // #DevWeek Thank You!

×