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 of Web Development is Here

326 views

Published on

With the updates to iOS and Android phones released earlier this year, Web Components are now supported natively. With libraries such as Polymer that are built on top of Web Components, it is now possible to easily create fast Progressive Web Apps (PWAs) without the overhead of a framework. In this workshop, we'll begin with a brief introduction to Web Components and Polymer, and then dive into hands-on experiences with the core aspects of Web Components: the <template> tag, Custom Elements, and the Shadow DOM.

Published in: Internet
  • Be the first to comment

Web Components: The Future of Web Development is Here

  1. 1. LibertyJS - November 16, 2017 John Riviello @JohnRiv Chris Lorenzo @Chiefcll Web Components: The Future of Web Development is Here
  2. 2. © Comcast
  3. 3. © Comcast
  4. 4. © Comcast
  5. 5. © Comcast
  6. 6. © Comcast
  7. 7. © Comcast
  8. 8. Don’t all of today’s web frameworks/libraries provide “components”?
  9. 9. React
  10. 10. React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy. Source: https://facebook.github.io/react/docs/why-react.html
  11. 11. © Comcast
  12. 12. © Comcast
  13. 13. Web Components: The Future of Web Development is Here13
  14. 14. Web Components: The Future of Web Development is Here14
  15. 15. How do we create a component without the framework?
  16. 16. #UseThePlatform - Polymer Motto
  17. 17. Web Components #UseThePlatform
  18. 18. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll18 4 Specs
  19. 19. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll19 Custom Elements
  20. 20. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll20 Custom Elements class HiMessage extends HTMLElement { } customElements.define('hi-message', HiMessage); <hi-message></hi-message>
  21. 21. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll21 HTML Imports
  22. 22. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll22 HTML Imports • Means to import custom elements - <link rel="import" href="../xc-tab/xc-tab.html"> • Built-in deduplication • Componetize the HTML, CSS & JavaScript • Will be replaced by ES6 Modules - import "../xc-tab/xc-tab.js"
  23. 23. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll23 Templates
  24. 24. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll24 • Used to declare fragments of HTML - <template id="tab"> <div class="tab-content"></div> </template> • The element itself renders nothing • Can be cloned and inserted in the document via JavaScript, which will render the content Templates
  25. 25. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll25 Shadow DOM
  26. 26. What Are Web Components? Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll26 •Allows you to take a DOM subtree and hide it from the document scope •Hides CSS styles as well •Common examples from HTML5 include: <select>, <video>, & <input type="date"> Shadow DOM
  27. 27. Can we even use these things?
  28. 28. Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll28 Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html
  29. 29. Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll29 Sources: https://developers.google.com/web/fundamentals/getting-started/primers/customelements https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
  30. 30. Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll31 Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
  31. 31. Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll32 Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
  32. 32. Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201740-201745-bar
  33. 33. Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201740-201745-bar 81.2%
  34. 34. "Samsung Galaxy S7" by Kārlis Dambrāns is licensed under CC BY 2.0 Mobile Safari 10.1Chrome for Android 54
  35. 35. "Samsung Galaxy S7" by Kārlis Dambrāns is licensed under CC BY 2.0 Mobile Safari 10.1Chrome for Android 54 = nearly 100% of mobile
  36. 36. How do we use a component with a framework?
  37. 37. © Comcast
  38. 38. © Comcast Source: https://www.github.com/Comcast/polaris
  39. 39. © Comcast
  40. 40. © Comcast
  41. 41. <script href="https://polaris.xfinity.com/polaris.js"></script> <xc-header tab="myaccount" is-authed="[[isAuthed]]" login-url="/login" sign-out-url="/logout" first-name="[[openidData.given_name]]" user-name="[[openidData.preferred_username]]"> </xc-header> <xc-footer></xc-footer>
  42. 42. Existing Frameworks Applications Web Platform Web Components built with Polymer (or not)
  43. 43. Rob Dodson: Custom Elements Everywhere https://custom-elements-everywhere.com
  44. 44. How do I use Web Components?
  45. 45. “The Way of the Web” - Ben Issa, ING Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll46 Source: https://youtu.be/8ZTFEhPBJEE?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ
  46. 46. “Assemblers First, Craftspeople Second” - Ben Issa, 2016 Polymer Summit Using Web Components Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll47 "Puzzle Pieces Jigsaw Piece Concept" is licensed under CC0 1.0 / Color adjusted from original "Blacksmith Forging Smith Forger" is licensed under CC0 1.0 / Color adjusted from original
  47. 47. $ bower install ELEMENT_NAME --save $ bower install iron-pages --save
  48. 48. $ bower install ELEMENT_NAME --save $ bower install iron-pages --save
  49. 49. Using Web Components • Import the component - <link rel="import" href="../iron-pages/iron- pages.html"> • Use your custom element as a normal HTML tag - <iron-pages> <div>Page 1 content</div> <div>Page 2 content</div> </iron-pages> Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll51
  50. 50. Google Polymer Project
  51. 51. Using Web Components Polymer is NOT • Material Design Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll55
  52. 52. Source: https://ebidel.github.io/material-playground/
  53. 53. Using Web Components Polymer is NOT • Material Design •Required to use Web Components Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll57
  54. 54. Using Web Components Polymer is NOT • Material Design •Required to use Web Components • A framework Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll58
  55. 55. Using Web Components Polymer is NOT • Material Design •Required to use Web Components • A framework • Heavy Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll59
  56. 56. Using Web Components Framework/Library Sizes (with GZIP compression) Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll60 Source: http://minime.stephan-brumme.com React’s size is react + react-dom from https://reactjs.org/blog/2017/09/26/react-v16.0.html jQuery’s size is from https://code.jquery.com/jquery-3.2.1.min.js Polymer’s size computed locally based on v2.0.0-rc.4 with just polymer-element.html, and also with the non-legacy imports from polymer.html 117.9kb 56.9kb 34.6kb 30.1kb 11.3kb - 17.7kb 34.8kb v2.16.2 v1.6.6 v3.2.1 v2.5.3 v2.0.0-rc4v16.0.0
  57. 57. Why should I use Polymer?
  58. 58. Primitives are designed so we can build libraries on top of them.
  59. 59. Vanilla JS class MyButton extends HTMLElement { connectedCallback() { if (super.connectedCallback) super.connectedCallback(); this.addEventListener('click', this._click); } _click() { alert('Hello'); } } customElements.define('my-button', MyButton); Polymer class MyButton extends Polymer.Element { static get is() { return 'my-button'; } ready() { super.ready(); this.addEventListener('click', e => {this._click(e)}); } _click() { alert('Hello'); } } customElements.define(MyButton.is, MyButton);
  60. 60. Vanilla JS connectedCallback() { this.innerHTML = ` <button id='kickMe'> Kick Me </button> `; this.querySelector('#kickMe') .addEventListener('click', this.handleClick.bind(this)); } Polymer <dom-module id="my-button"> <template> <button on-click="handleClick"> Kick Me </button> </template> </dom-module>
  61. 61. Vanilla JS - Only a few components Polymer - Lots of components or a site
  62. 62. FYI - Other Libraries Skate JS X-Tag < >XX-Tag
  63. 63. Source: https://github.com/webcomponents/gold-standard/wiki
  64. 64. How do I build a Polymer Component?
  65. 65. Source: https://www.polymer- project.org/2.0/docs/tools/polymer-cli
  66. 66. $ polymer help Available Commands analyze Writes analysis metadata in JSON format to standard out build Builds an application-style project help Shows this help message, or help for a specific command init Initializes a Polymer project install installs Bower dependencies, optionally installing "variants" lint Identifies potential errors in your code. serve Runs the polyserve development server test Runs web-component-tester
  67. 67. $ polymer help Available Commands analyze Writes analysis metadata in JSON format to standard out build Builds an application-style project help Shows this help message, or help for a specific command init Initializes a Polymer project install installs Bower dependencies, optionally installing "variants" lint Identifies potential errors in your code. serve Runs the polyserve development server test Runs web-component-tester
  68. 68. $ polymer init ? Which starter template would you like to use? (Use arrow keys) ❯ polymer-1-element - A simple Polymer 1.0 element template polymer-2-element - A simple Polymer 2.0 element template polymer-1-application - A simple Polymer 1.0 application template polymer-2-application - A simple Polymer 2.0 application polymer-1-starter-kit - A Polymer 1.x starter application template, with navigation and "PRPL pattern" loading polymer-2-starter-kit - A Polymer 2.x starter application template, with navigation and "PRPL pattern" loading shop - The "Shop" Progressive Web App demo
  69. 69. $ polymer init ? Which starter template would you like to use? (Use arrow keys) polymer-1-element - A simple Polymer 1.0 element template ❯ polymer-2-element - A simple Polymer 2.0 element template polymer-1-application - A simple Polymer 1.0 application template polymer-2-application - A simple Polymer 2.0 application polymer-1-starter-kit - A Polymer 1.x starter application template, with navigation and "PRPL pattern" loading polymer-2-starter-kit - A Polymer 2.x starter application template, with navigation and "PRPL pattern" loading shop - The "Shop" Progressive Web App demo
  70. 70. $ polymer init ? Which starter template would you like to use? polymer-2-element info: Running template polymer-2-element... ? Element name my-element ? Brief description of the element My sample element create bower.json create demo/index.html create index.html create polymer.json create README.md create my-element.html create test/my-element_test.html Project generated! Installing dependencies...
  71. 71. <!-- Material design: [Tabs](https://www.google.com/design/s pec/components/tabs.html) `paper-tabs` makes it easy to explore and switch between different views or functional aspects of an app, or to browse categorized data sets. Use `selected` property to get or set the selected tab. Example: <paper-tabs selected="0"> <paper-tab>TAB 1</paper-tab> <paper-tab>TAB 2</paper-tab> <paper-tab>TAB 3</paper-tab> </paper-tabs>
  72. 72. <!-- ### Styling The following custom properties and mixins are available for styling: Custom property | Description | Default ----------------|-------------|------- --- `--paper-tabs-selection-bar-color` | Color for the selection bar | `-- paper-yellow-a100` `--paper-tabs-selection-bar` | Mixin applied to the selection bar | `{}` `--paper-tabs` | Mixin applied to the tabs | `{}` `--paper-tabs-content` | Mixin applied to the content container of tabs | `{}` `--paper-tabs-container` | Mixin applied to the layout container of
  73. 73. /** * If true, the tabs are aligned to bottom (the selection bar appears at the top). */ alignBottom: { type: Boolean, value: false }, /** * If true, tabs are automatically selected when focused using the * keyboard. */ autoselect: { type: Boolean, value: false },
  74. 74. Documenting Your Polymer Code • Document with JSDoc syntax - usejsdoc.org • Create a page that imports & includes iron-component-page • Generate the docs and load your page: $ npm i -g polymer-cli bower $ polymer analyze > analysis.json $ polymer serve --open Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll84 Additional Details: https://github.com/PolymerElements/iron-component-page
  75. 75. <test-fixture id="NoLabel">
  76. 76. a11ySuite('NoLabel');
  77. 77. How do I build a Polymer Web App?
  78. 78. Source: https://www.polymer-project.org/2.0/docs/tools/polymer-cli
  79. 79. $ polymer init ? Which starter template would you like to use? (Use arrow keys) ❯ polymer-1-element - A simple Polymer 1.0 element template polymer-2-element - A simple Polymer 2.0 element template polymer-1-application - A simple Polymer 1.0 application template polymer-2-application - A simple Polymer 2.0 application polymer-1-starter-kit - A Polymer 1.x starter application template, with navigation and "PRPL pattern" loading polymer-2-starter-kit - A Polymer 2.x starter application template, with navigation and "PRPL pattern" loading shop - The "Shop" Progressive Web App demo
  80. 80. $ polymer init ? Which starter template would you like to use? (Use arrow keys) polymer-1-element - A simple Polymer 1.0 element template polymer-2-element - A simple Polymer 2.0 element template polymer-1-application - A simple Polymer 1.0 application template ❯ polymer-2-application - A simple Polymer 2.0 application polymer-1-starter-kit - A Polymer 1.x starter application template, with navigation and "PRPL pattern" loading polymer-2-starter-kit - A Polymer 2.x starter application template, with navigation and "PRPL pattern" loading shop - The "Shop" Progressive Web App demo
  81. 81. Demo Time!!!
  82. 82. What are some Best Practices?
  83. 83. Sharable ComponentsSharable Components
  84. 84. You Need a TeamYou Need a Team
  85. 85. © Comcast
  86. 86. TDD?
  87. 87. DDD!
  88. 88. D D D
  89. 89. Demo Driven Development
  90. 90. © Comcast
  91. 91. Use CORS (Cross-Origin Resource Sharing) Link: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
  92. 92. Separate Your Data from Your UI Link: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
  93. 93. Why? 1.Decouple State / UI 2.Unidirectional Flow 3.Loadable State 4.Community Tools
  94. 94. <xc-app> index.html LogicStore {}
  95. 95. component-name-event-name <xc-app> index.html Logic xc-people-unpause-all-devices Native Event Store {}
  96. 96. component-name-event-name <xc-app> index.html Logic xc-people-unpause-all-devices Native Event Store {} What’s That?
  97. 97. component-name-event-name <xc-app> index.html Logic xc-people-unpause-all-devices Native Event Store {}
  98. 98. component-name-event-name <xc-app> index.html Store {} Logic xc-people-unpause-all-devices Native Event
  99. 99. component-name-event-name <xc-app> index.html Store {} Logic xc-people-unpause-all-devices Native Event component-name-event-name xc-people-unpause-all-devices Native Event Smart Parent +
  100. 100. <xc-app> index.html LogicStore {} component-name-event-name xc-people-unpause-all-devices Native Event
  101. 101. <xc-app> index.html LogicStore {} component-name-event-name xc-people-unpause-all-devices Native Event
  102. 102. “How to use Redux in Polymer -- Polycasts #61” - Rob Dodson Web Components: The Future of Web Development is Here116 Source: https://youtu.be/PahsgJn0sgU?list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo
  103. 103. Important Concepts to Understand • Encapsulation • Composition • Separation of Concerns • Functional Decomposition "separated" by hansol is licensed under CC BY 2.0
  104. 104. Simplicity Matters -Rich Hickey https://youtu.be/rI8tNMsozo0
  105. 105. "Rocky" by Stefan Ogrisek is licensed under CC BY 2.0 / Color adjusted from original Simplicity Creates Opportunity
  106. 106. Useful Links •WebComponents.org - webcomponents.org •Polymer Website - polymer-project.org •Polymer Slack - polymer-slack.herokuapp.com •Polymer 2.x Cheat Sheet - https://meowni.ca/posts/polymer-2-cheatsheet/ •How to use Polymer with Webpack - http://robdodson.me/how-to-use-polymer-with-webpack/ •Hands-on with the Polymer 3.0 preview - https://www.polymer-project.org/blog/2017-08-23- hands-on-30-preview •Custom Elements Everywhere - https://custom-elements-everywhere.com/ •Polycasts on YouTube - https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN •2017 Polymer Summit videos on YouTube - https://www.youtube.com/playlist?list=PLNYkxOF6rcIDP0PqVaJxqNWwIgvoEPzJi •End-to-End Polymer Apps - 2017 Chrome Dev Summit video - https://youtu.be/Wu2GCRkDecI •2017 Google I/O Polymer videos on YouTube - https://www.youtube.com/playlist?list=PL_c6rbXV248du6m1VJABo32mP7sXWVb4m Web Components: The Future of Web Development is Here - @JohnRiv & @chiefcll120
  107. 107. Thank You!
  108. 108. Thank you! John Riviello @JohnRiv Chris Lorenzo @Chiefcll

×