Frontend

10 tecnologias para usar no seus projetos frontend

Confira nossas dicas para ter uma stack com diversas tecnologias para solucionar uma ampla variedade de projetos frontend.

React

A biblioteca mais popular no mercado para criação de aplicações frontend não poderia faltar na nossa stack!

Em um resumo bem simples, React é uma biblioteca para criação de interfaces de usuário, que utiliza uma sintaxe declarativa e baseada em componentes.

O ecossistema do React é gigantesco, com uma comunidade grande e ativa, o que facilita bastante a formação de novos devs, e também facilita na hora de encontrar uma solução para aquele problema que você está a horas tentando resolver.

Dentro desse ecossistema existem diversas ferramentas que complementam o React, cada uma resolvendo um problema específico. E como aqui buscamos utilizar sempre a melhor ferramenta para resolver nossos desafios técnicos, utilizamos ele de diversas maneiras.

Create React App (CRA)

Esse é o boilerplate padrão “oficial” do React, e já vem configurado com diversos defaults para criação de aplicações SPA. Dentre esses padrões já estão configuradas as opções para incluir arquivos CSS, CSS Modules, arquivos SVG como componentes, HTTPS em desenvolvimento, entre outros.

Uma grande vantagem do CRA é a possibilidade de atualizar o boilerplate de modo transparente sempre que uma nova versão é lançada. Isso é possível pois todas as configurações estão abstraídas na dependência react-scripts. Desde que você não “ejete” as configurações, você está preparado para novas versões do CRA sem qualquer breaking change.

Baseado no CRA criamos o nosso próprio boilerplate, que adiciona os componentes do nosso design system, bibliotecas de teste com mais configurações e formatação, além de ter exemplos de configuração da nossa pipeline e boas práticas de Docker (para o deploy). E o mais importante, tudo isso sem ejetar as configurações (future proof).

Next.js

Mesmo o CRA sendo um boilerplate ótimo e atendend a maioria das nossas necessidades, em alguns casos precisamos de uma solução mais robusta, que nos ajude a resolver questões de SEO, geração de páginas estáticas, server side rendering (SSR), entre outros. É ai que entra o Next.js, um framework react para produção.

Com o Next.js podemos ter uma aplicação 100% estática gerada em tempo de build, onde podemos utilizar o poder do Node e das features para buscar o conteúdo que necessitamos. Se não podemos ter essa informação em tempo de build, ainda temos a opção de uma aplicação renderizada no servidor, ou até mesmo uma aplicação híbrada.

Além de tudo isso, o tooling do Next.js proporciona uma das melhores experiências de desenvolvimento que você pode encontrar.

Gatsby

Assim como o Next.js, o Gatsby permite a criação de aplicações estáticas e se integra facilmente com os principais CMS disponíveis no mercado.

Com o Gatsby, utilizamos queries GraphQL para construir as páginas em tempo de build, gerando um site totalmente estático, porém com todas as capacidades do React em tempo de execução, permitindo que as aplicações também possam ter comportamento dinâmico.

NestJS (BFF)

Quando trabalhamos com uma grande quantidade de micro serviços, buscar todas a informações necessárias para um determinado frontend não é uma tarefa simples, e muitas vezes para montar uma tela são necessárias diversas chamadas de serviço.

Diferentes frontends consumindo os mesmos micro serviços podem apresentar diferentes requisitos, particularidades, que não podemos deixar como responsabilidade do serviço. O ideal é que os micro serviços entreguem o core através de suas APIs, deixando essa responsabilidade em outra camada que irá realizar as tarefas necessárias para agregar os dados que o frontend precisa.

É aí que entra o pattern de Backend for Frontends, ou BFF. Com ele, é possível que cada aplicação frontend tenha uma experiência customizada. Isso é possível através da integração com uma aplicação backend, que entrega exatamente aquilo que o front necessita, realizando de modo transparente todas as agregações necessárias. Caso você queira saber mais sobre esse pattern, temos um post dedicado sobre este assunto.

