O que é arquitetura baseada em componentes e por que isso é importante?

Os componentes da Web permitem criar elementos HTML personalizados. Você encontrará componentes da web usados ​​com mais frequência em estruturas JavaScript front-end modernas. Mas "Web Components" é, na verdade, um padrão da web do W3C e não precisa de uma estrutura para ser útil.

O que são componentes da Web?

Os componentes da Web funcionam como Lego para HTML. Eles são uma coleção de tecnologias que ajudam a tornar o HTML mais útil e reutilizável. Para obter mais informações, verifique a especificação do W3 Web Components e a página da Mozilla Developer Network sobre Web Components .

Essas tecnologias são:

• Elementos personalizados
• Modelos HTML
• O Shadow DOM
• Módulos ES

Vamos dar uma olhada nisso.

Elementos Personalizados

Os elementos personalizados são elementos HTML especiais que o JavaScript torna mais funcional. Eles são mais usados ​​para exibir dados sempre atualizados, sem retornos de chamada. Você também pode nomeá-los como quiser.

Modelos HTML

Os modelos são pedaços reutilizáveis ​​de HTML. Eles são ótimos para itens que vão em vários lugares ou em várias páginas, como cabeçalhos, rodapés e menus.

O Shadow DOM

O DOM é a cola que liga o que você vê no navegador ao código HTML. O Shadow DOM é uma parte do DOM que permite que você mantenha a marcação, o estilo e a funcionalidade separados.

Usando o DOM sombra, cada elemento personalizado pode obter seu próprio DOM. Isso impede que as funções de estilo e JavaScript modifiquem os elementos que você não deseja que sejam afetados.

Módulos ES

Essas são as bibliotecas JavaScript especiais que fazem os componentes da web funcionarem.

Uma das principais vantagens dos componentes da web é que você pode reutilizar seu HTML personalizado em qualquer lugar. Como os componentes da web são HTML e JavaScript simples, eles são compatíveis com aplicativos JavaScript vanilla, bem como estruturas. Você pode aprender mais em webcomponents.org .

Componentes da Web com uma estrutura

A maneira mais fácil de começar a usar componentes da web é com uma estrutura. Antes que os componentes da web existissem, Angular.js fornecia uma funcionalidade semelhante chamada diretivas. Eles faziam muito do mesmo trabalho que os componentes, antes que os componentes se tornassem um padrão.

Agora que os componentes são um padrão, existem outras estruturas que se baseiam no conceito de componente da web. Eles tornam o uso de componentes da web mais fácil e simplificado, bem como abstraem grande parte da complexidade do uso de JavaScript de baixo nível.

Vue

Vue.js é uma estrutura de front-end baseada em componente popular que é favorita entre os desenvolvedores. O Vue é fácil de aprender e programar. A estrutura também facilita a adição de componentes simples a sites HTML básicos.

Relacionado: O que é Vue.js?

Reagir

React é uma estrutura de front-end amplamente adotada comercialmente. Essa estrutura também é favorita entre os desenvolvedores. O React é mais conhecido por simplificar o desenvolvimento da web, colocando HTML, CSS e JavaScript em um único script.

Para saber mais, dê uma olhada em nosso resumo de tutoriais para aprender React a fazer aplicativos da web .

Componentes da Web sem uma estrutura

Você pode escrever componentes da web em JavaScript simples. Mas é difícil fazer isso, especialmente para iniciantes. No entanto, existem bibliotecas leves que você pode adicionar ao seu código existente. Eles oferecem a facilidade de práticas modernas de JavaScript sem a alta sobrecarga de um framework completo.

Polímero

Polymer é a contribuição do Google para o movimento de componentes da web. É uma coleção de bibliotecas leves que tornam a criação de elementos personalizados mais fácil do que com JavaScript simples. Possui bibliotecas para a criação de elementos personalizados, bem como modelos.

A Polymer tem uma biblioteca para polyfills para garantir a compatibilidade com navegadores mais antigos. Há também um lançamento antecipado de componentes de design de material para adicionar design de material ao HTML simples.

Fino

Outra opção é Slim.js, uma biblioteca tudo-em-um que facilita a adição a um site simples. Ele simplifica o processo de criação de elemento personalizado e fornece acesso direto ao DOM sombra.

Estêncil

Por último, mas não menos importante, está o excelente Stencil, que lhe dá o melhor dos dois mundos. É semelhante ao React e fornece muitas das mesmas funcionalidades. Mas oferece a funcionalidade de nível de estrutura sem prendê-lo em uma estrutura de serviço pesado.

