O Web Components é uma especificação do W3C para permitir que os desenvolvedores web criem widgets com muita riqueza visual e interatividade, juntamente com a facilidade da composição. Até que a especificação tenha suporte apropriado pelos navegadores, os desenvolvedores podem usar a biblioteca Brick que fornece novas tags customizadas do HTML para abstrair os padrões comuns da interface de usuário.
O Brick é baseado na biblioteca X-Tag da Mozilla. A X-Tag tem sido chamada de biblioteca "pollyfill", que se refere a um pedação de código ou plugin de uma tecnologia que o desenvolvedor espera que o navegador forneça nativamente. Para executar código com base em qualquer tag do Brick é necessário aguardar até que o evento "DOMComponentsLoaded" da biblioteca X-Tag tenha sido carregado no window.onload:
document.addEventListener('DOMComponentsLoaded', function(){
// código que executa aqui...
});
Até o momento, o Brick consiste de treze tags ("bricks") diferentes, a maioria é completamente independente uma das outras e podem ser baixadas separadamente em vez de um único pacote:
- Appbar (barra de navegação)
- Calendar (calendário aberto)
- Datepicker (calendário popup)
- Deck (similar a uma galeria de imagens ou apresentação de slides)
- Flipbox (trocar dois lados de um conteúdo, como uma carta de baralho)
- Iconbutton (botão com ícone)
- Layout (utilizado para preencher toda a área do conteúdo do componente pai, permitindo fixar cabeçalho e rodapé)
- Slidebox (apresentação de slides)
- Slider (barra de deslizar que permite selecionar um valor dentro de um range de dois números)
- Tabbar (barra de abas)
- Toggle (mescla de radiobutton com checkbox)
- Togglegroup (agrupar vários toogle)
- Tooltip (apresenta uma mensagem informativa quando um componente for clicado)
A figura a seguir mostra como o componente calendário do brick se parece:
<x-calendar></x-calendar>
O Google está confiando bastante no Web Components e também está trabalhando em uma biblioteca "polyfill" chamada Polymer, que utiliza a infraestrutura do navegador para executar futuras tecnologias como Sub-Árvore de elementos DOM (Shadow DOM), Elementos Customizados (Custom Elements) e Telas Guiadas por Modelo (Model Driven Views).
Vale mencionar que, apesar de o Web Components ter tido bastante destaque durante o ano passado a especificação está caminhando rapidamente, mas ainda há algumas áreas de incerteza.
Há algumas semanas atrás, Dimitri Glazkov (do Google) propôs na lista de discussão do W3C a remoção do elemento <element> da especificação. O consenso nessa discussão foi que o propósito da sintaxe do <element> não está bom o suficiente e as bibliotecas não deveriam utilizar esse elemento até que seja padronizado, como Brian Kardell, engenheiro de front-end do grupo educacional Apollo Group mencionou:
Projetos como X-Tags e Polymer, e até mesmo os projetos Ember e Angular, têm ajudado a responder essas questões oferecendo respostas potencialmente competentes -- não há necessidade de pressa para padronizar em alto nível esses pontos.
Mais informações sobre o Brick podem ser encontradas no blog do Mozilla Hacks e o código fonte está disponível no GitHub.