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: A simpler and faster react

243 views

Published on

React pioneered the component based frontend and revolutionized how we think about building a web application. Let’s leverage the patterns we learned from React with the latest web primitives and see if we can #UseThePlatform to build a better web.

We’ll discuss how to simplify your application while we compare React to Web Components with Google Polymer. As mobile becomes the dominant experience, we'll see why now more than ever initialization time & overall performance matters. Lastly, you’ll get to hear how Comcast is building its next generation single page apps for millions of customers using the latest browser APIs, Redux and Web Components with Google Polymer. You’ll walk away from this talk feeling motivated and empowered to simplify your architecture. - Chris Lorenzo

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Web components: A simpler and faster react

  1. 1. Web Components: A simpler and faster React #UseThePlatform to build a better web Chris Lorenzo / @chiefcll Senior Principal Engineer
  2. 2. Web Components: A simpler and faster ... #UseThePlatform to build a better web Chris Lorenzo / @chiefcll Senior Principal Engineer
  3. 3. Questions...
  4. 4. Workshop: Introduction to Web Components & Polymer Little Rock Tech Fest - October 5, 2017 John Riviello @JohnRiv Chris Lorenzo @Chiefcll http://tinyurl.com/lrtf-polymer
  5. 5. Google PolymerWeb Components
  6. 6. ● Largest Cable TV & Internet Service Provider in US ● Fortune 50 company ● 30+ million customers ● Owns NBCUniversal ● 500+ Components Comcast © Comcast
  7. 7. ABOUT ME ● Married 6 years ● 10 Years @ Comcast ● FE dev 16 years ● Son and daughter
  8. 8. Theo & Josie
  9. 9. New York City Philadelphia
  10. 10. © Comcast
  11. 11. © Comcast
  12. 12. © Comcast
  13. 13. © Comcast
  14. 14. © Comcast
  15. 15. © Comcast
  16. 16. My Coding Journey
  17. 17. Programming Fu (Mastery) Time Fulevel 2012
  18. 18. 2012 © Comcast
  19. 19. © Comcast 2017
  20. 20. Programming Fu Level Time Fulevel 20172013
  21. 21. How do I build an app?
  22. 22. How do I maintain an app?
  23. 23. Which Way?
  24. 24. My Journey It’s Hard
  25. 25. That’s why we love Frameworks (+Libraries)
  26. 26. Follow the Path
  27. 27. No one knows how to structure a Front End application. I've worked in this industry for years, and "best practices" are never taught. Instead, "libraries" are taught. jQuery? Angular? Backbone? Source: http://blog.andrewray.me/flux-for-stupid-people/ -@andrewray
  28. 28. "Paris - September | October 2012" by Nan Palmero is licensed under CC BY 2.0
  29. 29. What makes an app simple?
  30. 30. Simplicity Matters -Rich Hickey
  31. 31. source: https://upload.wikimedia.org/wikipedia/commons/a/ac/IndianElephant.jpg
  32. 32. Components
  33. 33. Important Concepts to Understand • Encapsulation • Composition • Separation of Concerns • Functional Decomposition "separated" by hansol is licensed under CC BY 2.0
  34. 34. React A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
  35. 35. 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
  36. 36. State => View (DOM)
  37. 37. import React, { Component } from 'react'; export default class HiMessage extends Component { render() { return <h1>Hi {this.props.name}!</h1>; } } <HiMessage name="Chris">
  38. 38. import React, { Component } from 'react'; export default class HiMessage extends Component { render() { return <h1>Hi {this.props.name}!</h1>; } } <HiMessage name="Chris">
  39. 39. We can be creating the exact same programs out of significantly simpler components Source: https://www.youtube.com/watch?v=rI8tNMsozo0&t=805s -Rich Hickey
  40. 40. import { Element } from 'polymer/polymer-element.js'; class HiMessage extends Element { static get template() { return `<h1>Hi [[name]]!</h1>`; } } customElements.define('hi-message', HiMessage); <hi-message name="Chris" />
  41. 41. import { Element } from 'polymer/polymer-element.js'; class HiMessage extends Element { static get template() { return `<h1>Hi [[name]]!</h1>`; } } customElements.define('hi-message', HiMessage); <hi-message name="Chris" />
  42. 42. import React, { Component } from 'react'; export default class HiMessage extends Component { render() { return <h1>Hi {this.props.name}!</h1>; } } <HiMessage name="Chris"> import { Element } from 'polymer/polymer-element.js'; class HiMessage extends Element { static get template() { return `<h1>Hi [[name]]!</h1>`; } } customElements.define('hi-message', HiMessage); <hi-message name="Chris" />
  43. 43. with
  44. 44. Existing Frameworks Applications Web Platform Web Components built with Polymer (or not)
  45. 45. Vanilla Component Custom Elements V1
  46. 46. source: https://upload.wikimedia.org/wikipedia/commons/a/ac/IndianElephant.jpg
  47. 47. <script src="https://polaris.xfinity.com/polaris.js" async></script> <xc-header is-authed="[[isAuthed]]" login-url="/login" tab="myxfinity" sign-out-url="/logout"> </xc-header>
  48. 48. <script src="https://polaris.xfinity.com/polaris.js" async></script> <xc-footer></xc-footer>
  49. 49. Rob Dodson: Custom Elements Everywhere https://custom-elements-everywhere.com
  50. 50. import React, { Component } from 'react'; export default class HiMessage extends Component { render() { return <h1>Hi {this.props.name}!</h1>; } } <HiMessage name="Chris"> import { Element } from 'polymer/polymer-element.js'; class HiMessage extends Element { static get template() { return `<h1>Hi [[name]]!</h1>`; } } customElements.define('hi-message', HiMessage); <hi-message name="Chris" />
  51. 51. 12kb50kb VS
  52. 52. Performance Matters Performance Matters "stopwatch" by Julian Lim is licensed under CC BY 2.0 / Color adjusted from original
  53. 53. "Samsung Galaxy S7" by Kārlis Dambrāns is licensed under CC BY 2.0 Mobile Safari 10.1Chrome for Android 54
  54. 54. Alex Russell: Adapting to the Mobile Web F̶u̶t̶u̶r̶e̶ Present
  55. 55. 53% of users abandon a site that takes longer than 3 seconds to load. Source: https://www.soasta.com/blog/google-mobile-web-performance-study/ -Google
  56. 56. Mobile pages that are 1 second faster experience up to 27% increase in conversion rate. Source: https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
  57. 57. Over 15s!
  58. 58. "Paris - September | October 2012" by Nan Palmero is licensed under CC BY 2.0
  59. 59. Using Web Components Framework/Library Sizes (with GZIP compression) 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
  60. 60. Google Polymer Project
  61. 61. #UseThePlatform
  62. 62. Google Polymer Project
  63. 63. Your JS Code + Framework
  64. 64. Your JS Code Browser
  65. 65. Alex Russell: Web Components: Just in the Nick of Time
  66. 66. Web Components #UseThePlatform
  67. 67. CUSTOM ELEMENTS HTML IMPORTS SHADOW DOMTEMPLATES Source: http://webcomponents.org/
  68. 68. customElements.define('hi-message', HiMessage);
  69. 69. <template id="t"> <li>{item}</li> </template>
  70. 70. <link rel="import" href="myc.html">
  71. 71. let shadowRoot = elm.attachShadow({mode: 'open'}); shadowRoot.innerHTML = 'Hi There!';
  72. 72. Source: http://webcomponents.org/
  73. 73. Edge Browser https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=sort%3AVotes
  74. 74. https://developer.microsoft.com/en-us/microsoft-edge/platform/status/?q=sort%3AVotes
  75. 75. Closer to the metal
  76. 76. "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
  77. 77. What about Virtual Dom?
  78. 78. Programmers know the benefits of everything and the tradeoffs of nothing. Source: https://www.youtube.com/watch?v=rI8tNMsozo0 -Rich Hickey
  79. 79. Source: https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
  80. 80. Are you Facebook?
  81. 81. source: https://commons.wikimedia.org/wiki/File:Internet_Explorer_10_logo.svg Is IE #1?
  82. 82. Justin Fagnani: Efficient, Expressive, and Extensible HTML Templates
  83. 83. ` <h1>${name}</h1> <p>${content}</p> `
  84. 84. html` <h1>${name}</h1> <p>${content}</p> `
  85. 85. html` <h1>${name}</h1> <p>${content}</p> ` var name = 'Chris'; var content = 'Loves Web Components!'; function html(strings, name, content) { // strings[0] === <h1> // strings[1] === </h1> // name === Chris return 'Whatever string you want'; }
  86. 86. Source: https://twitter.com/mathias/status/912223187005509632
  87. 87. Source: https://arewefastyet.com/#machine=29&view=single&suite=six-speed&subtest=templatestringtag-es6
  88. 88. What about building an App?
  89. 89. Unidirectional Data Flow
  90. 90. <xc-app> index.html LogicStore {}
  91. 91. component-name-event-name <xc-app> index.html Logic xc-people-unpause-all-devices Native Event Store {}
  92. 92. What’s That?<xc-app> index.html LogicStore {}
  93. 93. component-name-event-name <xc-app> index.html Logic xc-people-unpause-all-devices Native Event Store {}
  94. 94. component-name-event-name <xc-app> index.html Store {} Logic xc-people-unpause-all-devices Native Event
  95. 95. component-name-event-name <xc-app> index.html Store {} Logic xc-people-unpause-all-devices Native Event Smart Parent 88 MPH + 1.21 gigawatts = Time travel +
  96. 96. <xc-app> index.html LogicStore {} component-name-event-name xc-people-unpause-all-devices Native Event
  97. 97. <xc-app> index.html LogicStore {} component-name-event-name xc-people-unpause-all-devices Native Event
  98. 98. Decouple State UI
  99. 99. I’ve been married and divorced to so many frontend frameworks that I want to stay a bachelor for the rest of my life. -Paul Palladino
  100. 100. Can you move it? -Rich Hickey Source: https://www.youtube.com/watch?v=rI8tNMsozo0
  101. 101. Store {}
  102. 102. "Software, testing, service" by testbytes is licensed under CC BY 2.0
  103. 103. Kevin Schaaf: End to End Apps with Polymer
  104. 104. In Conclusion
  105. 105. We can be creating the exact same programs out of significantly simpler components Source: https://www.youtube.com/watch?v=rI8tNMsozo0&t=805s -Rich Hickey
  106. 106. class HelloMessage extends HyperHTMLElement { created() { this.state.name = 'Chris'; this.render(); } render() { this.html`<h1>${this.state.name}</h1>`; } } HelloMessage.define('hello-message');
  107. 107. 12kb50kb VS VS 6kb
  108. 108. React v16 49.8kb -> 34.8kb Source: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html
  109. 109. React v16 MIT licensed Source: https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html
  110. 110. Hacker News PWA Source: https://hnpwa.com/
  111. 111. Simplicity Matters -Rich Hickey
  112. 112. Simple !== Easy -Rich Hickey
  113. 113. My Journey It’s Hard
  114. 114. "Rocky" by Stefan Ogrisek is licensed under CC BY 2.0 / Color adjusted from original Simplicity Creates Opportunity
  115. 115. Polymer Overview - Check out my other talks! Polymer in Practice @ Comcast Polymer Changes Everything! See all my talks - http://bit.ly/2kYFOyj
  116. 116. Thanks! / Questions? Chris Lorenzo / @chiefcll Senior Principal Engineer Talks: http://bit.ly/2kYFOyj

×