O Stencil também pré-compila seus componentes, o que os torna mais leves. Em contraste, frameworks como React carregam todo o framework no navegador e compilam componentes instantaneamente. No momento em que os componentes do Stencil chegam ao navegador, eles são apenas JavaScript e HTML básicos, sem nenhuma bagagem extra.

Componentes da Web e Web Design

Um dos maiores obstáculos do uso de componentes é a perda de estruturas de design, como o Bootstrap . Tecnicamente, você pode usar o Bootstrap com um site baseado em componentes. E há uma porta Bootstrap para React. Mas se você quiser usar algo como Stencil ou Vue, pode não ficar satisfeito com a falta de compatibilidade entre seus componentes e o framework.

Estruturas de Web Design Tradicionais

A boa notícia é que existem várias estruturas de design para escolher. Vaadin fornece alguns componentes bonitos. Para um sabor corporativo, existe o OpenUI5 . E, como já mencionado, o Polymer do Google também oferece componentes de interface de usuário de materiais .

A má notícia é que você não encontrará a mesma experiência que obtém com o Bootstrap em nenhuma dessas estruturas. E estão faltando muitos elementos que você vê na maioria das estruturas de design, como tipografia.

Qual é a abordagem da estrutura de design baseada em componentes?

Uma tecnologia diferente, como componentes da web, merece uma abordagem diferente. Tachyons é a melhor abordagem. É mais fácil de usar para designers, mas pode dar aos desenvolvedores uma base sólida e limpa. O Tachyons prioriza os dispositivos móveis e fornece uma consistência de design que é sutil, mas gera belos resultados.

Tachyons divide as classes CSS para o menor uso possível. Por exemplo, é assim que você cria um botão usando-o:

 <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>

Na maioria dos frameworks de design, você daria ao link uma classe de botão e outra classe para arredondar os cantos. Em Tachyons, você escolhe seu preenchimento, borda, cor, etc. na hora. Todas as abreviações podem parecer complicadas no início, mas seguem um padrão de nomenclatura consistente e fácil de aprender.

A menor classe possível é uma abordagem que não funciona para sites tradicionais porque obstrui suas classes de HTML. Mas com a arquitetura baseada em componentes, você provavelmente usará o mesmo botão repetidamente em todo o seu aplicativo. Isso significa que você só precisa criar esse botão uma vez para todo o site.

Pensando em componentes

Outro obstáculo é fazer com que seu cérebro mude de marcha dos layouts tradicionais de sites para a estrutura baseada em componentes. Existem duas técnicas para ajudá-lo a aprender a pensar em componentes.

A abordagem atômica

Pense em uma página da web como um organismo. As partes como a seção de heróis, guia de preços e análises de usuários são como as células do organismo. Essas são peças que você pode mover com segurança para seus próprios componentes, quer você os reutilize ou não.

Os botões, cabeçalhos e aspas são como átomos. Os átomos são a menor parte possível. Quando não faz sentido decompor um componente ainda mais, é um átomo. Normalmente, são componentes que você usará repetidamente ao longo do projeto e, possivelmente, entre os projetos.

A Abordagem SECA

Ou você pode simplesmente esquecer toda aquela bobagem de organismo, célula e átomo e mantê-lo SECO . DRY significa Don't Repeat Yourself.

Qualquer coisa, grande ou pequena, pode ser um componente. Portanto, basta escrever seu HTML como de costume. Quando você encontrar algo que deseja reutilizar, como uma galeria ou rodapé, divida-o em seu próprio componente.

Você deve usar componentes da Web em seu próximo projeto?

Os principais pontos a serem considerados são sua equipe e os padrões da web.

Todos os principais navegadores adotaram componentes da web. CanIUse avalia os componentes personalizados em uma taxa de adoção de 93 por cento e os modelos em 95 por cento , para que sejam seguros de usar. E existem polyfills para os poucos retardatários que não oferecem suporte a componentes da web. Isso significa que a conformidade não é um problema.

Se você tem uma equipe sem experiência em frameworks ou JavaScript, eles podem ter dificuldades para adotar essa nova tecnologia. Mas eles provavelmente lutariam para adotar qualquer nova tecnologia, se fosse o caso. E se você está sozinho, vá em frente! É sempre uma boa ideia desenvolver seu conjunto de habilidades.

As partes mais difíceis de adotar componentes da web são a falta de estruturas de design e aprender a pensar em termos de componentes. Mas nós cobrimos ambos. Os componentes da Web existem desde 2014, então eles não são uma tecnologia nova. Mas eles são uma tecnologia melhor.