📅 Conexão KingHost 🚀 Conteúdos exclusivos para o seu negócio evoluir no digital 💰

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...
Se você trabalha diariamente na internet, com certeza em algum momento se preocupou com a segurança das suas informações. Afinal, diversos dados pessoais e bancários são acessados todos os dias. Nesse contexto, cada dia mais existe a necessidade de reforçar a segurança dos seus dados e se proteger de possíveis golpes no mundo online. Por...
Você já ouviu falar de chatbot? Provavelmente a resposta é sim. Isso porque, essa tecnologia tem ganhado cada vez mais espaço na comunicação digital. Afinal, com a evolução tecnológica e as inúmeras ferramentas que prometem facilitar nossa rotina, os chatbots garantem destaque em diversos setores, desde atendimento ao cliente até vendas e marketing. Neste artigo,...

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ê