Web Components & Polymer: porque ele vai facilitar sua vida

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.

Mas então, como alcançar as vantagens da componentização no ambiente web?

Se voltarmos aos primórdios do desenvolvimento web, veremos que, basicamente, as aplicações eram compostas de um conjunto reduzido de  tags: <select>; <input>; <form>; 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):

1. Custom Elements: define as interfaces a serem utilizadas para definir tags HTML customizadas;
2. HTML Templates: permite a definição de blocos de código (HTML) que pode ser injetado na página dinâmica;
3. 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;
4. 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.

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.

As vantagens do Polymer

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:

• Data binding;
• Mecanismos avançados para estilização dos componentes;
• Extensão e customização de elementos nativos do browser;
• Adição de eventos aos componentes, como detecção de cliques e gestos;

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 material design, 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:

É 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.

Por: Marco Túlio Ferreira, Renan Ferreira e Jéssica Saliba.