desmistificando o polymer
TRANSCRIPT
Desmistificando o Polymer
@obetomuniz
Beto Muniz@obetomuniz
bit.ly/desmistificando-o-polymer
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
Mas o que é o Polymer?
@obetomuniz
@obetomuniz
@obetomuniz
@obetomuniz
@obetomuniz
Polymer Layers
@obetomuniz
@obetomuniz
"Everything as an element."
@obetomuniz
Polymer elementsElementos 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>
Polymer elementsElementos visuais
Paper Elements <paper-slider> <paper-tabs> <paper-spinner>
Core Elements <core-collapse> <core-splitter> <core-icon>
•••
"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 Extensível
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
DEMOgithub.com/obetomuniz/polymer-demos
Beto Muniz
@obetomuniz
betomuniz.com
bit.ly/desmistificando-o-polymer
Muito Obrigado!