Uma aplicação web é, essencialmente, um gerador de HTML. Mesmo uma aplicação moderna usando React.js, no final das contas, tem que gerar o HTML que será renderizado pelo navegador.
Eu sei que pode parecer uma enorme simplificação. Mas é isso mesmo: disponibilizamos dados, formas de criá-los, modificá-los e apagá-los — o famoso CRUD — em páginas HTML, utilizando textos, botões, formulários etc.
Claro que o que ocorre por trás é muito mais complexo. Mas o que importa para o usuário é o que ele vê, o HTML.
Por isso quero fazer você pensar na jornada do nosso usuário: do momento em que ele navega para uma página da nossa aplicação até as informações que ele procura aparecerem na tela.
Cenário
Imagine que o usuário clicou no botão de créditos, que redireciona para a página de billing da nossa aplicação, onde ele pode ver a quantidade de créditos gastos e disponíveis em sua conta.
Digamos que seja uma aplicação em um framework fullstack com server-side rendering, como Rails ou Laravel, para simplificar o exemplo.
Em suma, o fluxo seria assim:
- Usuário clica no link de
créditos. - O navegador faz uma requisição para a rota
/creditos. - Um servidor web (como Nginx, por exemplo) recebe essa requisição e a encaminha ao processo da aplicação.
- A aplicação lê a rota da requisição e determina qual controller deve processar.
- O controller, ou métodos auxiliares, fazem a autenticação do usuário com os cookies enviados na requisição. Também pode fazer autorização, verificando se o usuário tem acesso a esse recurso.
- Uma vez autenticado, o controller busca os dados necessários para apresentar ao usuário, executando queries SQL no banco de dados.
- Uma página HTML é renderizada, recebendo as informações do controller — como a quantidade de créditos — para apresentar ao usuário.
- A aplicação responde à requisição com o HTML final.
- O navegador renderiza o HTML para o usuário com a sua quantidade de créditos.
Esse é um fluxo simplificado do que acontece quando o usuário clica em um link na aplicação; é o mínimo que o desenvolvedor deve levar em conta enquanto está programando.
Utilizando esse fluxo, vamos listar algumas práticas que são essenciais para garantir o resultado esperado.
1. Segurança
A segurança deve ser uma prioridade constante para o desenvolvedor em qualquer aplicação web. Parte de coisas mais difundidas, como utilizar HTTPS (que já é padrão em qualquer aplicação), a pontos mais técnicos: algoritmos de hash de senhas, falhas conhecidas (SQL Injection, CSRF e outros) e configuração correta de cookies.
Nesses momentos, utilizar frameworks como Rails e Laravel se torna uma opção mais segura do que desenvolver do zero funcionalidades que podem abrir brechas de segurança. Esses frameworks já vêm com configurações e implementações padrão muito seguras, evitando que um desenvolvedor sem experiência cometa erros que podem comprometer a segurança da aplicação.
No nosso fluxo de exemplo, isso pode afetar os passos 5 (com cookies mal configurados, CSRF) e 6 (SQL Injection), por exemplo.
2. Performance
Entender os passos desse fluxo é essencial para analisar a performance de uma aplicação. Sem saber exatamente o que está acontecendo e onde estão os gargalos de performance, é impossível saber onde devemos melhorar para entregar uma melhor experiência aos usuários.
Quando alguém reclama de lentidão, pode ser problema de rede, sobrecarga no servidor web, sobrecarga no servidor da aplicação, queries sem índices necessários, queries excessivas em loop (N+1), JavaScript lento no navegador, imagens ou arquivos pesados, ou muitas outras possibilidades.
Por isso é importante utilizar ferramentas focadas na análise de performance em todas as camadas, como o New Relic, que consegue medir o tempo das requisições em cada nível: rede, aplicação e banco de dados.
3. Erros
Erros podem acontecer a qualquer momento em uma aplicação web. Na maioria das vezes é alguma situação que não foi testada (manualmente ou de forma automatizada) durante o desenvolvimento de uma funcionalidade.
Por isso é muito importante utilizar ferramentas de monitoramento de erros, como o Sentry. Elas avisam quando um cliente recebe um erro ao utilizar a aplicação, guardando informações importantes para depurar o que aconteceu: stack trace do erro, variáveis de ambiente, parâmetros da requisição e, até mesmo, a linha do código que gerou o erro.
Além disso, é importante ter uma suíte de testes da aplicação. Vamos entrar em mais detalhes a seguir.
4. Testes
Testes são essenciais em uma aplicação web, ou em qualquer software. Falando especificamente em testes unitários, eles são um conjunto de pequenos cenários de código que simulam situações na aplicação, como criar um usuário, acessar determinada página etc.
Ter testes é importante porque eles garantem que determinadas funcionalidades da aplicação realmente funcionam como esperado. Isso dá mais liberdade para os desenvolvedores mexerem na aplicação, porque sabem que, se algo que fizerem quebrar o que já estava funcionando, os testes vão falhar apontando exatamente o que está errado.
Isso foi uma introdução simplificada sobre testes e sua importância. Podemos falar mais sobre eles no futuro.
Conclusão
Aqui falamos de alguns dos principais pontos que são muito importantes no processo de desenvolvimento de aplicações web. Foi uma introdução a um assunto que envolve várias áreas da computação, como redes, programação e banco de dados.
Se você gostou deste artigo e quer ver mais conteúdos sobre melhores práticas, conte pra gente quais temas e dúvidas você gostaria de ver abordados em nossos próximos posts.
Gostou deste artigo? Compartilhe: