Blog Mentores

Blog Mentores Blog Mentores

blog blog
Pesquisa

Web Components: o que é e como aplicar em Ecommerces

Um novo jeito de escrever códigos para web, que é tendência entre os desenvolvedores, é o uso de Web Components. Trata-se de um formato de programação onde pode-se reutilizar uma galeria, por exemplo, em diversos projetos ao longo da construção do HTML, sem ficar todo aquele “macarrão”  de códigos.

Todo desenvolvedor sabe o quanto é trabalhoso importar um conteúdo com Javascript por <script src> e o seu CSS por <link rel=”stylesheet”>, para diversos componentes.

Os Web Components surgiram, então, como um conjunto de normas, que os engenheiros da Google desenvolveram seguindo as especificações da W3C, para possibilitar aos devs a criação de componentes reutilizáveis nativamente dentro da web.

Assim os códigos ficam sistematicamente mais simples, organizados, modulares e podem ser reutilizados em documentos ou aplicativos da web, usando apenas HTML, CSS e JavaScript.

Utilizar Web Components evita, também, a dificuldade de usar pedaços enormes de código e os possíveis conflitos de efeito de códigos externos ou de plugins, e ninguém gosta de retrabalho, não é mesmo?

Segundo a Tablelessum componente só é um componente se ele pode ser reutilizado, diversas vezes, em qualquer lugar do projeto, sem sofrer alterações acidentais por códigos externos e também sem modificar outros elementos. É aí que entram os Web Components”.

Esta funcionalidade reaplicável, possui 4 fundamentos principais em sua construção, que podem ser utilizados juntos ou separadamente. São eles:

1. Custom Elements

É um mecanismo que possibilita a criação de novos elementos ou tags para páginas HTML, deixando o seu conteúdo mais semanticamente desenvolvido. É possível desenvolver códigos individuais, organizados e concisos, para elementos que possuem uma função única. A herança dos elementos que já estão dispostos no código também é permitida, e a customização é mais ajustável, estabelecendo, também, fundação para o design e permite usar novos tipos de DOM.

2. Shadow DOM

O Shadow DOM é um recurso onde é possível gerar bolhas dentro do código. Os elementos no código ficam, então, encapsulados e não seguem as normas delimitadas no geral do componente. O DOM de 1 componente, renderizado pelo navegador, fica oculto, criando, também, um escopo para o CSS. É, ainda, permitido criar trechos de nós de elementos que fiquem expostos dentro do componente, ainda que não faça parte do mesmo.

Algumas formas convencionais, como no navegador Internet Explorer, não suportam esse mecanismo, tendo que ser usado um polyfill para rodar naturalmente.

3. HTML Templates

Com eles é possível definir modelos de HTML em fragmentos de marcação inertes ao código, não usados quando a página carrega, que mais tarde podem ser instanciados para execução. Ficam invisíveis e renderizados. Seu conteúdo não é processado no navegador até ser ativado por uma função JavaScript.

4. HTML Imports

Ele importa a HTML completa, até o JavaScript e seu CSS embutido. A página importada é paralelamente processada enquanto a já criada roda normalmente. Mesmo assim, é o mais problemático dos recursos, pois precisa usar um polyfill para os navegadores que não são compatíveis, por exemplo, nos navegadores baseados em Webkit, o suporte será automático, já para navegadores como Opera e Mozilla, tem de ser feito manualmente. O Internet Explorer ainda não tem previsão para o ajuste.

Web Components e Ecommerces

E como os Web Components podem otimizar o processo de desenvolvimento de um Ecommerce? Essa e outras perguntas foram respondidas pelos nossos devs abaixo. Confira!

Um exemplo prático da utilização do Web Components seria em um site de Ecommerce, no qual poderíamos ter várias listagens de produtos, como os mais vendidos, mais buscados e em ofertas. Digamos que você queira colocar os produtos mais vendidos e em ofertas na Home do site, já em outra página você queira colocar somente os produtos em ofertas com o preço do maior para o menor, utilizando o Web Components isso seria totalmente possível e bem fácil de implementar. Bibliotecas como React e VueJs vão te ajudar na criação dos Web Components.” (Marcelo Augusto)

Pode-se trabalhar com efeitos visuais também, existem Web Components que servem para trabalhar com objetos 3D, gráficos e outras formas de expressar ou mostrar algo dentro de um Ecommerce, muito provavelmente, se for necessário algum tipo de “super efeito” ou “super detalhamento” para ser feito, alguma biblioteca em React ou, principalmente, VueJs existirá para facilitar esta demanda.” (Wellington Trojan)

 

Concluindo, percebemos que temos mais eficiência e velocidade na hora do desenvolvimento e uma maior otimização dos sites, inclusive dos Ecommerces, utilizando-se de Web Components. É claro que esta função ainda necessita de aprimoramento, mas com profissionais capacitados, a solução dos problemas e agilidade no processo será certa.

Gostou deste texto? Interaja com a gente, compartilhando seus conhecimentos sobre Web Components no campo de comentários! Aproveite para assinar a newsletter e receber as melhores novidades sobre tecnologia em primeira mão.

Avatar Ingrid Marina postou 08/11/2018
toasty