This document discusses Web Components and the Polymer library. It begins with an introduction to Web Components and their benefits like reusability. It then discusses what Polymer is and why it is useful for building Web Components, including its templating features. The remainder covers Polymer 2.0 updates, tools like the Polymer CLI, learning resources, and a question/answer section.

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