Atualmente, construir uma aplicação web já se tornou uma tarefa tão complexa quanto construir qualquer outro tipo de software. Dada a gama de ferramentas, testes, bibliotecas e frameworks envolvidos, tanto o desenvolvimento quanto a manutenção dessas aplicações se tornaram bastante penosos.
Para lidar com tamanha complexidade é essencial encontrar maneiras de melhorar o processo de desenvolvimento, a fim de alcançar maior eficiência. Fazendo um paralelo com o desenvolvimento desktop, a prática de componentizar e reutilizar o código já existente tornou-se crucial para auxiliar o desenvolvimento web.
A fim de alcançar a componentização e a reutilização de código, surgiram ao longo dos anos diversas bibliotecas e frameworks para auxiliar o trabalho dos desenvolvedores web, tais como Bootstrap, jQuery UI, entre outros. Todavia, devido à falta de suporte da plataforma web, nem sempre é possível reutilizar componentes de diferentes frameworks e bibliotecas em uma mesma aplicação.  Muitas vezes, ao misturarmos componentes de terceiros, iremos nos deparar com problemas de compatibilidade, encapsulamento e aumento da complexidade do código como um todo.
<h3 style="text-align: justify;">Mas então, como alcançar as vantagens da componentização no ambiente web?</h3>
Se voltarmos aos primórdios do desenvolvimento web, veremos que, basicamente, as aplicações eram compostas de um conjunto reduzido de  tags: &lt;select&gt;; &lt;input&gt;; &lt;form&gt;; etc. Além de encapsulamento, tais tags proviam uma interface padrão e uma estrutura semântica mais clara para o documento.
A ideia das especificações de Web Components é permitir aos desenvolvedores estender a linguagem HTML para preencher os gaps de funcionalidade criando suas próprias tags, ou seus próprios componentes.
A definição de Web Components é uma definição macro que engloba quatro especificações do W3C (World Wide Web Consortium):
<ol style="text-align: justify;">
<li>Custom Elements: define as interfaces a serem utilizadas para definir tags HTML customizadas;</li>
<li>HTML Templates: permite a definição de blocos de código (HTML) que pode ser injetado na página dinâmica;</li>
<li>Shadow DOM: provê encapsulamento e isolamento de escopo tanto para marcação quanto para estilo através da criação de uma sub-árvore do DOM;</li>
<li>HTML Imports: Provê uma forma de reutilizar trechos de código HTML através da importação de um documento HTML em outro documento HTML.</li>
</ol>
Por meio dos Web Components é possível alcançar componentização, encapsulamento e reutilização para web sem que a lógica e as definições de estilo dos componentes interfiram entre si ou na lógica da aplicação.
<h3 style="text-align: justify;">As vantagens do Polymer</h3>
De forma a incentivar a adoção desta nova tecnologia, a Google desenvolveu a biblioteca Polymer, que procura facilitar a criação de componentes reutilizáveis para a web. Este não possui a pretensão de substituir frameworks como o AngularJS ou o Backbone.js, mas sim, disponibilizar ferramentas que simplifiquem o desenvolvimento de Web Components.
Além de apresentar uma sintaxe mais enxuta e intuitiva para a criação destes componentes, o Polymer estende as especificações dos web components, de modo a agregar diversas novas funcionalidades, como por exemplo:
<ul>
<li>Data binding;</li>
<li>Mecanismos avançados para estilização dos componentes;</li>
<li>Extensão e customização de elementos nativos do browser;</li>
<li>Adição de eventos aos componentes, como detecção de cliques e gestos;</li>
</ul>
Em adição a todo este ferramental, com a recente atualização da biblioteca para a versão 1.0, a Google disponibilizou um repositório contendo diversos elementos prontos para utilização em produção. Estes englobam desde componentes visuais, baseados no <a href="https://dtidigital.com.br/blog/material-design-conheca-a-cara-nova-da-google-que-chegou-pra-ficar-nos-seus-aplicativos/" target="_blank" rel="noopener">material design</a>, até elementos funcionais como validadores de campos de texto e implementações de serviços da própria Google, como Google maps e Youtube.
Diversas empresas e serviços já estão utilizando web components e o Polymer para a construção de suas ferramentas. Podemos citar, por exemplo, a empresa Salesforce, que já disponibiliza um pacote completo de elementos customizados, desenvolvidos utilizando a biblioteca da Google, para utilização na criação de produtos dentro da sua plataforma, e o Github que já apresenta alguns web components no seu sistema.
Apesar de todas as suas vantagens e crescente adesão, esta tecnologia ainda apresenta dificuldades com relação ao seu suporte.
Analisando a figura:
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/webc.png"><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-158" src="https://dtidigital.com.br/wp-content/uploads/2015/07/webc.png" alt="webc" width="1299" height="608" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/webc.png 1299w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/webc-300x140.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/webc-768x359.png 768w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/webc-1024x479.png 1024w" sizes="(max-width: 1299px) 100vw, 1299px" /></a>
&nbsp;
É possível perceber que apenas o navegador Google Chrome implementa todas as especificações do web components. O Firefox e o Safari possuem um suporte parcial e o Internet Explorer não apresenta compatibilidade com as especificações. Esse fato pode distanciar grande parte dos desenvolvedores que necessitam, muitas vezes, prover soluções para uma gama maior de browsers e dispositivos.
Apesar disto, não há dúvidas quanto à importância desta nova tecnologia que irá tornar a web mais semântica e modular, incentivando desta forma o reuso de elementos já desenvolvidos e simplificando o desenvolvimento web de uma forma geral.
<h5 style="text-align: justify;">Por: Marco Túlio Ferreira, Renan Ferreira e Jéssica Saliba.</h5>

Web Components & Polymer: porque ele vai facilitar sua vida

Desbloqueie o futuro do seu negócio

Mais conteúdos como esse

Travessa Dona Zilda, 125, sala 203, São Gonçalo – Pelotas, RS. CEP: 96075-166

14841 Dallas Parkway, 8th Floor Addison, TX 75254

R. Levindo Lopes, 357, 5º e 12º Andar – Savassi, Belo Horizonte MG, 30112-010