Por que o frontend da Resultados Digitais atingiu outro patamar?

Fala meus queridos! Tudo bem por aí? Ainda limpam a despensa quando chegam em casa ou já entregaram pra Deus?

Eu ainda limpo, uso máscara e lavo as mãos sempre. Espero que todos estejam bem e seguros, mas agora vamos falar de coisa boa!

Há um ano, escrevi para vocês um artigo sobre produtividade no trabalho remoto e, olha que coincidência, aumentou bastante o acesso a ele, foi até parar no guia interno e no “manifesto do trabalho remoto” de produto e engenharia da firma.

Vou dar um spoiler, mas me prometam que não irão contar pros meus superiores.

Como alguém escreve sobre produtividade e não consegue ser tããão produtivo assim?

Olha como são as coisas, as aparências enganam não é? Mas vamos aos fatos, eu ainda uso todas as dicas que eu mesmo escrevi, elas são ótimas, e já aprimorei algumas, merecem uma parte 2, fica para um próximo post. Mas a questão é que a treta era outra e bem mais embaixo.

Como alguns já sabem, eu faço parte de um time chamado Mushin, responsável por toda a parte de análise e estatística do RD Station Marketing. Nosso time é responsável por algumas páginas dentro do sistema, mas, infelizmente, cada uma delas foi feita usando uma tecnologia diferente, nada proposital, mas por conta do tempo e das pessoas que se passaram, foram atualizando as tecnologias, linguagens e frameworks, e deixando um legado digamos que um pouco complexo.

Muitas vezes queríamos fazer pequenas mudanças no frontend e esbarrávamos em problemas antigos, estruturais ou códigos um pouco mais complexos, já superados em frameworks atuais como o React.

Até já temos boa parte do código reescrito em React, dentro do mesmo projeto, mas isso muitas vezes nos fazia perder tempo com a fila na #danger-room, nosso canal no Slack que usamos para enfileirar os PRs e fazer a publicação para produção.

Isso acabava impactando em várias ações que são necessárias de se fazer quando se tem um produto digital. O que um designer e um gerente de produto mais quer é colocar algo no ar e rápido, ver se tem aceitação, fazer teste A/B, ver impacto, usabilidade, resumindo, queremos aprender mais sobre o nosso cliente e como melhorar o nosso produto.

#chapter-frontend

Desde que eu entrei na RD já existia um chapter de frontend onde discutíamos semanal ou quinzenalmente exatamente isso que lhes digo e muitos outros pepinos que nos tiravam produtividade e agilidade no dia a dia, mas a treta era muito grande para resolvermos sozinhos ou durante nosso tempo “livre”.

E foi aí que a RD se posicionou em 2020 e formou dois novos times focados em frontend, um responsável pelo que chamamos de Front Hub e outro responsável pelo Tangram, nosso novo design system.

Como diria o poeta Bruno Henrique, “o frontend da RD está em outro patamar”

Front Hub

Nós definimos o Front Hub como um framework completo para gerenciar todas as microfrontends da RD, isso quer dizer que hoje, cada time pode criar seu próprio repositório ou usar um pacote do seu monorepo, iniciar um novo projeto próprio ou via Create React App (o front hub já tem o conector para React, mas isso não impede de termos para outros frameworks também), instalar o front hub e suas dependências, configurar o front hub, os comandos de build, fazer uma cópia do processo de publicação e ufa, tudo pronto! Parece difícil, mas demoraria bem mais sem o front hub.

• Microfrontend

O Front Hub disponibiliza uma função de render para as microfrontends, então você pode chamar onde quiser seu código, até dentro de outra microfrontend se for o caso.

• Deploy

Não precisamos nos preocupar com o processo de build, o Front Hub já compacta e minimiza, disponibiliza em formato gzip e faz o controle do cache dos arquivos.

Não é preciso mais pegar a fila e concorrer com todos os outros PRs de todos os outros engenheiros da RD, seu processo de build é menor e vai levar menos tempo, consequentemente o tempo de publicação também será menor.

No fim das contas, vamos ter publicado mais alterações do que antes e em menos tempo.

• Internacionalização

O Front Hub controla o contexto da aplicação instalando apenas a biblioteca de internacionalização e configurando os arquivos de tradução, ele cuida e já faz o render passando para a língua escolhida.

Tangram

Nosso novo design system, está ficando maravilhoso, principalmente porque iniciamos esse projeto para atender o meu time de análise, rsrs! Nossa experiência tem sido fantástica e com certeza iremos conseguir fazer entregas melhores e mais rápidas atendendo todos os requisitos mínimos.

• Componentes

Os componentes do Tangram já vem em React prontos para serem usados com alguns recursos e detalhes que fazem a diferença no dia a dia, e consequentemente temos ganho de produtividade e não deixamos de esquecer de acessibilidade, cores, espaçamento e afins. Diga-se de passagem, a acessibilidade vem de graça com o Tangram.

Hoje, conseguimos fazer um mock (tela com dados fake) ou protótipo em menos de uma semana e já conseguimos publicá-la em algum ambiente. Lógico que demoramos mais para entregar uma tela completa com internacionalização, uma cobertura razoável de testes, conexão com o backend e todas as regras que queremos implementar ou algum caso mais avançado de componentes, como gráficos, regras de filtros, habilitar e desabilitar opções, mas no geral ganhamos muita agilidade.

• Semântica do HTML

No Tangram temos alguns casos avançados que são exceções, mas via de regra ele nos garante que iremos usar todas as tags HTML do jeito correto e para o que foram feitas. Também garantimos que estamos usando as mesmas cores, espaçamentos em todas as telas do sistema.

• Documentação

A documentação é extremamente eficiente e completa, com os casos de uso, código e exemplos, propriedades, e todo um descritivo feito e pensado pelos designers que arrebentaram também.

Ponto Final

Trabalhar com microfrontends para muitos pode ser algo assustador, gerenciar vários pacotes, logs e afins. Temos muito ainda a evoluir e a discutir sobre isso, mas o ganho de produtividade e agilidade é inegável e o que cada time pode entregar com isso é animal.

Estamos prontos para o futuro! Agora, é pisar no acelerador, pois com Front Hub e Tangram não ficamos atrás em nada relacionado a frontend. Essa galera entregou a melhor experiência para desenvolvedores frontend que já vi.

Se você leu tudo isso e ficou interessado em nos ajudar, contribuir e usar, deixa seu comentário por aqui para ganharmos mais força. Nós estamos trabalhando para que esses projetos possam ser abertos à comunidade um dia e que todos possam usufruir desses benefícios.