Angular em 2025 - visão de arquiteto
Uma análise arquitetural do Angular: o que gostamos, limitações e onde gostamos de aplicá-lo.
Com o passar dos anos o mercado acabou se consolidando, na nossa experiência, em três frameworks: React, Vue e Angular. Dentre estes aquele que com o tempo se mostrou melhor manutenibilidade no médio e longo prazo sem dúvidas foi o último, assunto deste post.
Por algum tempo Angular se tornou menos falado ("hypado" talvez seja um termo mais preciso), mas em 2024 vimos sua popularidade aumentar significativamente: novo site lançado em 2023, nova identidade visual, versões e sem sombra de dúvidas um investimento maior em publicidade motivaram isto (estão chamando este momento de "o renascimento do Angular").
Neste post falo um pouco sobre nossa experiência com Angular e quando o recomendamos para nossos clientes.
Manutenibilidade
O fato de sempre ter sido um framework (ao contrário do Vue e React que nascem como bibliotecas) se paga (com excelentes dividendos) no médio e longo prazo: manter projetos escritos em Angular em nossa experiência é mais fácil e é sua principal vantagem. Essencialmente basta que a equipe conheça as convenções e como o framework se organiza para que a manutenção e evolução possa ser feita por novos membros do time.
Em nossa experiência com sistemas legados é muito comum ao lidarmos com projetos implementados em Vue ou React encontramos o padrão "framework caseiro". Na prática cada projeto nestes frameworks costumava seguir definições definidas pelo time original, que nem sempre vinham bem documentadas.
No universo frontend o conceito de framework só começou a se tornar mais claro nos últimos anos. Recomendo que você leia este texto para entender melhor a questão.
Não raro o principal problema que encontramos em projetos legados é o fato dos padrões do Angular não estarem sendo seguidos ("reinvenção da roda" desnecessária), o que é relativamente simples de corrigir: basta adequar o comportamento (quando possível) aos padrões do framework e... voilá, problema resolvido e código mais fácil de ser mantido.
Se está claro desde o início que seu projeto terá vida longa, sempre considere o uso de um framework ao invés de adotar seus próprios padrões a partir da adoção de bibliotecas (a própria equipe do React não recomenda mais isto).
Inclusive do ponto de vista de time: é muito mais fácil a adoção de ferramentas que adotem padrões abertos e aceitos por uma comunidade do que iniciativas internas, desenvolvidas por pessoas que talvez não façam mais parte do seu time no futuro.
Agora: seu projeto terá vida curta? Talvez Angular seja um excesso de engenharia (provavelmente é) e a implementação de algo caseiro, mas que funcione no curto prazo resolva seu problema de uma forma bem mais eficiente.
Ferramentas
Outra vantagem do Angular é que já vêm com tudo ("batteries included" como os estrangeiros gostam de falar) desde o primeiro momento.
- Roteamento pronto para usar.
- Renderização do lado servidor (SSR) - o que é muito útil no caso de SEO.
- Injeção de dependências com inversão de controle tal como em frameworks backend (inclusive com singletons já prontos, o que facilita muito o compartilhamento de estado).
- Templates muito fáceis de entender e poderosos na hora em que você for escrever seu HTML.
- Framework de testes que já vêm configurado e pronto pra você poder implementar testes no formato end to end (E2E) ou mesmo funcional.
- VS Code oferece excelente suporte ao framework.
- Já vêm com os scripts básicos que você precisará no seu dia a dia pré configurados: execução de testes, build, execução no ambiente de desenvolvimento.
- Live refresh com excelente apresentação de erros durante o desenvolvimento (padrão de mercado, mas está lá, e funciona muito bem).
- E a ferramenta de linha de comando (ng cli) é excelente.
Você essencialmente precisa apenas ter o Node.js instalado. Com ele você instala a última versão do CLI do Angular e... no mínimo 90% do seu trabalho está pronto.
Atualização do framework
Este é o calcanhar de Aquiles de todo framework e aqui também deve ser levado em consideração. O único momento em que foi realmente mais difícil a atualização do framework em projetos legados foi com o lançamento da versão 2 do framework: quadno o renomearam de "Angular JS" para simplesmente "Angular".
Houve algumas quebras de compatibilidade mais sérias ali. Da versão 2 à 19 a situação ficou mais fácil. Há inclusive um site que te guia na atualização do Angular da versão 2 até a última, que pode ser acessado neste link: https://angular.dev/update-guide
Quanto menor for a quantidade de dependências externas do seu projeto e quanto menos você e sua equipe desrespeitarem os padrões do framework, maior a sua chance de sucesso nestas atualizações.
É preciso ter muito cuidado em relação a qual dependência você irá incluir em seu projeto. Recentemente iniciei um usando Angular 19, por exemplo, que ainda era incompatível com o PrimeNG (recomendo que você conheça esta coleção open source de componentes, é maravilhosa).
No geral, entretanto, em nossa experiência, o processo de atualização de versões mais antigas do framework (Angular, não Angular JS) tem se mostrado um processo relativamente tranquilo. Você pode inclusive usar o CLI para te ajudar com o comando "ng update".
Visão de longo prazo do projeto Angular
Este é um risco que deve ser levado em consideração na adoção de qualquer tecnologia, especialmente se seu projeto tiver vida longa. No caso do Angular, o fato de ser mantido pelo Google pode assustar alguns, dado a quantidade de projetos que a empresa abandonou ao longo dos anos.
Ao menos até a escrita deste post (dezembro de 2024) não há sinais de que o projeto está em risco, haja visto que o momento atual está sendo chamado de "Angular Renaissance" e sua volta ao hype. Mas todo hype é passageiro, sendo assim é importante levar em consideração alguns outros indicadores:
- A quantidade de novos projetos criados com o projeto - ainda é grande, e recomendamos aos nossos clientes para iniciativas de médio e longo prazo.
- A comunidade e seu ecossistema - bem significativo (parte dele você pode ver nestas listagens. aqui e aqui).
- Dado ser tão bom pra projetos de longo prazo, a quantidade de sistemas legados que usam o sistema.
- O fato de ser open source e mantido não apenas pelo Google (importante).
Por enquanto é grande demais para cair no esquecimento. Mas sempre pode ocorrer. Alguém aqui lembra do GWT ou Polymer?
Para este presente (dezembro de 2024 e 2025) Angular não mostra indícios de que irá desaparecer tão cedo.
Curva de aprendizado
Aqui nós temos um problema: na nossa experiência a curva de aprendizado do Angular costuma ser maior que a de outras ferramentas como React ou Vue. Aliás, não é apenas "maior", é bem maior.
Isto deve ser levado em consideração na adoção do framework. Apesar do novo site (https://angular.dev) ser mais legal que o anterior e de novos tutoriais terem sido incluídos para os iniciantes, ainda temos um problema ali. Sinceramente: acho os novos tutoriais piores.
Ainda recomendo que você inicie o aprendizado pelo antigo Tour of Heroes, que vai te dar o essencial para os primeiros passos com o framework apesar de estar limitado à versão 17 (estamos na 19). Você ainda pode acessá-lo neste link.
Não pare nos tutoriais. A leitura da documentação (cabo a rabo) vai te enriquecer muito (aguardem pelo post com guia de estudos para Angular em breve aqui na Insights).
O iniciante que não entender como funciona o framework (especialmente os conceitos de injeção de dependências, formulários e componentes) irá comprometer o sucesso do seu projeto se não tiver tempo para estudar a ferramenta.
Como estratégia de ativos reaproveitáveis
Desde a sua primeira versão o Angular tem o conceito de módulos. É possível criar sua aplicação como um conjunto de módulos que, na prática, funcionam como componentes reaproveitáveis em outros projetos.
É possível então termos, por exemplo, componentes prontos para funcionalidades recorrentes em seus projetos tais como autenticação, restauro de senha, layouts, etc.
Se sua equipe tem a prática de ativos reaproveitáveis entre projetos, Angular se mostra uma alternativa bem interessante.
Cuidado também para não confundir ativo reaproveitável com framework caseiro. Seu ativo se baseia em um framework que é o Angular, ele não deve em hipótese alguma mudar os padrões do framework, caso contrário você se meteu em uma enrascada.
Resumindo
Meu objetivo neste post foi apresentar, do ponto de vista arquitetural, quais os principais pontos que levamos em consideração na adoção do Angular em alguns dos nossos projetos. Não foquei em recursos do framework (e há vários e maravilhosos, como os formulários (Angular foi feito pra isto), renderização do lado servidor, o modelo de componentes e serviços, o cliente HTTP, reatividade, etc), mas sim em fatores decisórios.
Quatro pontos são aqui levados em consideração: tempo, maturidade da equipe, ferramental e complexidade.
Por quanto tempo seu projeto será usado pelos usuários finais? Serão anos, talvez uma década? Se for este o caso, é importante que você leve em consideração rotatividade da equipe, evolução e adoção do framework e a presença de padrões que resistam e perdurem ao tempo.
O segundo ponto diz respeito à maturidade da equipe: se seu prazo é curto e a equipe iniciante, Angular não é uma opção pois leva tempo até se tornar realmente produtivo com ele. No entanto... no médio prazo observo que aqueles que iniciaram o aprendizado pelo Angular tem mais facilidade em aprender outros frameworks. Leve isto em consideração.
Temos que levar em consideração o ferramental: o do Angular sempre foi muito bom. Há excelentes bibliotecas de componentes (pagas e gratuitas, como o Material e PrimeNG), e principalmente, boas IDEs (VS Code ou Webstorm, por exemplo), além do excelente CLI.
Finalmente, a complexidade: Angular é um framework complexo. Seu projeto realmente requer esta complexidade? Se for algo muito pequeno, talvez uma solução mais simples e caseira te atenda bem mais (cuidado com o framework caseiro!).
No frigir dos ovos Angular é apenas uma opção, e sinceramente, não acho uma boa ideia que você tenha uma opção favorita, mas sim variedade para escolher a que melhor se encaixa no seu contexto.
(ps: meu próximo post é um guia de estudos caso tenha se interessado, tá?)
Update 28/12/2024 - aqui o guia de estudos pra você aprender Angular em 2025!
