No Conexão Kinghost 2016, falei sobre Web Components e o desenvolvimento de aplicações web modernas, focando minha apresentação no Polymer. Componentes para o desenvolvimento web geram vários debates nas comunidades técnicas e dividem opiniões. Através deste artigo faço uma breve análise sobre os cenários de tecnologia que encontramos por aí.
Componentes de Software
O desenvolvimento de um software baseado em ‘componentização’ de elementos e widgets é considerado um ganho para a programação de alto nível. Na verdade, é um epic win, pois com a ‘componentização’ correta, nós conseguimos encapsular funcionalidades específicas para atender um elemento da UI (user interface). Isso o torna independente e de fácil integração, ou seja, cria um componente que possa ser utilizado em qualquer local dentro do software.
Os Web Components são desenvolvidos com as tecnologias HTML, CSS e Javascript e existem algumas ferramentas para auxiliar o processo de criação, como é o caso do Polymer. É importante ressaltar que o Polymer é um framework baseado em tecnologias de Web Components, mas você pode criar componentes sem ele. Podemos dizer que os Web Components são baseados em quatro camadas: Custom Elements, HTML Template, Shadow DOM e HTML Imports.
Custom Elements
Você pode criar seu próprio elemento HTML, com tags personalizadas, sendo um requisito que o nome do elemento contenha um traço e que seu protótipo estenda-se a um HTMLElement. O Polymer possui um catálogo de elementos bem interessante, no qual podemos encontrar vários componentes de calendários, mapas e muitos outros.
HTML Template
Os templates HTML são criados por meio da tag <template>, sua funcionalidade é bem semelhantes aos templates que vemos em outros frameworks como mustache ou handlebars. Com este bloco podemos armazenar alguma marcação na página e posteriormente reutilizá-la.
<template id="profile"> <h1>Hello there!</h1> <p>This content is top secret :)</p> </template>
Tudo que estiver dentro da tag <template> não é processado no momento de carregamento da página. Com isso, elementos que realizam algum tipo de requisição, como imagens e vídeos, só terão seu conteúdo exibido após receberem algum tipo de chamada de Javascript para inclusão e renderização dos mesmos.
<template id="profile"> <h1>Hello there!</h1> <p>This content is top secret :)</p> <img src="" /> </template>
Chamada Javascript:
var template = document.querySelector("profile").content();
template.querySelector("img").src = "fulano.jpg";
document.body.appendChild(t.cloneNode(true));
Shadow DOM
O Shadow DOM fornece encapsulamento para o JavaScript, CSS e templates em um componente, ou seja, ele nos proporciona uma estrutura independente e que não impactará nos demais elementos dentro da página. Em outras palavras, ele é uma das melhores formas de criarmos widgets.
Shadow DOM deve ser conectado a um elemento já existente, o qual pode ser criado diretamente ou inserido via script. Este elemento pode ser nativo, com tags como <article> ou <p>, ou de forma customizada como <paper-line>.
A instância de Shadow DOM é criada pelo seletor element.createShadowRoot (). Confira um exemplo a seguir:
<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
// create shadow DOM on the <p> element above
var shadow = document.querySelector('#hostElement').createShadowRoot();
shadow.innerHTML = '<p>Here is some new text</p>';
</script>
</body>
</html>
O exemplo está criando um Shadow DOM na tag <p> e inserindo via script o conteúdo do mesmo.
HTML Imports
Os imports de HTML são o mecanismo de inclusão de componentes. Você pode realizar a incorporação desta forma:
<link rel="import" href="arquivo.html">
Implementação
Com relação a implementação de Web Components com Polymer, devemos considerar a questão de compatibilidade, pois algumas versões de navegadores ainda não dão suporte a 100% das funcionalidades. A escolha da tecnologia é dependente de perfil de projeto (recursos tecnológicos que os usuários que serão atendidos utilizam e como) e da arquitetura de software que está planejando.
E, pensando em arquitetura, existem outras stacks que podem ser utilizadas e que são bastante interessantes, como Angular e React.
