$30 off During Our Annual Pro Sale. View details »

WebApps com Web Components

Beto Muniz
January 24, 2015

WebApps com Web Components

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

Beto Muniz

January 24, 2015
Tweet

More Decks by Beto Muniz

Other Decks in Programming

Transcript

  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

  8. None
  9. E o que é o Polymer? @obetomuniz

  10. @obetomuniz

  11. @obetomuniz

  12. @obetomuniz

  13. None
  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ível Performático

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

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

  22. Porque o Polymer? Produtivo Interoperável Declarativo Componentizado Reutilizável Extensível Performático

    Acessível
  23. Testável @obetomuniz

  24. 123kb :( @obetomuniz

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

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

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

  35. None
  36. @obetomuniz

  37. @obetomuniz

  38. Apenas um Polyfill @obetomuniz

  39. O Material Design @obetomuniz

  40. Uma ferramenta do futuro @obetomuniz

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