Building a better web with Web Components and Polymer 2.0

Event:
- Google I/O Extended 2017 Kuala Lumpur (July 22, 2017)
- Barcamp Cyberjaya 2017 (Aug 5, 2017)

Topic: Polymer, Web Components

Transcript

1. Building a Better Web with Web Components and Polymer 2.0 Henry Lim @henrylim96 Google Developer Group Kuala Lumpur
3. <h1> <div> <img>
4. <google-map> <paper-card> <iron-ajax>
5. web components
7. safari supports web components
8. 1B + mobile devices natively support web components
9. // Time to show some code
10. // Time to show some code <my-element></my-element>
11. class MyElement extends HTMLElement { }
12. class MyElement extends HTMLElement { } customElements.define('my-element', MyElement);
13. Shadow DOM
14. class MyElement extends HTMLElement { constructor(){ super(); this.attachShadow({mode:'open'}).innerHTML = 'Web Components are native! ' } } customElements.define('my-element', MyElement);
16. Polymer Web Components are awesome!
18. 2 BILLIONS
22. Source: McDonald's Singapore, https://youtu.be/xZU58r01BOw
32. Native Browser Support
33. Native Browser Support ES6 Classes ✔ ✔ ✔ ✔
34. Native Browser Support ES6 Classes ✔ ✔ ✔ ✔ Custom Elements ✔ ✔ Shadow DOM ✔ ✔ CSS Custom Properties ✔ ✔ ✔ ✔
36. Native Browser Support ES6 Classes ✔ ✔ ✔ ✔ Custom Elements ✔ ✔ Shadow DOM ✔ ✔ CSS Custom Properties ✔ ✔ ✔ ✔
37. Native Browser Support ES6 Classes ✔ ✔ ✔ ✔ Transpile Custom Elements ✔ ✔ Polyfill Polyfill Polyfill Shadow DOM ✔ ✔ Polyfill Polyfill Polyfill CSS Custom Properties ✔ ✔ ✔ ✔ Polyfill
38. Native Browser Support ES6 Classes ✔ ✔ ✔ ✔ Transpile Custom Elements ✔ ✔ Polyfill Polyfill Polyfill Shadow DOM ✔ ✔ Polyfill Polyfill Polyfill CSS Custom Properties ✔ ✔ ✔ ✔ Polyfill Polymer 2.0 + Polyfill Size 11k 14k 33k 33k 37k
39. Polymer 2.0 + Polyfill Size 11k 14k 33k 33k 37k Polymer 1.9 + Polyfill Size 40k 53k 53k 53k 53k
40. ¼ the size of Polymer 1.0
42. webcomponents.org
43. <vaadin-grid> <paper-date-picker> <paper-date-picker> <emoji-translate>
44. IDE Plugins
45. Polymer CLI
46. PRPL
47. Push critical resources for the initial URL route. Render initial route. Pre-cache remaining routes. Lazy-load and create remaining routes on demand.
48. App Toolbox polymer-project.org/2.0/toolbox/
49. POLYMER NEWS Progressive Web App Template news.polymer-project.org
50. Web Components Polymer Library Tooling PRPL App Toolbox
51. Shadow DOM DOM templating Data binding Gesture events Custom CSS properties and more ...
52. Can I use Polymer with X framework/library?
53. Thank you ! Henry Lim @henrylim96 Google Developer Group Kuala Lumpur