O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

WebApps com Web Components

514 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

WebApps com Web Components

  1. 1. Mobile WebApps e o Polymer @obetomuniz
  2. 2. Mas primeiro... @obetomuniz
  3. 3. @obetomuniz
  4. 4. @obetomuniz Mobile WebApps + Web Components Porque isso é bom?
  5. 5. @obetomuniz Mobile WebApps & Web Components E qual é o “The right way”?
  6. 6. Cordova @obetomuniz
  7. 7. Polymer @obetomuniz
  8. 8. E o que é o Polymer? @obetomuniz
  9. 9. @obetomuniz
  10. 10. @obetomuniz
  11. 11. @obetomuniz
  12. 12. @obetomuniz Mas porque o Polymer?
  13. 13. Porque o Polymer? Produtivo
  14. 14. Porque o Polymer? Produtivo Interoperável
  15. 15. Porque o Polymer? Produtivo Interoperável Declarativo
  16. 16. Porque o Polymer? Produtivo Interoperável Declarativo Performático
  17. 17. Porque o Polymer? Produtivo Interoperável Declarativo ExtensívelPerformático
  18. 18. Porque o Polymer? Produtivo Interoperável Declarativo ExtensívelPerformático Acessível
  19. 19. Porque o Polymer? Produtivo Interoperável Declarativo Reutilizável ExtensívelPerformático Acessível
  20. 20. Porque o Polymer? Produtivo Interoperável Declarativo ComponentizadoReutilizável ExtensívelPerformático Acessível
  21. 21. Testável @obetomuniz
  22. 22. 123kb :( @obetomuniz
  23. 23. 15kb (non-gzipped) 6kb (gzipped) @obetomuniz
  24. 24. Porque o Polymer é bom para Mobile Web Apps?
  25. 25. Elements @obetomuniz
  26. 26. 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>
  27. 27. Paper Elements <paper-slider> <paper-tabs> <paper-button> <paper-dialog> <paper-progress> <paper-input> <paper-dropdown> •••
  28. 28. Flexbox @obetomuniz
  29. 29. Mobile First @obetomuniz
  30. 30. E o que o Polymer não é? @obetomuniz
  31. 31. @obetomuniz
  32. 32. @obetomuniz
  33. 33. Apenas um Polyfill @obetomuniz
  34. 34. O Material Design @obetomuniz
  35. 35. Uma ferramenta do futuro @obetomuniz
  36. 36. @obetomuniz Ok! Alguém já está usando esse workflow?
  37. 37. @obetomuniz
  38. 38. E como aprender? @obetomuniz
  39. 39. polymer-project.org @obetomuniz
  40. 40. webcomponents.org @obetomuniz
  41. 41. customelements.io @obetomuniz
  42. 42. @obetomuniz betomuniz.com/blog
  43. 43. @ebidel @zenorocha @addyosmani @sindresorhus @rob_dodson @PascalPrecht @eduardolundgren @passy •••
  44. 44. Vamos componentizar! @obetomuniz
  45. 45. Beto Muniz @obetomuniz betomuniz.com bit.ly/mobileapps-e-o-polymer Muito Obrigado!

×