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 último ano, 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 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, abordei as diferentes partes do Polymer e a filosofia por trás do nosso mantra "Tudo é um elemento".
Slides: http://html5-demos.appspot.com/static/cds2013/index.html
"Tudo é um elemento" (de <select> a elementos personalizados)
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#6
Criar páginas da Web nos anos 1990 era limitado, mas poderoso. Tínhamos apenas alguns elementos à nossa disposição. A parte mais importante? Tudo era declarativo. Foi muito simples criar uma página, adicionar controles de formulário e criar um "app" sem escrever um monte de JavaScript.
Veja o elemento <select>. Há uma série de funcionalidades integradas ao elemento, basta declará-lo:
- Personalizável com 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
- Aciona eventos quando algo interessante acontece
Os componentes da Web fornecem as ferramentas para voltar a esse auge do desenvolvimento da Web. Um em que podemos criar novos elementos, que lembram o <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 é criado com base na composição de elementos menores. Até mesmo um app inteiro pode ser um elemento:
<my-app></my-app>
Como criar componentes da Web com o toque especial do Polymer
Slides: 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 da propriedade:
barChanged: function() {...} - PointerEvents / PointerGestures por padrão
A moral da história é que escrever elementos do Polymer é ser declarativo. Quanto menos código você precisar escrever, melhor ;)
Web Components: o futuro do desenvolvimento web
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#26
Eu não poderia deixar de mencionar 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 era muito empolgante no desenvolvimento web. Ao contrário de outros recursos novos que estão sendo adicionados à plataforma da Web, as APIs que compõem os componentes da Web não são chamativas nem voltadas ao usuário. Eles servem 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 de DOM
- Elementos personalizados: definem novos elementos HTML. Forneça uma API com propriedades e métodos.
- HTML Imports é o modelo de distribuição para um pacote de CSS, JS e HTML.
- Modelos: modelos de DOM adequados para definir blocos inertes de marcação que serão eliminados mais tarde.
Para saber mais sobre os conceitos básicos das APIs, acesse webcomponents.org.