-Smart Writers & Smart Content & Smart Readers-

D3 PR0GR4M4D0R P4R4 L31T0R

em Coluna/Tecnologia e Ciência por

luccasNãooooo! A gente não fala somente de bits, softwares, redes, algoritmos, objetos, base de dados, linux e engenharia reversa. Falamos também de Revolução.

Uma revolução em que podemos compor, revestir e reutilizar as coisas, em qualquer lugar e diversas vezes. Nossa única preocupação é a união de pequenas partes para compor uma maior, seguindo especificações fundamentais que combinadas tornam-se super importantes.

Uma revolução não atual, que está em vanguarda e com pouco suporte, mas que em um futuro muito próximo, poderá ter um papel muito importante. Claro, como tudo, ainda existem alguns aspectos que precisam ser tratados, mas isso veremos mais adiante.

Sim, estou falando de Web Components!

Ao longo dos últimos dois anos houve um buzz enorme em torno dos Web Components. Muitos falavam que ele iria resolver todos os problemas e outros que seria uma nova forma de escrever a web.

Este tema já foi bastante debatido, alguns idolatrando e outros não. Aqui vou mostrar uma pequena introdução para você decidir se valerá a pena ou não implementa-los em seus projetos. Vamos à uma breve análise.

O que são os Web Components?

É um conjunto de normas definidos pela W3C que permite a criação de componentes reutilizáveis em documentos e aplicações web, permitindo o encapsulamento e interoperabilidade de elementos HTML.

Este termo é usado para uma coleção de tecnologias que permitem que os desenvolvedores descrevam, de modo eficiente, as implementações dos elementos HTML que já existem. Talvez você já a conheça, mas deixarei resumidamente aqui explicadas. São elas:

1. Custom Elements: Sim, existe uma forma de gerar elementos personalizados diferentes dos canônicos p, button, div e outros.

2. Shadow DOM: Permite criar trechos de nós de elementos DOM que são independentes e isolados entre si, onde o estilo de um trecho não interfere no outro.

3. Templates: definem pedações de código que são inertes à página, que pode ser retirado e reultilizado diversas vezes.

4. HTML Imports: depois de ter um trecho de DOM isolado, com estilos e comportamentos isolados, precisamos empacotar tudo isso. O Imports acomoda um único ponto de interação para que os pacotes sejam carregados.

Cada uma dessas partes são individualmente úteis, mas se tornam realmente importantes quando combinadas. Assim você consegue fazer um componente totalmente funcional, com o visual e o código customizados.

O que devo usar?

Polymer: biblioteca da Google que facilita a criação de Web Components tornando seu código mais limpo e menos custoso para mante-lo.

X-Tag: biblioteca Javascript pequena da Microsoft o qual facilita a criação de componentes customizados utilizando um conjunto de polyfills.

Existem outros como Bosonic e SkateJS o que ficará ao seus cuidados o qual utilizar.

Embora haja uma certa confusão entre Web Components e Polymer, a biblioteca Polymer é uma estrutura que é baseada em tecnologias de Web Components. Você poderá fazer e utilizar componentes web sem o Polymer, caso o deseje.

Por que devo usar?

Se você usa widgets e plugins que interferem em sua aplicação, os web components tentam resolver esse problema.

Eles não fazem tudo, mas dão aos desenvolvedores um modo padrão de encapsular, proteger e empacotar esses conceitos evitando qualquer tipo vazamento para a sua aplicação.

Testes

Muitas promessas interessantes foram feitas sobre os Web Components. Nesse tópico encaramos um das verdades mais duras, a falta de facilidade de teste.

Os teste de unidade automatizados via Javascript e Karma são, ao meu ver, a melhor maneira de testar Web Components no momento. Certamente, surgirão ferramentas para preencher as lacunas, mas esse pode ser seu maior ponto problemático neste instante.

Empacotando e publicando

Vulcanize: é a primeira solução importante para empacotar Web Components para a implantação: ele oferece um modo de gerenciar os elementos customizados escritos com Polymer em arquivos HTML externos.

Ele é uma ferramenta escrita em Javascript em cima do NodeJS. Sendo assim ele poderá ser incorporada em ferramentas de build como gulp/grunt.

Bower: depois de empacotado é hora de torná-lo público. Bower e Github deixarão as coisas mais fáceis, pois a única coisa que precisamos é escolher um nome e vinculá-lo ao nosso local público Git.

Quem já está usando?

Ember e Angular 2 já estão usando os Web Components em sua arquitetura.

Mas não sou desenvolvedor, o que ganharei com isso tudo?

Nada. Você que somente vê e interage na página web, nada. Será totalmente idêntica. Você se beneficiará muito pouco desta tecnologia.

O usuário final desta tecnologia não é você e sim o desenvolvedor front-end, que ao invés de procurar algum widget, plugin jQuery irá buscar um componente web.

Suporte

Zeno Rocha, Addy Osmani e diversos outros resolveram centralizar as informações relacionadas a Web Components em WebComponents.org. Um local confiável para demonstrar as práticas e especificações atualizadas, sendo um grande benefício a comunidade.

E sim, existem repositórios de componentes públicos para isso, e creio que a principal delas seja o Custom Elements, que abriga uma gama de implementações de components customizados pela comunidade, contando hoje com cerca de 2270 repositórios e 914 contribuidores.

E o browser, suporta?

A especificação está muito boa. Essa tabela mostra quais navegadores implementam Web Components e como está o andamento entre eles.

Palavras Finais

Web Components geram muitas perguntas e muitos debates ainda, mas com muita rapidez esse campo está sendo moldado.

“Desenvolvendo Web Components” da editora Novatec é um livro obrigatório para qualquer desenvolvedor front-end que deseja entrar e entender esse novo universo cheios de novos padrões.

Essa foi uma breve análise sobre essa revolução, o qual você poderá optar em fazer parte dela ou não.

Colaboração de Jean Carlo Nascimento (Suissa) e Zeno Rocha, o qual gostaria de agradecer e muito o incentivo.

Por Luccas Barbosa,  front-end engineer brasileiro, coloborador web developer da Mozilla, viciado por café e código fonte.

loading...

Deixe uma resposta

Seu endereço de email não será publicado.

*

Últimos de Coluna

O sinal

Da janela Tom via o Corcovado e o Redentor. Eu, menos sortudo,

Você me traiu

Como pôde? Diga, como pôde fazer isso comigo? Vinte e um anos

A Terra é cinza

– A Terra é verde! Revelou ao mundo Yuri Gagarin, há quase
Voltar p/ Capa