Modernization of Vue applications
An innovative approach
Staying ahead of the curve often involves embracing cutting-edge technologies and innovative approaches. This is what we wanted to achieve with our R&D project: using a new technology like Generative AI to help developers save time and effort when migrating Vue 2 projects to Vue 3.
Pilot project
From Evaluation to Execution
Our objective was to facilitate the migration of an existing application by employing Artificial Intelligence (AI) technology, specifically large language model from OpenAI. This approach was evaluated in a pilot project where we migrated from Vue 2 to Vue 3.
Pilot project
From Evaluation to Execution
Our objective was to facilitate the migration of an existing application by employing Artificial Intelligence (AI) technology, specifically large language model from OpenAI. This approach was evaluated in a pilot project where we migrated from Vue 2 to Vue 3.
Automating Code Migration
The AI Assistant
We initiated the project by analyzing source code and understanding migration rules. Based on this, we introduced an AI assistant to scan the legacy code file by file and generate new code that was not only functional in the Vue 3 environment but also compatible with the framework’s core architectural principles.
During this process, we noticed a significant number of plain renaming changes in the code basis. We decided to use a simple Python script to traverse all the files and apply the renaming before sending the files to the AI for further migration. By running the Python script before letting the AI handle the migration, we saved time and got more accurate results. Also costs that would have been incurred by OpenAI were reduced this way.
After the AI assistant had finished its tasks for the files we wanted to migrate, we compared the new migrated files with the old ones. This way we still had the opportunity to decide whether we want to accept the modifications or not.
Automating Code Migration
The AI Assistant
We initiated the project by analyzing source code and understanding migration rules. Based on this, we introduced an AI assistant to scan the legacy code file by file and generate new code that was not only functional in the Vue 3 environment but also compatible with the framework’s core architectural principles.
During this process, we noticed a significant number of plain renaming changes in the code basis. We decided to use a simple Python script to traverse all the files and apply the renaming before sending the files to the AI for further migration. By running the Python script before letting the AI handle the migration, we saved time and got more accurate results. Also costs that would have been incurred by OpenAI were reduced this way.
After the AI assistant had finished its tasks for the files we wanted to migrate, we compared the new migrated files with the old ones. This way we still had the opportunity to decide whether we want to accept the modifications or not.
Beyond Automation
The Human Touch
Despite the impressive capabilities of AI, we realized that developers still need to invest some effort in critical areas of the migration task, such as updating packages and refining the core files of an application like ‘main.ts’. Additionally, thorough testing of the project is crucial after completing the migration, ensuring that every feature and corner case is checked.
Beyond Automation
The Human Touch
Despite the impressive capabilities of AI, we realized that developers still need to invest some effort in critical areas of the migration task, such as updating packages and refining the core files of an application like ‘main.ts’. Additionally, thorough testing of the project is crucial after completing the migration, ensuring that every feature and corner case is checked.
Modernization of Vue applications
Lessons for the Future
The R&D project was not just a mission accomplished; it also provided us with a roadmap for the future. We learned important lessons: First, AI can expedite the development process by handling heavy repetitive tasks, and second, the importance of investing time in learning new technologies. Furthermore, the project showcased a promising future for AI-assisted solutions, where people will increasingly need to trust AI.
Modernization of Vue applications
Lessons for the Future
The R&D project was not just a mission accomplished; it also provided us with a roadmap for the future. We learned important lessons: First, AI can expedite the development process by handling heavy repetitive tasks, and second, the importance of investing time in learning new technologies. Furthermore, the project showcased a promising future for AI-assisted solutions, where people will increasingly need to trust AI.