Arquitetura baseada em componentes: o método mais eficiente para desenhar um projeto web

Published in

MCTW_TDW

7 min readSep 21, 2022

Com a evolução das tecnologias e a constante atualização de linguagem de programação web é cada vez mais sentida, pelos desenvolvedores de frontend, a dificuldade em decidir de que forma a arquitetura dos seus projetos deve ser desenhada, assim como a necessidade de reciclar e de reutilizar pedaços de código, facilitando o seu trabalho. Isto é atualmente possível com a correta utilização de frameworks de JavaScript para frontend (tais como React, VueJS e Angular) que permitem construir uma arquitetura de projeto baseada em componentes (quer funcionais, quer estilísticos).

Developers working together — Imagem de Christina Morillo no Pexels

Em primeiro lugar, o que se entende por componentes?

Um componente corresponde a uma “peça” independente de código que é funcionalmente separada do resto de uma página web, mas que funciona em harmonia com a mesma. À partida, é possível perceber de que forma um website está construído em componentes analisando as funcionalidades presentes e o design.

Recorrendo à biblioteca JavaScript de React para uma compreensão mais técnica de componentes, estes são blocos de construção de uma aplicação modular (programa — todo — capaz de ser partido em pequenas partes — componentes).

Por exemplo, na imagem que se segue relativa a um projeto pessoal utilizando React, pode-se verificar que existe um componente MoviesPage, que envolve os restantes componentes, nomeadamente o componente Navbar que é comum a todas as páginas do website; um componente Search onde é possível fazer uma pesquisa de filmes, que irá modificar o componente MovieList no qual são listados inúmeros filmes, sendo que cada filme que retorna da pesquisa é tratado por um componente Movie que transforma as informações que recebe de uma API no que se vê em frontend.

Exemplo de disposição e organização de componentes

Os componentes de React podem ser dedicados a camadas específicas de uma aplicação, como backend ou a interface do utilizador. Para as diferentes camadas existem diferentes tipos de componentes:

“Estilos/Temas”que definem a aparência da aplicação e dos seus elementos.
“Blocos” que fornecem recursos adicionais e reutilizáveis, geralmente relacionados com a interface do utilizador ou funcionalidades. Para estes se tornarem componentes, os blocos devem incluir um conjunto de definições, como parâmetros e variáveis.
“Bibliotecas” que envolvem blocos e ações que fornecem uma interface fácil de interagir. Um bom exemplo são as bibliotecas JavaScript que oferecem uma ótima experiência de frontend.
“Conectores” que permitem integrações com outras aplicações sem a necessidade de escrever código personalizado, reduzindo significativamente o tempo e o esforço e eliminando erros.
“Plug-ins” que são complementos instalados num programa, aprimorando os seus recursos.

Esquema de exemplo dos tipos de componentes

Os componentes são também multi-facetados, ou seja, podem servir como peças de infraestrutura, adicionados a mais do que uma aplicação. Podem ainda residir num repositório de componentes público para que várias aplicações e desenvolvedores os possam utilizar.

Qual a importância de uma arquitetura de projeto baseada em componentes?

A construção de uma boa arquitetura de um projeto, nomeadamente com o uso de componentes, traz inúmeros benefícios para os profissionais que trabalham no desenvolvimento de produtos Web.

Com uma arquitetura baseada em componentes, bem organizada e descritiva, é então possível:

Otimizar o código, facilmente gerenciável, legível e compreensível;
Alterar os mínimos detalhes em minutos e ver que são alterados corretamente em todos os lugares em que são utilizados;
Facilitar a atualização de componentes, reduzindo o tempo gasto para fazer tarefas simples;
Reduzir o risco de estragar outras partes do código ao mudar algo pequeno;
Remover inconsistências e redundâncias com código reutilizado;
Criar uma biblioteca de componentes própria, que pode ser compartilhada entre projetos e equipas;
Facilidade em perceber o fluxo que os dados seguem para renderizar a interface do utilizador, eliminando a confusão de encontrar cada parte do código;
Permitir um processo de debugging mais eficiente;
Reutilização de componentes (com base no exemplo anterior, o componente que lista os filmes pode ser adaptado noutro website para listar restaurantes, com as alterações necessárias para o seu propósito);
Reduzir significativamente o tempo e o esforço pois não precisam de escrever código personalizado para um recurso ou funcionalidade comum que várias aplicações exigem.

A nível de funcionamento entre os desenvolvedores dentro das empresas, é possível um desenvolvimento mais rápido para economizar tempo e aumentar a receita, pois devido à reutilização de componentes, uma arquitetura baseada em componentes reduz o número de desenvolvedores necessários para criar aplicações rapidamente. Os componentes lógicos não têm um contexto e os componentes de frontend (componente visual) já possuem uma excelente UX e UI. Portanto, os desenvolvedores podem focar-se na implementação da união entre estes componentes.

