DEV Community

Cover image for Escalonando aplicações frontend
Stanley Gomes
Stanley Gomes

Posted on

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.

performance de código

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:

  1. Backend desacoplado do frontend, escalation separado;

  2. Se sua aplicação tem SSR (server side rendering) garanta que apenas as páginas que realmente precisam ser geradas no server sejam;

  3. 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);

  4. 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;

  5. 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;

  6. 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;

  7. Crie testes automatizados para garantir mais velocidade de entrega com menos riscos de quebra da aplicação;

  8. Monitore sua aplicação com rotinas automatizadas que gerem métricas e capturem erros, como por exemplo, o Sentry(https://sentry.io);

Se você conhece alguma outra técnica para otimizar o frontend, comenta aqui embaixo.


Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀

Este post foi baseado no artigo do Nagendra Prajwal:
https://www.linkedin.com/pulse/intro-scalable-frontend-what-how-write-one-nagendra-prajwal

Top comments (2)

Collapse
 
luizcrrds profile image
Luiz Carlos

Ótimas dicas Stanley, obrigado!

Collapse
 
stanley profile image
Stanley Gomes

Valeu!!