Nos dias de hoje temos quase como unanimidade a utilização da arquitetura de componentes nas frameworks modernas de frontend, porém a adoção da mesma não foi do dia para a noite e passamos por diversas revoluções para chegar onde chegamos (e ainda estamos só no começo!!!).

Como era?

Dentre as nossas revoluções particulares podemos começar em agosto de 2006 com o advento do JQuery, uma biblioteca que possibilita a interação em diversos browsers, trazendo uma mudança do estado passivo para o ativo nos browsers, iniciando a criação de inúmeras frameworks Javascript  (somente no tempo de leitura deste artigo já foram criadas quatro novas, até o final serão 180 LoremIpsum JS’s).

Anos depois, temos um marco zero na criação das frameworks modernas. Em 2010, há o surgimento de três importantes frameworks, sendo elas o KnockoutJS, Backbone e o AngularJS, que dominou o mercado até a aparição do ReactJS, uma biblioteca para desenvolvimento de interfaces mantida pelo Facebook, Em 2014, um engenheiro do Angular cria o Vue utilizando tudo que há de bom nas frameworks e, em 2016, temos a reescrita do AngularJS que agora se denomina Angular.

pasted image 0 (1)

Além do advento das frameworks client-side, ainda utilizamos diversas técnicas em server-side para a criação de páginas, a construção de trechos inteiros baseados no layout da página que ocasionava em códigos duplicados, tempo perdido, consequentemente, dinheiro perdido e uma manutenção praticamente inexistente.

Conceitos e boas práticas

Depois de uma aula chata sobre história, vamos ao que interessa: os conceitos da arquitetura de componentes e como podemos melhorar o nosso projeto seguindo um simples guia.

O que é um componente e por que precisamos deles?

Você pode imaginar um componente como o menor objeto da sua interface, ele é o Building Block dessa UI. Eles são reutilizáveis, testáveis e independentes, o que possibilita aos desenvolvedores criar uma gama de opções utilizando esses blocos básicos.

Diferentemente de um MVC, os componentes não dividem a responsabilidade verticalmente, tendo toda dentro dele, encorajando reutilização e responsabilidade única, principalmente por serem independentes.

Essa arquitetura traz inúmeros benefícios principalmente pelo conceito de “move fast”. Nos dias de hoje precisamos testar inúmeras situações, telas, adaptar ao usuário, realizar testes A/B, testar a performance, o que pode acarretar em diversos bugs. Porém, ao atomizar a tela temos o benefício da precaução Ser minucioso em cada componente previne algo de escapar lá na frente.

Atomic Design

Hoje temos como sonho de consumo a criação de um Design system. Temos diversas ferramentas que nos auxiliam para a criação de uma boa documentação de design, sendo o storybook o mais famoso deles, porém o Atomic Design tem um foco menor na criação do sistema, e um foco maior na metodologia que adotamos para a criação do mesmo, isso acontece principalmente por ser algo subjetivo.

Basicamente temos a nossa interface feita por componentes menores, os nossos famosos Building Blocks, do qual podemos construir qualquer componente e consequentemente interface que desejamos, mas o que é um design atômico?

O design atômico é baseado em 5 níveis distintos, são eles:

pasted image 0

 

  • Átomos

São os nossos Building Blocks, basicamente são as nossas tags HTML ou mesmo fontes, paleta de cores ou referências de animação;

 

 

  • Moléculas

 

Combinações de átomos com a mentalidade de fazer uma única função e fazê-la bem, tem o propósito de ser reutilizada;

 

  • Organismos

 

São agrupamento de moléculas para criar seções mais complexas de uma interface, por exemplo, um header com inúmeras funções;

 

  • Templates

 

É aqui que vemos o nosso layout aparecer, inicialmente usamos um wireframe e com o passar das etapas anteriores eles ganham vida;

 

  • Páginas

 

É a página real baseada em um template, substituindo por conteúdo de verdade, ou seja,como o usuário irá vê-la;

ezgif-1-58745c566a

Fonte: https://patternlab.io/

Como utilizamos?

Na Wavy utilizamos diversas stacks que representam bem a arquitetura de componentes moderna, React, Angular, Vue, cada qual com sua facilidade e melhores práticas, tendo como foco um refactor-driven development que favorece bastante o uso de componentes, que uma vez criado, é utilizado por toda a nossa aplicação. Principalmente por utilizarmos a arquitetura Flux por baixo dos panos, favorecemos ainda mais a responsabilidade única aliada ao Single Source of Truth.

Reatividade, orientação à eventos e programação funcional são fatores que facilitam ainda mais a performance de uma aplicação, fazendo com que a propagação de informação se torne ainda mais fácil, e juntamente com a criação de um design system de reutilização, transformam literalmente tempo em dinheiro, pois com pouco recurso conseguimos manter uma alta velocidade de desenvolvimento.

Futuro da Arquitetura de Componentes

O futuro da arquitetura se encontra no presente. Utilizando boas práticas podemos criar design systems complexos e acelerar o desenvolvimento, além de: assegurar uma experiência consistente para o usuário através de todo o nosso portfólio, otimizar o processo de requisitos e criar o conceito de design no browser.

Leituras e recursos adicionais

Atomic Design, Brad Frost – http://bradfrost.com/blog/post/atomic-web-design/

Frontend Bookmarks – https://github.com/dypsilon/frontend-dev-bookmarks

The reusable Javascript Revolution – https://www.youtube.com/watch?v=L-fx2xXSVso

Pattern Lab – https://patternlab.io/

Posted by:Raphael Moraes

Deixe seu comentário