Abordagem sobre como criar interfaces no desenvolvimento de WebApps com Web Components através do Polymer

1. Mobile WebApps e o Polymer
@obetomuniz

2. Mas primeiro...
@obetomuniz

3. @obetomuniz

4. @obetomuniz
Mobile WebApps + Web Components
Porque isso é bom?

5. @obetomuniz
Mobile WebApps & Web Components
E qual é o “The right way”?

6. Cordova
@obetomuniz

7. Polymer
@obetomuniz

9. E o que é o Polymer?
@obetomuniz

10. @obetomuniz

11. @obetomuniz

12. @obetomuniz

14. @obetomuniz
Mas porque o Polymer?

15. Porque o Polymer?
Produtivo

16. Porque o Polymer?
Produtivo Interoperável

17. Porque o Polymer?
Produtivo Interoperável Declarativo

18. Porque o Polymer?
Produtivo Interoperável Declarativo
Performático

19. Porque o Polymer?
Produtivo Interoperável Declarativo
ExtensívelPerformático

20. Porque o Polymer?
Produtivo Interoperável Declarativo
ExtensívelPerformático Acessível

21. Porque o Polymer?
Produtivo Interoperável Declarativo
Reutilizável
ExtensívelPerformático Acessível

22. Porque o Polymer?
Produtivo Interoperável Declarativo
ComponentizadoReutilizável
ExtensívelPerformático Acessível

23. Testável
@obetomuniz

24. 123kb :(
@obetomuniz

25. 15kb (non-gzipped)
6kb (gzipped)
@obetomuniz

27. Porque o Polymer é bom para
Mobile Web Apps?

28. Elements
@obetomuniz

29. Core Elements
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-drag-drop>

30. Paper Elements
<paper-slider>
<paper-tabs>
<paper-button>
<paper-dialog>
<paper-progress>
<paper-input>
<paper-dropdown>
•••

31. Flexbox
@obetomuniz

32. Mobile First
@obetomuniz

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

36. @obetomuniz

37. @obetomuniz

38. Apenas um Polyfill
@obetomuniz

39. O Material Design
@obetomuniz

40. Uma ferramenta do futuro
@obetomuniz

42. @obetomuniz
Ok!
Alguém já está usando
esse workflow?

43. @obetomuniz

44. E como aprender?
@obetomuniz

45. polymer-project.org
@obetomuniz

46. webcomponents.org
@obetomuniz

47. customelements.io
@obetomuniz

48. @obetomuniz
betomuniz.com/blog

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

50. Vamos componentizar!
@obetomuniz

51. Beto Muniz
@obetomuniz
betomuniz.com
bit.ly/mobileapps-e-o-polymer
Muito Obrigado!