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!!

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now