desmistificando o polymer

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 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!