Migrating a bunch of old Ionic Framework V2 Apps over to a new Flutter App

Viewed 310

I have a bunch of old Ionic Framework V2 apps made for android and now I want to migrate these apps over to a Flutter app. The thing is that my Ionic app uses many JS libraries which I'm not sure if they are compatible with Flutter as it is Dart based.

But I've read that Dart just compiles into javascript. What is the best route to take to migrate these Ionic apps over to Flutter while maintaining the usage of these JS libraries. I definitely will not be able to rewrite these libraries as they are 3rd party.

What is the tools or functions I should be looking at to do a test migration of my Ionic apps over to Flutter?

2 Answers

Overview

This will be relatively complex piece of work. Here's what I would recommend (better options first), but it really depends on your project, why do you want to migrate to Flutter?

Options

  • Rewrite your application in Flutter, and use similar-featured dependencies from pub.dev. You have come across Flutter for the benefits that it provides. Achieving your goal (re-using old JS code) brings no actual Flutter benefits. Hot reload and DevTools won't be useful, you don't write code in Dart, you still have NPM and Javascript/Typescript.
  • Re-using older non Dart application code in your Flutter app the most complex thing you can do, and here is some high level options which will not necessarily show you the path easily:
    • Use flutter-js: relatively new library (it had 3 GitHub stars in early 2020, now it has 221), which might not support the functionality you need. Requires investigation. This way you can run JS code in your Android app. You could just use the non UI code, and implement everything else in Flutter.
    • Embed the ionic app into your Flutter app. Not sure if this is feasible, but it will require a lot of research. e.g. is it possible to embed an ionic application within a flutter application?
    • Embed both the ionic app and the Flutter app into an Android project: using Flutter's "Add to app" feature. A lot of complexity with sending data between Android, ionic and Flutter.

Conclusion

Without knowing much detail about your app or goals, I would pick #1. Larger apps might find the cost of embedding the original Ionic App to be cheaper than the cost of rewriting initially and could gradually migrate. However, I would warn that this area of Flutter with Ionic is not as well explored so you might face difficulties.

Migration from native Android app to Flutter is easier than Ionic app to Flutter, because you can embed Flutter in different parts of your app. Also, the native Android developers probably understand Android much better than Ionic developers, which is a big advantage to doing weird/unusual things like this.

PS: Marian's answer is kinda wrong: you want the code to run on Android, not in browsers. The answer doesn't address the issue where once you compile your Dart code to JS, you can't run it on Android.

Dart allows having a Javascript interop, which can be used to call JS libraries. More about the JS interop can be found in the official documentation.

By default, you are responsible for writing the interop yourself and the package:js package only gives you tools, such as annotations and functions.

There is a tool called js_facade_gen, which seems to be able to generate Dart-JS interop code from any library. For example the chartjs library claims to be generated using this tool, although the tool seems to be not maintained anymore (last update 2 yrs ago).

Related