A Polymer é uma porta de entrada para o incrível futuro do Web Components. Queremos facilitar o consumo e a criação de elementos personalizados. No ano passado, a equipe trabalhou duro em um conjunto de polyfills para as especificações em constante 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 de interface e utilitário para reutilizar nos apps. Na Conferência de Desenvolvedores do Chrome 2013, mergulhei nas diferentes partes do Polymer e na filosofia por trás do nosso 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 nos anos 90 era limitante, mas eficiente. Tínhamos apenas alguns elementos à nossa disposição. A parte poderosa? tudo foi declarativo. Foi incrivelmente simples criar uma página, adicionar controles de formulário e criar um "aplicativo" sem escrever código de JavaScript.
Use o modesto elemento <select>. Há muitas funcionalidades integradas ao elemento. Basta declará-lo:
- Personalizável por atributos HTML
- Renderiza filhos (por exemplo,
<option>) com uma IU padrão, mas configurável por meio de atributos. - Útil em outros contextos, como
<form> - Tem uma API DOM: propriedades e métodos
- Dispara eventos quando coisas interessantes acontecem
Web Components fornece as ferramentas para voltar a este auge do desenvolvimento web. Uma em que podemos criar novos elementos, que lembram o <select>, mas projetados para os casos de uso de 2014. Por exemplo, se o AJAX foi inventado hoje, ele 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 são vinculados 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 só começa a compor elementos menores juntos. E o app inteiro pode ser um elemento:
<my-app></my-app>
Como criar componentes da Web com molho especial da Polymer
Apresentações: http://html5-demos.appspot.com/static/cds2013/index.html#37
O Polymer tem 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=""> - 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, para escrever elementos no Polymer, é preciso ser declarativo. Quanto menos código você precisar escrever, melhor ;)
Web Components: o futuro do desenvolvimento 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 se baseia nessas APIs fundamentais em evolução.
Estamos à beira de um momento muito empolgante no desenvolvimento da Web. Diferentemente de outros novos recursos que estão sendo adicionados à plataforma da Web, as APIs que compõem os Web Components não são brilhantes nem voltadas para o usuário. Elas têm como foco a produtividade do desenvolvedor. Cada uma das quatro APIs principais já é útil sozinha, mas, juntas, coisas incríveis acontecem!
- Shadow DOM: encapsulamento de estilo e DOM
- Elementos personalizados: defina novos elementos HTML. Fornecer a eles uma API com propriedades e métodos.
- Importações de HTML é o modelo de distribuição para um pacote de CSS, JS e HTML.
- Modelos: os modelos DOM adequados para definir blocos inertes de marcação a serem apagados posteriormente
Se você quiser saber mais sobre os fundamentos das APIs, acesse webcomponents.org.