O Polymer é uma porta de entrada para o futuro incrível dos Web Components. 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 de simplificação conveniente para facilitar a criação de componentes da Web. Por fim, estamos criando um conjunto de elementos utilitários e de interface para reutilizar nos seus apps. No Chrome Dev Summit 2013, mergulhei de cabeça nas diferentes partes do Polymer e na filosofia por trás do nosso "Everything is an element" mantra
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html
"Tudo é um elemento" (de <select> para elementos personalizados)
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html#6
Criar páginas da Web nos anos 90 era limitante, mas poderoso. Tínhamos apenas alguns elementos à nossa disposição. A parte importante?...tudo era declarativo. Foi incrivelmente simples criar uma página, adicionar controles de formulários e criar um "aplicativo" sem escrever porções de JavaScript.
Considere o humilde elemento <select>. O elemento tem muitas funcionalidades integradas. Basta fazer a declaração a seguir:
- Personalizável por meio de atributos HTML
- Renderiza filhos (por exemplo,
<option>) com uma interface padrão, mas configurável por atributos. - Útil em outros contextos, como
<form> - Tem uma API DOM: propriedades e métodos
- Dispara eventos quando coisas interessantes acontecem
**Os Web Components fornecem as ferramentas para voltar a este auge do desenvolvimento da web. Um em que podemos criar novos elementos, lembrando <select>, mas projetados para os casos de uso de 2014. Por exemplo, se o AJAX foi 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 os dados a um atributo queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…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 a partir da composição de elementos menores. E todo o app pode ser um elemento:
<my-app></my-app>
Criar componentes da Web com a calda especial do Polymer
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html#37
A plataforma Polymer oferece várias conveniências para a criação de 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="{{foo}}"> - Manipuladores de eventos declarativos:
<button on-click="{{handleClick}}"> - Propriedades publicadas:
xFoo.bar = 5<-><x-foo bar="5"> - Observação da propriedade:
barChanged: function() {...} - PointerEvents / PointerGestures por padrão
A moral da história é que escrever elementos do Polymer é um processo declarativo. Quanto menos código você tiver que escrever, melhor ;)
Web Components: o futuro do desenvolvimento na web
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html#26
Eu seria negligenciado se não mencionasse os padrões por trás do Web Components. Afinal, o Polymer é baseado nessas APIs básicas em evolução.
Estamos prestes a em um momento muito empolgante no desenvolvimento da web. Ao contrário de outros novos recursos que estão sendo adicionados à plataforma da Web, as APIs que compõem os Web Components não são muito brilhantes nem voltadas para o usuário. Eles são apenas para a produtividade do desenvolvedor. Cada uma das quatro APIs principais é útil por si só, mas, juntas, coisas mágicas acontecem!
- Shadow DOM: estilo e encapsulamento do DOM
- Elementos personalizados: define novos elementos HTML. Dê a eles uma API com propriedades e métodos.
- Importação de HTML é o modelo de distribuição para um pacote de CSS, JS e HTML.
- Modelos: modelos DOM adequados para definir blocos de marcação inertes a serem estampados mais tarde
Se você quiser saber mais sobre os fundamentos das APIs, confira ebidel.github.com/webcomponents.