Nossos times frontend hoje utilizam o NestJS para criação dos BFFs. O Nest é um framework Node.js para desenvolvimento de aplicações do lado do servidor, e com ele é possível criar serviços REST, GraphQL, gRPC, entre outros. Baseado na arquitetura modular do Angular, o Nest possui uma estrutura e forma de desenvolver muito semelhante ao Spring Boot, além de permitir a geração de documentação automática através do Swagger (REST) ou GraphQL Playground.

PostCSS

Já que estamos falando da nossa stack frontend, não poderia faltar ferramentas relacionadas ao CSS, e o PostCSS é uma ferramenta incrível para trabalhar com CSS utilizando todo o poder do Javascript.

O PostCSS possui uma quantidade enorme de plugins que facilitam o desenvolvimento de código CSS, implementando novas funcionalidades que não seriam possíveis apenas com CSS3 nativo.

Tailwind CSS

Tailwind CSS é outra ferramenta incrível que utiliza todo o poder do PostCSS que está presente na nossa stack. Com ele podemos configurar todo nosso design system e gerar inúmeras classes CSS utilitárias que podemos utilizar para compor as nossas interfaces. Também é possível criar praticamente qualquer página em uma aplicação frontend sem utilizar uma linha de código CSS, apenas utilizando as classes geradas previamente.

Outra funcionalidade interessante do Tailwind CSS é que ele permite compor as classes base geradas, através da configuração em novas classes que possuem a funcionalidade agrupada. Com isso podemos criar componentes de UI muito complexos, escrevendo muito pouco CSS.

Emotion

Amamos o Tailwind CSS, porém nem sempre utilizar apenas as classes geradas é a melhor solução. Aplicações que utilizam SSR ou são estáticas, como o Emotion, podem efetuar diversas otimizações durante o build ou renderização no servidor. Isso é possível através de uma biblioteca CSS-in-JS que permite a extração do CSS crítico das páginas, retornando para o browser apenas o CSS mínimo necessário para a renderização, removendo do bundle inicial qualquer classe que não seja utilizada naquela página.

Storybook

Como temos diversas aplicações, existe a necessidade de criarmos inúmeros componentes reutilizáveis. O Storybook permite o desenvolvimento desses componentes de forma isolada, além de servir como uma biblioteca ou loja de componentes, onde é possível ver toda a documentação de cada componente e diversos exemplos de utilização.

Trabalhamos também com um conceito de hierarquia (ou árvore de componentes) onde temos bibliotecas mais generalistas que atendem um número maior de aplicações. Essas normalmente implementam layouts e comportamentos base dos componentes.

Porém também temos bibliotecas de componentes especializadas, que representam a identidade visual de uma determinada aplicação. Essas bibliotecas mais específicas utilizam como dependência as diversas bibliotecas mais genéricas que possuímos.

Typescript

Amado por muitos, odiado por tantos outros. Fato é que o Typescript é parte importante da nossa stack, especialmente nas bibliotecas de componentes. Já que elas são utilizadas por diversas aplicações e times, precisamos de uma boa definição de tipos que, além de resultar em uma melhor experiência de desenvolvimento nas nossas IDEs, previne diversos erros de programação que poderiam passar despercebidos quando usamos apenas JavaScript.

Também é a linguagem oficial do NestJS, logo todos nossos BFFs são escritos em Typescript também.

Conclusão

Nossa stack de componentes React com TailwindCSS e Storybook funciona como “building blocks” para todas nossas aplicações frontend – assim ganhamos agilidade nas entregas, mantemos um padrão visual entre as aplicações, e também encorajamos o mindset de que cada componente precisa ser desenvolvido de modo isolado, podendo reaproveitá-lo em diversos contextos.

Também reduzimos bastante a dependência das aplicações fronts dos requisitos de backend, através da utilização do pattern de BFFs. O NestJS é nosso aliado nesse sentido, permitindo que a aplicação frontend tenha suas necessidades atendidas pelo próprio time. Além disso, devido ao fato do NestJS ter Typescript como linguagem facilita o entendimento e utilização para qualquer um de nossos devs frontend.

Se tiver algum dúvida ou sugestão, fique a vontade para compartilhar nos comentários. 🙂

1 comentário

Os comentários estão fechados.

%d blogueiros gostam disto: