Team: AI Came, AI Saw, AI Migrated

AngularJS to Angular migration - AI Powered

The Context

• Front-End app with ~300k lines of code
• Started in AngularJS in 2014
• Started a migration process to then Angular 6 in 2018
• Currently in a sandbox of both AngularJS and Angular 14
• A lot of "compatibility" dependencies in order to facilitate the sandbox
• Current split of components:
  • 1070 TS files, 383 HTML files, 153 SCSS files in Angular 14
    • 206k lines of code
  • 394 JS files, 246 HTML files in AngularJS
    • 68k lines of code
  • 101 SCSS shared files that work for both
    • 24k lines of code
  • Percentage (file-based):
    • 27% AngularJS - 73% Angular 14

The Plan

1. Migrate components part of a central aspect from the app (2k lines of code)
2. Migrate components part of a core flow from the app (3k lines of code)

The Toolkit

1. Github Copilot (Agent mode)
2. Cursor
3. Aider with both GPT4o and Claude 3.7-Sonnet

How-To

Results after 2 days

• Use case 1 - Central aspect of the app
  • 75% of the logic was successfully migrated and is working properly
  • No unit tests during the Hackathon
    • They will be written and refined after the Hackathon
• Use case 2 - Core flow from the app
  • 25% of the logic was successfully migrated and is working properly
  • No unit tests during the Hackathon
    • They will be written and refined after the Hackathon
• Reasons for the result:
  • Use case 1 was a more decoupled than use case 2
  • Use case 1 was migrated from the start using Github Copilot
  • Use case 2 was passed through Cursor and Aider as well
  • Use case 2 has a lot more niche business logic than use case 1

Lessons learned

• Github Copilot works great with small well-structured, more standardized components
• The bigger the component, the worse it's going to perform
• When generating code with AI, developers spend most of their time reviewing and fixing
  • mostly fixing
• A good strategy for migrating big codebase applications is to first create unit tests for old components
  • When migrating, the Copilot will pick up the unit test for context as well, leading to better accuracy
• We have to be very specific in our prompts when trying to achieve a certain behaviour
• Copilots seem to also tire when using them intensely, over two days, at a hackathon. Especially when everybody is using them.

New Strategy

1. Create a unit test for the AngularJS file if it doesn’t have any

2. Run the unit test and try to have the coverage as high as possible

3. Migrate the component

4. Translate the unit test to support Angular 14 syntax

5. Run the unit test again and make sure the coverage stays the same as before

6. Functional test the component

Thank you!