Desmistificando o Polymer

468 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
468
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desmistificando o Polymer

  1. 1. Desmistificando o Polymer @obetomuniz
  2. 2. Beto Muniz @obetomuniz
  3. 3. bit.ly/desmistificando-o-polymer
  4. 4. helabs.com.br Desmistificando o Polymer - Beto Muniz @obetomuniz
  5. 5. minasdev.org
  6. 6. webcomponents.org
  7. 7. Mas primeiro... @obetomuniz
  8. 8. @obetomuniz
  9. 9. E qual é o cenário do web components atual? @obetomuniz
  10. 10. bit.ly/are-we-componentized-yet @obetomuniz
  11. 11. Mas já tem gente usando.... @obetomuniz
  12. 12. @obetomuniz
  13. 13. @obetomuniz
  14. 14. P O L Y F I L L S @obetomuniz
  15. 15. polymer-project.org @obetomuniz
  16. 16. Mas o que é o Polymer? @obetomuniz
  17. 17. @obetomuniz
  18. 18. @obetomuniz
  19. 19. @obetomuniz
  20. 20. @obetomuniz
  21. 21. Polymer Layers @obetomuniz
  22. 22. @obetomuniz
  23. 23. "Everything as an element." @obetomuniz
  24. 24. 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>
  25. 25. Polymer elements Elementos visuais Paper Elements <paper-slider> <paper-tabs> <paper-spinner> Core Elements <core-collapse> <core-splitter> <core-icon> •••
  26. 26. "Eliminate boilerplate." @obetomuniz
  27. 27. Criar um elemento <polymer-element> @obetomuniz
  28. 28. <polymer-element extends="..."> Criar um elemento de um existente @obetomuniz
  29. 29. Utilizando-se de Two-way Data-binding (Mutation Observers) <input id="input" value="{{foo}}"> @obetomuniz
  30. 30. <button on-click="{{handClick}}"> Utilizando-se event handlers @obetomuniz
  31. 31. hello-world.html @obetomuniz
  32. 32. hello-world.html
  33. 33. "Utilize the modern web platform(+)." @obetomuniz
  34. 34. Lifecycle callbacks Insertion points Estilo, Marcação e Comportamento isolados e distribuíveis Animations @obetomuniz •••
  35. 35. E o que o Polymer não é? @obetomuniz
  36. 36. @obetomuniz
  37. 37. @obetomuniz
  38. 38. Apenas um Polyfill @obetomuniz
  39. 39. O Material Design @obetomuniz
  40. 40. Uma ferramenta do futuro @obetomuniz
  41. 41. E porque usar o Polymer? Produtivo Declarativo Performático ComponentizadoAcessívelInteroperável ReusávelManutenível Extensível
  42. 42. Testavél @obetomuniz
  43. 43. 6kb (gzipped) @obetomuniz
  44. 44. E como aprender a usar? @obetomuniz
  45. 45. polymer-project.org @obetomuniz
  46. 46. webcomponents.org @obetomuniz
  47. 47. customelements.io @obetomuniz
  48. 48. @ebidel @zenorocha @addyosmani @sindresorhus @rob_dodson @PascalPrecht @eduardolundgren @passy •••
  49. 49. Vamos componentizar! @obetomuniz
  50. 50. DEMOS @obetomuniz DEMO github.com/obetomuniz/polymer-demos
  51. 51. Beto Muniz @obetomuniz betomuniz.com bit.ly/desmistificando-o-polymer Muito Obrigado!

×