Web Components
Vamos começar pelo que é Web Components, ele é um conjunto de HTML, CSS e JavaScript que funcionam independentes e individualmente.
São um grupo de especificações (W3C, a maioria ainda não concluídas, porém estão muito bem avançadas), onde estas tecnologias fazem (ou farão) parte do código do browser.
Specs
1 - Custom Elements
Permite o autor a criar seus próprios elementos HTML customizados, com nomes e scripts customizados.
Elementos customizados ainda são elementos, eles podem ser criados, usados, manipulados como qualquer outro elemento padrão.
Tem a finalidade de facilitar e simplificar, evitando o exagero de macarrões de tags.
2 - Shadow DOM
É onde uma parte do código do seu elemento é encapsulada e escondida pelo browser, ou seja, não é visível no código normal do DOM, mas que monta todo seu componente “por baixo dos panos”.
Permite criar trechos de código independentes e isolados, desse jeito não ocorre o vazamento de estilos e comportamentos para toda a página.
3 - HTML Templates
Definem pedaços de código (DOM) que são totalmente inertes à página até que seu Javascript os ative.
4 - HTML Imports
Definem quais elementos customizados são empacotados e lidos como um recurso.
Permite que seja incluído e reutilizado um documento HTML em outro.
Obs: DOM ou Document Object Model, é o nome da árvore de tags de uma página Web.
Bibliotecas
Essas são as 3 maiores bibliotecas hoje, que estendem e trabalham com Web Components.
X-TAGS da Mozilla - é uma biblioteca Javascript pequenininha, criada e mantida pela Mozilla, que traz as capacidades do Custom elements do Web Components para todos os browsers modernos.
Polymer da Google - é um novo tipo de biblioteca para a web, construída em cima de Web Components, e projetado para alavancar a plataforma web evoluindo em navegadores modernos.
Bosonic - é um conjunto de ferramentas que permitem que você construa Web Components como a especificação descreve atualmente, e suporte a navegadores não tão modernos como IE9.
Polyfills
No escopo de desenvolvimento web, o termo Polyfill quer dizer um código externo ao Browser para implementar uma especificação que o Browser não possui.
Para Web Components temos o excelente projeto WEBCOMPONENTS.ORG, que realiza a implementação das especificações para diversos browsers atuais ou não.
Repositório de componentes
Segue alguns repositórios de Web Components (o que infelizmente não é somente 1).
Custom Elements - Explore the world of Web Components.
Component.Kitchen - Web components give HTML the features you need.
Web Components já está pronto para usar ?
Sim, mesmo que ainda não esteja com as Specs fechadas, e com o desenvolvimento dos Browsers completos, existem muitas ferramentas já muito bem evoluídas, e em desenvolvimento acelerado.
O Polymer do Google por exemplo, com a versão 1.0 pronto para a Produção, já está sendo utilizada em larga escala pelo Google, implementando em diversos de seus projetos.
Excelentes artigos relacionados:
Nenhum comentário:
Postar um comentário