Case Study: Migrating Jenz from React Native to Flutter

In this case study, I will give you a short overview of why the decision to transfer the existing React Native app codebase to Flutter was made, how we did it, and our experience doing it.

What is Jenz?

Jenz is an internal social network that works like your company’s live newsletter and a mobile version of your intranet. It transforms internal communications and gives your company’s culture an additional boost.

Jenz started as Q agency’s internal project. The backend was developed in PHP using the Symfony framework and the admin interface uses JavaScript. Mobile application was written using React Native by Q agency’s Javascript team.

Jenz, already from the very beginning, gained a lot of traction with its users, and soon, first clients outside Q agency started using the app.

Why did we decide to rewrite and use Flutter?

A rewrite was pending for a while, as delivering new features, as consistent delivery of new features and concurrent bug fixes had resulted in technical debt. This was due to multiple factors, the main one being that the app was based on a POC. It did go through an iteration of refactoring, but an architectural issue remained due to a lack of developer seniority on the project.

The developer’s main area of expertise was Javascript and the web platform they were still getting to know all the nooks and crannies of working in the mobile ecosystem. All of this resulted in slower feature deliveries and an increase in regression bugs. The regression bug, which is a bug that causes a feature that worked correctly to stop working after a particular event.

To secure platform compatibility, it was apparent the project should be moved to the Mobile department, but the hybrid requirement still remained. Flutter was not initially used since it was still in alpha and React Native was and is still widely used as a viable mobile hybrid solution. Meanwhile, the mobile team started migrating towards using Flutter as a default option.

How did we do it?

At first, a small team of two Flutter developers was assigned to start rewriting the app. In a little over two weeks, they managed to have a fully working proof of concept app running on iOS, Android and web. At the time, Flutter for the web was still in beta, so it was decided to go with mobile apps only, with the possibility of reusing a significant portion of code for future web versions of the app.

Two more Flutter developers joined the team in November 2020. By the end of December, the Flutter app had feature parity with React native app that had more than a year’s head start.

Despite the short development time, the app was more stable, with fewer bugs than the React native app. In January, some new features were added to the app. By mid-February, the app was thoroughly tested and ready for release. There was no room for errors because users were awaiting promised improvements. Jenz was released to production in mid-February.

After the initial release of the Flutter app development, the team was scaled down to two at first, then to just one mobile developer. As a result, one developer was able to add new features regularly, work on improving and expanding existing features, and keep the app up to date, which included upgrading most of the codebase to null safety.

A small team could develop most of the new features quickly, thanks to using many of the great 3rd party packages available for Flutter. Flutter’s support is growing rapidly, and more service providers (Firebase, Amazon Amplify…) are treating Flutter as an equal platform to native development oering Flutter versions of their SDKs.

Thanks to switching to Flutter framework, Jenz, as well as Flutter itself, have proven to be reliable, easily maintainable and upgradable solutions throughout the last year.

What did we make of the whole process?

While Flutter is not perfect for every use case, a significant percentage of apps can be developed using nothing other than Flutter and Dart, providing significant savings in development time and maintenance cost. For those cases where future features can’t be implemented in Flutter, there are several easier ways that integrate native code within flutter applications.