{ AngularJS para Angular 21 } - Acelerando migrações com GitHub Copilot

Transcript

1. { AngularJS para Angular 21 } Acelerando migrações com GitHub Copilot
2. Alessandra Nastassja Software Engineer @Bradesco 💜 Apaixonada por Front-end Mãe do Bolinha, Bolota e Pituco Fã de jogos de terror e universos fantásticos @nast.dev 🐱🐱🐶 alessandra-nastassja 🎮
3. A história do Angular Do AngularJS para Angular 21 + ❌
4. Resultado ? 🏦 Bancos Empresas adotaram em massa 👩🏽‍💼 Seguradoras 🇧🇷 Governo 📞 Telecom 🛍️ E-commerce
5. Mas por quê? { AngularJS 😰}
6. custo de manutenção performance "Toda empresa tem um sistema que ninguém quer mexer." dificuldade para contratar dependências antigas
7. Por que é difícil? { Migração 🥴}
8. "Mas, não basta atualizar a versão?" Arquitetura mudou completamente!
9. 2,4,5,6,7,8,9,10.... = responsabilidades Não é uma evolução linear. É um novo modelo arquitetural. Estamos mudando o modelo mental da aplicação
10. Controller Component AngularJS Angular 21
11. O que realmente mudou ? AngularJS Controllers $scope ❌ Directives ng-if, ng-repeat Angular 21 Components Classe + Binding + Signals Control Flow @if, @for Modules Standalone JavaScript TypeScript
12. Antes de migrar, precisamos entender o legado A migração começa antes do código Dependências Módulos/ features Framework/ Libs Testes Bibliotecas Acoplamentos e integrações
13. E aí começam as surpresas… Até as dependências podem ter sido descontinuadas
15. Não estamos migrando apenas código Estamos migrando... arquitetura + dependências + devops + testes + regras de negócio
16. Mudou! O que fazer agora? { Estratégias de migração 🤔}
17. A estratégia depende de definições além do código Vantagens Big Bang AS-IS → Angular 21 ✅ Trade-offs ❌ Arquitetura limpa ao final Alto risco, rollback complexo Incremental AngularJS e Angular convivem Entrega contínua e menor risco Maior complexidade operacional Strangler Fig Novas features já nascem em Angular 21 Evolução gradual Migração mais longa
18. A estratégia depende de definições além do código Vantagens Big Bang AS-IS Incremental ✨ Strangler Fig ✨ → Angular 21 ✅ Trade-offs ❌ Arquitetura limpa ao final Alto risco, rollback complexo AngularJS e Angular convivem Entrega contínua e menor risco Maior complexidade operacional Novas features já nascem em Angular 21 Evolução gradual Migração mais longa
19. 🤖} O que é e onde entra ? { Copilot
20. Um assistente de IA para desenvolvimento de software que ajuda o desenvolvedor Entender Planejar Migrar Testar Refatorar Explica código Sugere estratégia Converte código Gera testes Sugere melhorias Podemos usar como uma ajuda nesse processo
21. Decide arquitetura Valida regras de negócio O desenvolvedor continua tomando decisões O Copilot acelera Revisa código Entrega qualidade
22. Mas como medir essa aceleração? Para avaliar se houve ganho real, podemos observar: Tempo Qualidade Esforço humano Retrabalho Velocidade de entrega Aderência Custos Fontes: GitHub Research (2024); DORA State of AI Assisted Software Development (2025); METR early-2025 study + uplift (2026)
23. 🤖💜 } Vamos para o código { Demo
24. Fluxo da demo ☀️ Entender Documentar o legado 🌇 Comparar AngularJS x Angular 21 🌃 Migrar Lógica + template 🌙 Validar (bônus) Build + testes + comportamento Quer testar ? Projeto AngularJS Tenha um componente legado Contexto Código + dependências + regras Copilot Analise antes de migrar Defina as etapas Build + testes + comportamento Projeto Angular 21+
25. 1. Análise do legado Entender o comportamento antes de migrar O que precisamos descobrir? Estados e dados Regras de negócio Validações Fluxos e eventos Dependências Integrações
26. # 1 Prompt (Entender Angular JS)
27. 2. Plano de migração Transformando a análise em um plano de ação. 1. Analisar MainCtrl e dependências Considerações 2. Documentar comportamento 3. Definir estratégia de migração 4. Implementar comportamento Angular 21 5. Migrar template 6. Ajustar dependências 7. Validar resultados Manter a regra de negócio existente Migrar de forma incremental Usar recursos do Angular 21 Não inventar funcionalidades Acompanhar testes e validações
28. # 2 Prompt (Planejar Angular 21+)
29. # 3 Prompt (Migração da lógica)
30. # 3 Prompt (Migração do visual)
31. 3. Antes → Depois Do AngularJS para Angular 21+ Principais mudanças → Controller Component $scope Propriedades/estado Funções do $scope Métodos das classes ng-repeat @for ng-if @if ng-click (click) JS TS → → → AngularJS (controller) Angular 21 (component) → → →
32. Prompts utilizados na demo Estrutura dos principais prompts (resumidos) Análise do legado Comparação Migração Templates "Analise os arquivos AngularJS e documentação de regras de negócio, validações, fluxos e integrações" "Compare a documentação Angular com Angular JS" "Migre a lógica do controller para o component Angular" "Migre o template e ajuste as dependências visuais, convertendo as diretivas"
33. 4. Validação Como sabemos que funcionou ? Build Testes Comportamento Projeto compila sem erros Testes passando Funcionalidades mantidas Implantação Gates e build/deploy passando Compilar não é estar correto Valide o comportamento da aplicação, não apenas o código
34. Principais vilões no uso da IA O que pode dar errado? Limitação de contexto/ tokens Alucinações Falta de contexto Modernização excessiva Código correto, comportamento errado Testes insuficientes
35. Boas práticas 01 Dê contexto 02 Migre incrementalmente Mostre o que a IA precisa saber Divida a migração em etapas Código Dependências Padrões Quanto melhor o contexto, melhor a resposta Regras de negócio Component Feature Integração Evite migrar tudo de uma vez 03 Valide o resultado 04 Revise antes de aceitar Não confie apenas no código gerado A IA sugere e executa. Você decide Build Testes Compilar não é estar correto Comportamento Arquitetura Qualidade Regras de negócio Entenda o código antes de aprová-lo
36. A IA acelera. A engenharia dá direção. “A parte difícil de construir software está na especificação, no design e nos testes.” - Fred Brooks
37. Dúvidas ? Vamos conversar <3 Muito obrigada!
38. Referências Angular JS - Rodrigo Branas Copilot vs Agentes de IA Hands-on: IA com eficiência, menos tokens e mais valor Imersão GitHub Copilot - Bradesco GitHub Copilot Dev Days GitHub Copilot Challenge Workshop Copilot Chat - Unibrad