Desmistificando o Polymer
@obetomuniz
Beto Muniz
@obetomuniz
bit.ly/desmistificando-o-polymer
helabs.com.br
Desmistificando o Polymer - Beto Muniz @obetomuniz
minasdev.org
webcomponents.org
Mas primeiro...
@obetomuniz
@obetomuniz
E qual é o cenário do web
components atual?
@obetomuniz
bit.ly/are-we-componentized-yet
@obetomuniz
Mas já tem
gente usando....
@obetomuniz
@obetomuniz
@obetomuniz
P O L Y F I L L S
@obetomuniz
polymer-project.org
@obetomuniz
Mas o que é o Polymer?
@obetomuniz
@obetomuniz
@obetomuniz
@obetomuniz
@obetomuniz
Polymer Layers
@obetomuniz
@obetomuniz
"Everything as
an element."
@obetomuniz
Polymer elements
Elementos não visuais
Estrutura
<core-scaffold>
<core-toolbar>
<core-header-panel>
•••
Animação
<core-ani...
Polymer elements
Elementos visuais
Paper Elements
<paper-slider>
<paper-tabs>
<paper-spinner>
Core Elements
<core-collapse...
"Eliminate boilerplate."
@obetomuniz
Criar um elemento
<polymer-element>
@obetomuniz
<polymer-element extends="...">
Criar um elemento
de um existente
@obetomuniz
Utilizando-se de
Two-way Data-binding
(Mutation Observers)
<input id="input" value="{{foo}}">
@obetomuniz
<button on-click="{{handClick}}">
Utilizando-se
event handlers
@obetomuniz
hello-world.html
@obetomuniz
hello-world.html
"Utilize the modern
web platform(+)."
@obetomuniz
Lifecycle callbacks
Insertion points
Estilo, Marcação e Comportamento
isolados e distribuíveis
Animations
@obetomuniz
•••
E o que o Polymer não é?
@obetomuniz
@obetomuniz
@obetomuniz
Apenas um Polyfill
@obetomuniz
O Material Design
@obetomuniz
Uma ferramenta do futuro
@obetomuniz
E porque usar o Polymer?
Produtivo Declarativo Performático
ComponentizadoAcessívelInteroperável
ReusávelManutenível Exten...
Testavél
@obetomuniz
6kb (gzipped)
@obetomuniz
E como aprender a usar?
@obetomuniz
polymer-project.org
@obetomuniz
webcomponents.org
@obetomuniz
customelements.io
@obetomuniz
@ebidel @zenorocha @addyosmani
@sindresorhus
@rob_dodson @PascalPrecht @eduardolundgren
@passy
•••
Vamos componentizar!
@obetomuniz
DEMOS
@obetomuniz
DEMO
github.com/obetomuniz/polymer-demos
Beto Muniz
@obetomuniz
betomuniz.com
bit.ly/desmistificando-o-polymer
Muito Obrigado!
Desmistificando o Polymer
Desmistificando o Polymer
Desmistificando o Polymer
Desmistificando o Polymer
Desmistificando o Polymer
Desmistificando o Polymer
Desmistificando o Polymer
Desmistificando o Polymer
Desmistificando o Polymer
Desmistificando o Polymer
Próximos SlideShares
Carregando em…5
×

Desmistificando o Polymer

446 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
446
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
4
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!

×