Web Components with Polymer (extra Polymer 2.0)

Lightning talk presented by me at Google I/O Extended Cuiabá 2017.

Transcript

1. Web Components with Polymer @ Google I/O, Extended Cuiabá Web Components with Polymer /dhyegofernando
2. Web Components with Polymer @ Google I/O, Extended Cuiabá /dhyegofernando full stack dev @
3. Web Components with Polymer @ Google I/O, Extended Cuiabá
4. Web Components with Polymer @ Google I/O, Extended Cuiabá Agenda ✓ What is a Web Component? ✓ Benefits ✓ Where do they live? Web Components ✓ What is Polymer? ✓ Why Polymer? Polymer ✓ Polymer 2.0 ✓ App Toolbox ✓ Polymer CLI ✓ Getting Started (live code) ✓ Finals
5. Web Components with Polymer @ Google I/O, Extended Cuiabá What is a Web Component?
6. Web Components with Polymer @ Google I/O, Extended Cuiabá Just HTML Elements
 <div>Hello World</div>
7. Web Components with Polymer @ Google I/O, Extended Cuiabá Custom Elements
 <your-own-element/>
8. Web Components with Polymer @ Google I/O, Extended Cuiabá HTML Templates
 <template></template>
9. Web Components with Polymer @ Google I/O, Extended Cuiabá Shadow DOM
 <slot></slot>
10. Web Components with Polymer @ Google I/O, Extended Cuiabá HTML Imports
 <link/>
11. Web Components with Polymer @ Google I/O, Extended Cuiabá What are its benefits?
12. Web Components with Polymer @ Google I/O, Extended Cuiabá Reusable
13. Web Components with Polymer @ Google I/O, Extended Cuiabá Maintainable
14. Web Components with Polymer @ Google I/O, Extended Cuiabá Encapsulated && Independent
15. Web Components with Polymer @ Google I/O, Extended Cuiabá Let’s Work Together
16. Web Components with Polymer @ Google I/O, Extended Cuiabá What is not so good?
17. Web Components with Polymer @ Google I/O, Extended Cuiabá Cross-browsers weirdness
18. Web Components with Polymer @ Google I/O, Extended Cuiabá Cross-browsers specs implementation
19. Web Components with Polymer @ Google I/O, Extended Cuiabá Polyfills are slow
20. Web Components with Polymer @ Google I/O, Extended Cuiabá Where do they live?
21. Web Components with Polymer @ Google I/O, Extended Cuiabá “There’s an element for that” bit.ly/2rDlzJ0
22. Web Components with Polymer @ Google I/O, Extended Cuiabá
23. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer
24. Web Components with Polymer @ Google I/O, Extended Cuiabá 3.5+ Million Pages using Polymer
25. Web Components with Polymer @ Google I/O, Extended Cuiabá Who is using Polymer? bit.ly/2rCuX04
26. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer + PWA + Google Cloud Vision API bit.ly/2qIDX66 Cheese
27. Web Components with Polymer @ Google I/O, Extended Cuiabá What is Polymer?
28. Web Components with Polymer @ Google I/O, Extended Cuiabá What is not Polymer?
29. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer is not a framework
30. Web Components with Polymer @ Google I/O, Extended Cuiabá Interoperable
 by default
31. Web Components with Polymer @ Google I/O, Extended Cuiabá +
32. Web Components with Polymer @ Google I/O, Extended Cuiabá +
33. Web Components with Polymer @ Google I/O, Extended Cuiabá + any framework
34. Web Components with Polymer @ Google I/O, Extended Cuiabá Why Polymer at all?
35. Web Components with Polymer @ Google I/O, Extended Cuiabá Template-based rendering
36. Web Components with Polymer @ Google I/O, Extended Cuiabá State propagation
37. Web Components with Polymer @ Google I/O, Extended Cuiabá Declarative events
38. Web Components with Polymer @ Google I/O, Extended Cuiabá Attributes && Properties sync
39. Web Components with Polymer @ Google I/O, Extended Cuiabá Premisses
40. Web Components with Polymer @ Google I/O, Extended Cuiabá Speed
41. Web Components with Polymer @ Google I/O, Extended Cuiabá Latest APIs
42. Web Components with Polymer @ Google I/O, Extended Cuiabá App Toolbox Scaffolding Routing i18n UI Elements App Storage Offline Behavior + Patterns
43. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer CLI npm install -g polymer-cli
44. Web Components with Polymer @ Google I/O, Extended Cuiabá polymer init
45. Web Components with Polymer @ Google I/O, Extended Cuiabá polymer serve polymer test polymer build
46. Web Components with Polymer @ Google I/O, Extended Cuiabá Polymer 2.0
47. Web Components with Polymer @ Google I/O, Extended Cuiabá Smaller, faster, better…
48. Web Components with Polymer @ Google I/O, Extended Cuiabá Cross-browser fits 9, 10, 11
49. Web Components with Polymer @ Google I/O, Extended Cuiabá natively supported +1b devices
50. Web Components with Polymer @ Google I/O, Extended Cuiabá 1/4 the size of Polymer 1.0
51. Web Components with Polymer @ Google I/O, Extended Cuiabá Interoperability
52. Web Components with Polymer @ Google I/O, Extended Cuiabá ES6 syntax like class MyElement extends Polymer.Element { // ... }
53. Web Components with Polymer @ Google I/O, Extended Cuiabá Data system improvements
54. Web Components with Polymer @ Google I/O, Extended Cuiabá Smooth Migration
55. Web Components with Polymer @ Google I/O, Extended Cuiabá Hybrid Elements
56. Web Components with Polymer @ Google I/O, Extended Cuiabá Getting Started
57. Web Components with Polymer @ Google I/O, Extended Cuiabá Where to Learn?
58. Web Components with Polymer @ Google I/O, Extended Cuiabá “There’s an element for that” bit.ly/2rDlzJ0
59. Web Components with Polymer @ Google I/O, Extended Cuiabá Polycasts bit.ly/2q3I4Xf
60. Web Components with Polymer @ Google I/O, Extended Cuiabá Let’s discuss ?
61. Web Components with Polymer @ Google I/O, Extended Cuiabá Thank you — /dhyegofernando bit.ly/devmt-slack