Desmistificando o Polymer

Nesta palestra é apresentado o que é o Polymer, seus principais conceitos, como ele chega para acelerarmos a implementação de componentes ricos através de padrões estabelecidos, diferenciais com frameworks e bibliotecas existentes, como AngularJS, jQuery entre outros. Sem dúvidas será uma palestra bem motivadora para quem deseja começar de uma vez por todas a trabalhar com componentização web da forma certa ou mesmo conhecer todo o poder do conceito.

Transcript

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 Componentizado Acessível Interoperável Reusável Manutení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!