WebApps com Web Components

465 visualizações

Publicada em

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

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

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

Nenhuma nota no slide

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!

×