O documento apresenta uma introdução ao Polymer, incluindo o que é Polymer, como funciona e seus benefícios. O Polymer permite criar elementos da web reutilizáveis e distribuíveis através de um framework que utiliza web components e permite estilização, comportamento e animações encapsulados. O documento também discute como aprender e começar a usar o Polymer.

1. Desmistificando o Polymer
@obetomuniz

2. Beto Muniz
@obetomuniz

3. bit.ly/desmistificando-o-polymer

4. helabs.com.br
Desmistificando o Polymer - Beto Muniz @obetomuniz

5. minasdev.org

6. webcomponents.org

8. Mas primeiro...
@obetomuniz

9. @obetomuniz

10. E qual é o cenário do web
components atual?
@obetomuniz

11. bit.ly/are-we-componentized-yet
@obetomuniz

13. Mas já tem
gente usando....
@obetomuniz

14. @obetomuniz

15. @obetomuniz

17. P O L Y F I L L S
@obetomuniz

18. polymer-project.org
@obetomuniz

19. Mas o que é o Polymer?
@obetomuniz

20. @obetomuniz

21. @obetomuniz

22. @obetomuniz

23. @obetomuniz

25. Polymer Layers
@obetomuniz

26. @obetomuniz

27. "Everything as
an element."
@obetomuniz

28. Polymer elements
Elementos não visuais
Estrutura
<core-scaffold>
<core-toolbar>
<core-header-panel>
•••
Animação
<core-animation>
<core-animation-keyframe>
<core-animation-prop>
Data
<core-ajax>
<core-xhr>
<core-localstorage>
Outros
<core-a11y-keys>
<core-splitter>
<core-animation>

29. Polymer elements
Elementos visuais
Paper Elements
<paper-slider>
<paper-tabs>
<paper-spinner>
Core Elements
<core-collapse>
<core-splitter>
<core-icon>
•••

30. "Eliminate boilerplate."
@obetomuniz

31. Criar um elemento
<polymer-element>
@obetomuniz

32. <polymer-element extends="...">
Criar um elemento
de um existente
@obetomuniz

33. Utilizando-se de
Two-way Data-binding
(Mutation Observers)
<input id="input" value="{{foo}}">
@obetomuniz

34. <button on-click="{{handClick}}">
Utilizando-se
event handlers
@obetomuniz

35. hello-world.html
@obetomuniz

36. hello-world.html

37. "Utilize the modern
web platform(+)."
@obetomuniz

38. Lifecycle callbacks
Insertion points
Estilo, Marcação e Comportamento
isolados e distribuíveis
Animations
@obetomuniz
•••

41. E o que o Polymer não é?
@obetomuniz

43. @obetomuniz

44. @obetomuniz

45. Apenas um Polyfill
@obetomuniz

46. O Material Design
@obetomuniz

47. Uma ferramenta do futuro
@obetomuniz

49. E porque usar o Polymer?
Produtivo Declarativo Performático
ComponentizadoAcessívelInteroperável
ReusávelManutenível Extensível

50. Testavél
@obetomuniz

51. 6kb (gzipped)
@obetomuniz

53. E como aprender a usar?
@obetomuniz

54. polymer-project.org
@obetomuniz

55. webcomponents.org
@obetomuniz

56. customelements.io
@obetomuniz

57. @ebidel @zenorocha @addyosmani
@sindresorhus
@rob_dodson @PascalPrecht @eduardolundgren
@passy
•••

58. Vamos componentizar!
@obetomuniz

60. DEMOS
@obetomuniz
DEMO
github.com/obetomuniz/polymer-demos

61. Beto Muniz
@obetomuniz
betomuniz.com
bit.ly/desmistificando-o-polymer
Muito Obrigado!