Desmistificando o Polymer

Fff7258836f20ea66b061b49a51fe8dd?s=47 Beto Muniz
November 09, 2014

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.

Fff7258836f20ea66b061b49a51fe8dd?s=128

Beto Muniz

November 09, 2014
Tweet

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

  7. None
  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

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

  14. @obetomuniz

  15. @obetomuniz

  16. None
  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

  24. None
  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 •••
  39. None
  40. None
  41. E o que o Polymer não é? @obetomuniz

  42. None
  43. @obetomuniz

  44. @obetomuniz

  45. Apenas um Polyfill @obetomuniz

  46. O Material Design @obetomuniz

  47. Uma ferramenta do futuro @obetomuniz

  48. None
  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

  52. None
  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

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

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