O Polymer é uma porta de entrada para o futuro incrível dos componentes da Web. Queremos facilitar o consumo e a criação de elementos personalizados. No ano passado, a equipe trabalhou muito em um conjunto de polyfills para as especificações em evolução. Além disso, criamos uma biblioteca conveniente para facilitar a criação de componentes da Web. Por fim, estamos criando um conjunto de elementos de IU e utilitários para reutilizar nos seus apps. No Chrome Dev Summit de 2013, mergulhei nas diferentes partes do Polymer e na filosofia por trás do mantra "Tudo é um elemento".
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html
"Tudo é um elemento" (de <select> a elementos personalizados)
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html#6
Criar páginas da Web na década de 1990 era limitado, mas poderoso. Tínhamos apenas alguns elementos à nossa disposição. A parte mais legal? Tudo era declarativo. Foi muito simples criar uma página, adicionar controles de formulário e criar um "app" sem precisar escrever muito JavaScript.
Considere o elemento <select>. Há uma tonelada de funcionalidades integradas ao elemento, basta declarar:
- Personalizável com atributos HTML
- Renderiza filhos (por exemplo,
<option>) com uma interface padrão, mas que pode ser configurada por atributos. - Útil em outros contextos, como
<form> - Tem uma API DOM: propriedades e métodos
- Aciona eventos quando coisas interessantes acontecem
Os Web Components oferecem as ferramentas para voltar a esse período de ouro do desenvolvimento da Web. Um em que podemos criar novos elementos, reminiscentes de <select>, mas projetados para os casos de uso de 2014. Por exemplo, se o AJAX fosse inventado hoje, provavelmente seria uma tag HTML (exemplo):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Ou elementos responsivos que vinculam dados a um atributo queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Essa é exatamente a abordagem que estamos adotando no Polymer. Em vez de criar apps da Web monolíticos baseados em JavaScript, vamos criar elementos reutilizáveis. Com o tempo, um app inteiro cresce com a composição de elementos menores. Um app inteiro pode ser um elemento:
<my-app></my-app>
Como criar componentes da Web com o Polymer
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html#37
O Polymer contém várias conveniências para criar aplicativos baseados em componentes da Web:
- Registro de elemento declarativo:
<polymer-element> - Herança declarativa:
<polymer-element extends="..."> - Vinculação de dados bidirecional declarativa:
<input id="input" value=""> - Manipuladores de eventos declarativos:
<button on-click="" - Propriedades publicadas:
xFoo.bar = 5<-><x-foo bar="5"> - Observação de propriedade:
barChanged: function() {...} - PointerEvents / PointerGestures por padrão
A moral da história é que escrever elementos Polymer é uma questão de ser declarativo. Quanto menos código você precisar escrever, melhor ;)
Componentes da Web: o futuro do desenvolvimento da Web
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html#26
Seria negligente se eu não mencionasse os padrões por trás dos componentes da Web. Afinal, o Polymer é baseado nessas APIs fundamentais em evolução.
Estamos no início de uma fase muito empolgante no desenvolvimento da Web. Ao contrário de outros novos recursos adicionados à plataforma da Web, as APIs que compõem os componentes da Web não são brilhantes nem voltados ao usuário. Eles são usados apenas para produtividade dos desenvolvedores. Cada uma das quatro APIs principais é útil por si só, mas, juntas, elas podem fazer coisas mágicas.
- Shadow DOM: encapsulamento de estilo e DOM
- Elementos personalizados: defina novos elementos HTML. Forneça uma API com propriedades e métodos.
- Importações de HTML é o modelo de distribuição de um pacote de CSS, JS e HTML.
- Modelos: modelos DOM adequados para definir partes inertes de marcação a serem marcadas posteriormente.
Para saber mais sobre os conceitos básicos das APIs, acesse webcomponents.org.