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

1,809 views

Published on

If you haven’t explored Web Components yet, you’re missing out on a powerful tool that can greatly enhance reusability of common web elements throughout your websites and web applications. As Comcast has been updating our web properties to unify under a single UX, using Web Components with Polymer has helped make that process much more efficient.

This session will introduce you to what exactly Web Components are and how to use them. We’ll also cover building Web Components with Polymer, the most popular Web Component library. You’ll get to hear how Comcast is using the web platform to build its next generation single page apps & websites using the latest browser APIs.

You’ll also learn about how easy it is to onboard a team to using Polymer, tips for sharing components with other websites & across teams, and best practices Comcast has established for efficient development & deployment of Web Components.

Published in: Technology

Web Components: The Future of Web Development is Here

  1. 1. Web Components: The Future of Web Development is Here MinneWebCon - May 1, 2017 John Riviello @JohnRiv Chris Lorenzo @Chiefcll
  2. 2. Comcast • Largest Cable TV & Internet Service Provider in United States • Fortune 50 company • 30+ million customers • Owns NBCUniversal • 500+ Web Components Web Components: The Future of Web Development is Here2 © 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 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
  10. 10. © Comcast
  11. 11. © Comcast
  12. 12. Web Components: The Future of Web Development is Here12
  13. 13. Web Components: The Future of Web Development is Here13
  14. 14. #UseThePlatform - Polymer Motto
  15. 15. © Comcast
  16. 16. © Comcast
  17. 17. © Comcast
  18. 18. <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>
  19. 19. What Are Web Components?
  20. 20. What Are Web Components? Web Components: The Future of Web Development is Here20 4 Specs
  21. 21. What Are Web Components? Web Components: The Future of Web Development is Here21 Custom Elements
  22. 22. What Are Web Components? Web Components: The Future of Web Development is Here22 Custom Elements •Provides a way for authors to build their own fully-featured DOM elements. - <xc-tab>Your Wifi</xc-tab> •Can extend existing HTML elements - class FancyButton extends HTMLButtonElement
  23. 23. What Are Web Components? Web Components: The Future of Web Development is Here23 HTML Imports
  24. 24. What Are Web Components? Web Components: The Future of Web Development is Here24 HTML Imports • Means to import custom elements - <link rel="import" href="../xc-tab/xc-tab.html"> •Can link to external resources - <link rel="import" href="http://polygit.org/components/paper-toast/ paper-toast.html">
  25. 25. What Are Web Components? Web Components: The Future of Web Development is Here25 Templates
  26. 26. What Are Web Components? Web Components: The Future of Web Development is Here26 •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
  27. 27. What Are Web Components? Web Components: The Future of Web Development is Here27 Shadow DOM
  28. 28. What Are Web Components? Web Components: The Future of Web Development is Here28 •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
  29. 29. Can we even use these things?
  30. 30. Web Components: The Future of Web Development is Here30 Source: https://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0975.html
  31. 31. Web Components: The Future of Web Development is Here31 Sources: https://developers.google.com/web/fundamentals/getting-started/primers/customelements https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
  32. 32. Web Components: The Future of Web Development is Here32 Source: https://www.webcomponents.org/
  33. 33. Web Components: The Future of Web Development is Here33 Source: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/
  34. 34. Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201710-201715-bar
  35. 35. Source: http://gs.statcounter.com/browser-version-partially-combined-market-share/all/united-states-of-america/#weekly-201710-201715-bar 81.9%
  36. 36. "Samsung Galaxy S7" by Kārlis Dambrāns is licensed under CC BY 2.0 Mobile Safari 10.1Chrome for Android 54
  37. 37. "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
  38. 38. How do I use Web Components?
  39. 39. “The Way of the Web” - Ben Issa, ING Web Components: The Future of Web Development is Here39 Source: https://youtu.be/8ZTFEhPBJEE?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ
  40. 40. “Assemblers First, Craftspeople Second” - Ben Issa, 2016 Polymer Summit Using Web Components Web Components: The Future of Web Development is Here40 "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
  41. 41. $ bower install ELEMENT_NAME --save $ bower install iron-pages --save
  42. 42. $ bower install ELEMENT_NAME --save $ bower install iron-pages --saveCOMING SOON!
  43. 43. 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 Here44
  44. 44. What’s Google Polymer?
  45. 45. Google Polymer Project
  46. 46. Using Web Components Polymer is NOT • Material Design Web Components: The Future of Web Development is Here49
  47. 47. Source: https://ebidel.github.io/material-playground/
  48. 48. Using Web Components Polymer is NOT • Material Design • Required to use Web Components Web Components: The Future of Web Development is Here51
  49. 49. Using Web Components Polymer is NOT • Material Design • Required to use Web Components • A framework Web Components: The Future of Web Development is Here52
  50. 50. Using Web Components Polymer is NOT • Material Design • Required to use Web Components • A framework • Heavy Web Components: The Future of Web Development is Here53
  51. 51. Using Web Components Framework/Library Sizes (with GZIP compression) Web Components: The Future of Web Development is Here54 Source: http://minime.stephan-brumme.com React’s size is react.min.js + react-dom.min.js from https://cdnjs.com/libraries/react 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 123.7kb 57.4kb 34.6kb 26.2kb 11.3kb - 17.7kb 46.0kb v2.12.1 v1.6.4 v3.2.1 v2.2.6 v2.0.0-rc4v15.5.4
  52. 52. Why should I use Polymer?
  53. 53. Primitives are designed so we can build libraries on top of them.
  54. 54. 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);
  55. 55. 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>
  56. 56. Vanilla JS - Only a few components Polymer - Lots of components or a site
  57. 57. How do I build a Polymer Component?
  58. 58. Source: https://www.polymer-project.org/2.0/docs/tools/polymer-cli
  59. 59. $ 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
  60. 60. $ 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
  61. 61. $ 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
  62. 62. $ 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
  63. 63. $ 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...
  64. 64. <iron-component-page></iron-component-page>
  65. 65. <test-fixture id="NoLabel">
  66. 66. a11ySuite('NoLabel');
  67. 67. How do I build a Polymer Web App?
  68. 68. Source: https://www.polymer-project.org/2.0/docs/tools/polymer-cli
  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? (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
  71. 71. Demo Time!!!
  72. 72. What are some Best Practices?
  73. 73. Sharable ComponentsSharable Components
  74. 74. Use CORS (Cross-Origin Resource Sharing) Link: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
  75. 75. Separate Your Data from Your UI Link: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
  76. 76. <xc-app> index.html LogicStore {}
  77. 77. component-name-event-name <xc-app> index.html Logic xc-people-unpause-all-devices Native Event Store {}
  78. 78. component-name-event-name <xc-app> index.html Logic xc-people-unpause-all-devices Native Event Store {}
  79. 79. component-name-event-name <xc-app> index.html Store {} Logic xc-people-unpause-all-devices Native Event
  80. 80. <xc-app> index.html LogicStore {} component-name-event-name xc-people-unpause-all-devices Native Event
  81. 81. <xc-app> index.html LogicStore {} component-name-event-name xc-people-unpause-all-devices Native Event
  82. 82. “How to use Redux in Polymer -- Polycasts #61” - Rob Dodson Web Components: The Future of Web Development is Here97 Source: https://youtu.be/PahsgJn0sgU?list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo
  83. 83. What about testing your components?
  84. 84. © Comcast
  85. 85. TDD?
  86. 86. DDD!
  87. 87. D D D ?
  88. 88. Demo D D
  89. 89. Demo Driven D
  90. 90. Demo Driven Development
  91. 91. © Comcast
  92. 92. How About Building a Team How About Building a Team?
  93. 93. Important Concepts to Understand • Encapsulation • Composition • Separation of Concerns Web Components: The Future of Web Development is Here108 "separated" by hansol is licensed under CC BY 2.0
  94. 94. "Rocky" by Stefan Ogrisek is licensed under CC BY 2.0 / Color adjusted from original
  95. 95. Useful Links • WebComponents.org - webcomponents.org • Polymer Website - polymer-project.org • Polycasts on YouTube - https://www.youtube.com/playlist?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN - Top recommended Polycast to watch: Data Binding 101 - https://youtu.be/1sx6YNn58OQ?list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN • Web Components and Polymer video from 2016 Chrome Dev Summit - https://youtu.be/Ihdp63FaRKA • 2016 Polymer Summit videos on YouTube - https://www.youtube.com/playlist?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ - How I learned to stop worrying and love the Polymer toolbox - https://youtu.be/6t2JRKTCYbI?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ - Data Flow in Polymer Elements and Apps - https://youtu.be/pAW4YDLtPVs?list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ • 2016 Google I/O Polymer videos on YouTube - https://www.youtube.com/playlist?list=PLNYkxOF6rcIDnSm7bZRJC36Ca1DYXSQ70 Web Components: The Future of Web Development is Here110
  96. 96. Thank you! John Riviello @JohnRiv Chris Lorenzo @Chiefcll

×