Testing AI for Rapid Application Development
Modern technology such as AI lets developers shorten the time necessary to transform code to different technologies. Migrating to cross-platform, aside from a potential long-term cost-saving tactic, is also an opportunity for code refactoring. Having a single codebase is a great way to optimize team sizes and increase feature release frequency.
The idea to rewrite one of the native applications and test the possibilities of AI emerged when we identified a problem that established products might be running into: big team sizes difficult to maintain in the long term from the codebase maintenance efficiency and cost perspective.
We’ve analyzed this problem from the technical and business point of view and showcased potential benefits of moving from native iOS and Android codebases to one Flutter-based architecture in depth on our blog.
Artificial intelligence and increasingly more robust software development tools can help decrease the transformation time by a significant margin — that was our main assumption. The goal of this project was to check what percentage could be shaved off plus evaluate the current state of AI tools for these types of projects.
So the key questions we wanted to answer were:
- How fast can we rewrite the whole application (two separate codebases, i.e., iOS and Android)?
- What’s the percentage in cost decrease?
- How much does the use of the right techniques and AI accelerate the rewrite?
Scope of Work
A combination of AI tools was used to analyze, understand, and convert the logic and designs of the existing native codebase. Main task was to understand the underlying algorithms and workflows to make sure the new application maintained the same operational logic and performance.
Extracting Dependencies
The initial step involved extracting the list of dependencies from the Android project and inputting them into ChatGPT. ChatGPT was tasked with identifying Flutter equivalents and indicating which libraries were redundant in Flutter. Although some manual adjustments were necessary, this approach saved considerable time compared to manually researching each dependency.
Converting the Layout
Android XML layouts were converted into Flutter-compatible Dart code using ChatGPT. While the tool managed to convert most of the layout elements correctly, there were issues with text positioning and content mixing. These initial outputs served as a base, which required further manual refinement to align with the design specifications.
Desing2Code Conversion
Design elements were converted to code using Supernova.io and the Html2Dart plugin. The output code was not always up to standard, necessitating additional manual corrections. Still, these tools provided a foundation that sped up the conversion process, even if the step wasn’t entirely automated.
Managing Assets
Image assets from the original application were managed using flutter_gen, which generates code to handle Flutter assets. Flutter_genl helped automate the inclusion and referencing of assets within the Flutter project, ensuring consistency and ease of use throughout the application.
Refining & Adjusting Code
Copilot was used to assist in translating Kotlin code from the Android app to Flutter’s Dart language. While Copilot was helpful in automating parts of the translation, particularly for handling UI components and API model adjustments, significant manual coding was still required, especially for fine-tuning visual elements and behaviors like button actions and icon tinting.
Testing & QA
To verify the accuracy of the conversion, existing test cases from the native apps were adapted to the Flutter environment. We created manual acceptance tests based on these existing tests to see if the new app met functional requirements. Next, we used golden tests to detect visual regressions by comparing the rendered outputs of the Flutter app with expected results, helping to identify discrepancies introduced during conversion.
Scope of Work
A combination of AI tools was used to analyze, understand, and convert the logic and designs of the existing native codebase. Main task was to understand the underlying algorithms and workflows to make sure the new application maintained the same operational logic and performance.
Extracting Dependencies
The initial step involved extracting the list of dependencies from the Android project and inputting them into ChatGPT. ChatGPT was tasked with identifying Flutter equivalents and indicating which libraries were redundant in Flutter. Although some manual adjustments were necessary, this approach saved considerable time compared to manually researching each dependency.
Converting the Layout
Android XML layouts were converted into Flutter-compatible Dart code using ChatGPT. While the tool managed to convert most of the layout elements correctly, there were issues with text positioning and content mixing. These initial outputs served as a base, which required further manual refinement to align with the design specifications.
Desing2Code Conversion
Design elements were converted to code using Supernova.io and the Html2Dart plugin. The output code was not always up to standard, necessitating additional manual corrections. Still, these tools provided a foundation that sped up the conversion process, even if the step wasn’t entirely automated.
Managing Assets
Image assets from the original application were managed using flutter_gen, which generates code to handle Flutter assets. Flutter_genl helped automate the inclusion and referencing of assets within the Flutter project, ensuring consistency and ease of use throughout the application.
Refining & Adjusting Code
Copilot was used to assist in translating Kotlin code from the Android app to Flutter’s Dart language. While Copilot was helpful in automating parts of the translation, particularly for handling UI components and API model adjustments, significant manual coding was still required, especially for fine-tuning visual elements and behaviors like button actions and icon tinting.
Testing & QA
To verify the accuracy of the conversion, existing test cases from the native apps were adapted to the Flutter environment. We created manual acceptance tests based on these existing tests to see if the new app met functional requirements. Next, we used golden tests to detect visual regressions by comparing the rendered outputs of the Flutter app with expected results, helping to identify discrepancies introduced during conversion.
Solution
While using AI tools made a noticeable improvement in the rewrite process (around 25% decrease in project time compared to traditional development), we ran into a few problems.
Main challenges in using AI during code transformation
We took pieces of the application from either the Android version or the iOS version. But because of the inherent differences between the two platforms, this sometimes caused glitches and bugs that delayed the transformation.
Another challenge was making a decision for complex parts of code where the choice boiled down to deciding if we should just take the part of the code and transform it as is in a new technology or maybe take it a step further and do some refactoring to possibly clean up the code and remove unnecessary complexities. AI tools that could learn the code, could speed up the refactoring part, which brings us to the next point.
While many of the tools we used are very promising, we might see a significant improvement in the quality of the outputs with their newer versions. For example, GitHub’s Copilot now has a custom model integration for enterprises that lets developers train AI on the implemented code and ensure the same syntax and patterns are used all throughout. This wasn’t yet available during development.
Also, along with funding, AI tools will be able to introduce more refined automation features with significant impact on end results: speed and quality. For example, builder.io has closed a $20-million funding round with Microsoft’s venture fund, M12.
Regardless of the advances in AI tools for software development, it’s safe to say that a human developer will be a key ingredient in the foreseeable future, especially for tasks that aren’t straightforward and require a combination of business and technical knowledge.
Best Practices for Automation → Supervised Automation
Using a combination of AI models and service providers during migration can make the process smoother and outcomes more accurate. Here, multimodal models that can interpret UI layouts and config files are especially valuable. They simplify the translation of different elements into Flutter code, reducing the need for manual tweaks while keeping the app’s original design and functionality intact. When the source material is of good quality and has enough information, automation will be more precise.
That said, relying on AI to transform native iOS and Android applications into Flutter can speed up the process significantly, but only when used with some best practices in mind.
Here are the best practices for the use of AI in software development and code transformation.
Start with Prompting
Use in-context learning and n-shot prompts to train the model with examples of Flutter code that correspond to specific native functionalities.
Structure Data
Provide structured schemas of the native code and the desired Flutter output to help the model understand the task.
Use Modular Prompts
Break down the transformation process into smaller tasks (e.g., UI components, business logic) and create focused prompts for each.
Remember about RAG Implementation
Use retrieval-augmented generation to supply the model with relevant documentation and code snippets from both native and Flutter frameworks.
Build a Workflow Management Process
Develop a step-by-step workflow for the transformation process, ensuring each step is validated before moving to the next.
Create Evaluation and Guardrails
Implement rigorous evaluation and monitoring to ensure the generated Flutter code is accurate and consistent with the original native functionalities.
Consider fine-tuning the model if prompting alone doesn’t yield the desired accuracy, especially for more complex or domain-specific transformations. So this is where tools with custom models come in handy.
.png)
%201.png)
