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

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