Este método encaixa no conceito “Separation of Concerns” (princípio que afirma que o software deve ser separado com base nos tipos de trabalho que executa) no sentido em que ao separar cada componente em arquivos diferentes de acordo com funcionalidades é uma valiosa ajuda entre membros de uma equipa de desenvolvimento de projetos web.

Além disso, com a redução de tempo gasto na execução de tarefas de atualização e debbuging, o utilizador que visita a interface também beneficia de pouco tempo de espera no caso de ocorrerem problemas que o impeçam temporariamente de a aceder, mantendo-se utilizador habitual do website em questão.

Uma arquitetura baseada em componentes acolhe muito bem também o conceito de “Atomic Design” (metodologia criada por Brad Frost que procura fornecer orientação sobre a construção de sistemas de design de interface de forma mais deliberada e com ordem e hierarquia explícitas) pois, tendo em conta que durante a construção de componentes React, estes são divididos num único propósito e em pequenos componentes para que seja escalável, é apenas necessário proceder da mesma forma para o CSS (estilos) desses componentes. O conceito de “Atomic Design” é aplicado na configuração da estrutura de pastas e raciocínio de divisão.

Assim, cria-se igualmente um efeito de cascata unidirecional de estilos permitindo alterar rapidamente certos estilos.

Como se deve proceder?

Existem algumas recomendações para construir uma arquitetura de projeto baseada em componentes de forma mais eficaz.

Em relação aos componentes em si, estes devem ser estruturados de forma a que sejam “self-contained”, ou seja, um componente deve ter tudo o que precisa para funcionar de maneira eficaz, como a sua própria lógica, dados e estilos; deve ser construído de forma que seja abstrato o suficiente para funcionar em diferentes casos de uso (reutilizável) e de forma a que possa ser facilmente estendido para suportar necessidades futuras (extensível). Além disso é importante separar o código em partes mais pequenas, tendo em conta que quanto menor for o número de linhas de código, mais fácil é a gestão de cada componente.

A nível de organização dos componentes em pastas, os componentes relacionados entre si devem ser agrupados numa única pasta. Recomenda-se que seja feita uma divisão por pastas/arquivos da seguinte forma:

Funções auxiliares — devem ser separadas da lógica de renderização, usadas sempre que exigidas pelos componentes e commumente declaradas. Geralmente, manipulam os dados recebidos do servidor para caber na lógica da interface — As funções que estão relacionadas umas às outras devem ser agrupadas num único arquivo e devem separar-se as funções gerais num arquivo utils.
Serviços da API — código que pede os dados ao servidor — devem conter uma configuração (variáveis, etc.) e devem passar os dados recebidos do servidor para o componente de chamada sem o modificar.
Config — contém as configurações com respeito ao ambiente no qual a aplicação está a ser executada — devem estar em arquivos diferentes para um tipo diferente de ambiente.
Rotas — determinam o formato de URL pelo qual alcançamos as diferentes páginas web da aplicação.
Static — arquivos estáticos (css, imagens, js raramente alterado, fontes, etc.) — devem ser agrupados por tipo e de tamanhos baixos, se possível.
Páginas — devem conter apenas o ponto de contacto entre as rotas, os outros componentes e os arquivos nos quais as condições iniciais são mencionadas para iniciar uma página.
Tudo o resto — contém diferentes ferramentas a serem utilizadas para iniciar a aplicação, gerir a compilação e a sintaxe dos arquivos a serem utilizados, etc., tais como: arquivo para iniciar um servidor frontend; arquivo de especificação de pacotes ou módulos utilizados no projeto; arquivo README.md para descrever as especificações do projeto, versões, entre outros.

É também recomendado que seja desenvolvido um sistema de linguagem de design de modo a estabelecer os padrões de desenvolvimento de componentes.

Por fim, existe um conjunto de ferramentas disponíveis para ajudar em funções específicas (desde composição a testes) do processo de desenvolvimento que valem a pena serem estudadas, tais como:

Storybook — permite desenvolver componentes de forma isolada.
Styleguidist — oferece variações para diferentes componentes e ajuda na documentação dos componentes.
Linters — sublinha erros de programação, bugs, erros de estilo e construções suspeitas.
Para testagem, Postman, Cypress e Jest.

Conclusão

A arquitetura baseada em componentes permite um desenvolvimento mais fácil, rápido e robusto, pelo que é cada vez mais recomendada a sua utilização em projetos de diferentes dimensões. Se ainda precisa de lidar com uma peça única de frontend, está na hora de começar a mover-se em direção a esta abordagem modular. A transição irá levar algum tempo e recursos, mas os esforços valerão a pena para o produto final.

Arquitetura baseada em componentes: o método mais eficiente para desenhar um projeto web

Em primeiro lugar, o que se entende por componentes?

Qual a importância de uma arquitetura de projeto baseada em componentes?

Como se deve proceder?

Conclusão

Referências:

Written by Adriana Machado