Escalonando aplicações frontend

Sempre que começamos a desenvolver um novo projeto de software, temos que considerar a escalabilidade de até onde e quantas pessoas vão conseguir utilizar nossa ferramenta simultaneamente. É um consenso que escalar a aplicação é um grande desafio e envolve um planejamento desde o início do desenvolvimento.

Nesse post, o objetivo é abordar os tópicos sobre dicas de por onde começar a escalar o seu código frontend. Quando falamos sobre escalar a infraestrutura (seja verticalmente ou horizontalmente), fica mais fácil de entender e executar, mas quando se trata de código, a demanda é se aprofundar mais no assunto.

Código escalável

Um código escalável tem fundamentos básicos que podemos definir como regras. Começamos definindo que o código precisa ser eficiente e como, de maneira geral, ele vai utilizar os recursos de processamento do cliente, para que ele possa ser acessado a partir do maior número de pessoas, ele precisa ter eficiência de processamento, baixo consumo de banda e responsividade.

Outros fatores fundamentais para um código escalável é possuir recursos pequenos e independentes (single responsability principle), que podem ser servidos de forma independente. Isso é requisito para facilitar manutenção e provisão de recursos.

Abaixo vou tentar listar algumas outras dicas para escalonar o seu frontend:

Backend desacoplado do frontend, escalation separado;
Se sua aplicação tem SSR (server side rendering) garanta que apenas as páginas que realmente precisam ser geradas no server sejam;
Lazy loading: Carregue apenas recursos que sejam necessários na usabilidade do usuário. Os demais recursos serão carregados sob demanda (Scripts, imagens, fontes, css);
Trabalhe com CDN e caching com eficiência para reduzir o consumo de recursos de servidor de forma inteligênte e diminuir tempo de resposta e carregamento do frontend;
Reduza a complexidade do código e trabalhe com código limpo. Dessa forma, toda equipe terá facilidade de entender, evoluir e corrigir o código, evitando bugs inesperados e indisponibilidade da plataforma. É muito importante também que você remova o código e funcionalidades que não são utilizadas;
Transite o mínimo necessário de informação nas requests para o backend para reduzir o consumo de recursos de banda e aumentar velocidade de resposta;
Crie testes automatizados para garantir mais velocidade de entrega com menos riscos de quebra da aplicação;
Monitore sua aplicação com rotinas automatizadas que gerem métricas e capturem erros, como por exemplo, o Sentry(https://sentry.io);