📅 Conexão KingHost 🚀 Especial Mês das Mulheres - Aulas para apoiar o empreendedorismo feminino 💰

Kinghost | Blog

Desenvolvimento web baseado em componentes

Publicado em 14/10/2016

Atualizado em 26/04/2023

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.

toolbar
Exemplo do elemento paper-toolbar.

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.

Para quem acompanhou a palestra sobre Web Components no Conexão KingHost e quer  resgatar um pouco do conteúdo que viu por lá, pode conferir o slide da apresentação abaixo:

 

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Compartilhe esse conteúdo com alguém que possa gostar também

Conteúdos relacionados

As ameaças virtuais estão mudando constantemente e se tornando cada dia mais sofisticadas. Por isso, para quem tem um negócio online, a segurança é um ponto que merece grande atenção. De acordo com o Relatório do Sitelock que analisou 14 milhões de sites em 2022, sites recebem cerca de 5.5 vezes mais tráfego de bots...

Assine a nossa newsletter e receba conteúdos para apoiar o crescimento do seu negócio

Sem Título(obrigatório)

📅 Aulão GRATUITO 🚀 Como VENDER MAIS na internet 💰

Mensagens para você