[리액트] from react native to Flutter

The Early Days

Reflectly was built using React Native in the summer of 2017. At the time React Native was a relatively new and exciting technology. It promised high productivity and cross-platform mobile development with familiar web technologies. Our team had a strong background in web technology and therefore felt immediately at home using React Native to build Reflectly. Following a few intense weeks of development, we submitted the first version of Reflectly for iOS to the App Store.

Having successfully released Reflectly for iOS, we wanted to release Reflectly for Android as soon as possible. It should be easy, right? React Native is, after all, a cross-platform framework.

Reflectly did indeed run on Android, but it was far from what we had hoped it would be like. Overflows failed and as result scroll elements went missing and shadows were cut off in strange ways. Furthermore, animations turned out unbearably sluggish.

We spent a whole week fixing the Android experience — yet still, we had to completely remove shadows and animations from the Android app to make it usable. For the following 6 months, we were caught in an awful development cycle of building for iOS first and fixing for Android second. The promised land of cross-platform mobile development was an illusion. We felt deeply frustrated by this burdensome process.

A Leap of Faith

During the third quarter of 2017, Reflectly grew steadily in popularity. We went from hundreds of new users daily to thousands of new users daily. Everyone loved the app — but as it grew in popularity, so did our frustrations with React Native.

Eventually, we made a decision, in early 2018, to abandon the existing codebase altogether and rewrite everything. The big question was; what to invest in?

A complete rewrite in React Native was out of the question, primarily because of past experiences. I had come across Xamarin in the past but was hesitant to use a technology that used to be proprietary. We thought the safest solution would be to build two new native apps, however, with only a couple of engineers on the team, this option seemed overly daunting and unfeasible within a reasonable timeframe.

 

We broadened our search and stumbled upon Flutter around Jan-Feb 2018. At the time Flutter was still in alpha and therefore felt like a risky bet to use for our company. After all — we were trying to build something better than what we already had.

After experimenting with Flutter for a little while I and the team fell in love with the cross-platform consistency, near-instant stateful hot reloading, great tooling and high performance of the platform. Upon deeper inspection of Flutter’s source code, I was delighted to find easy readable and well-documented code.

Our biggest concern was the lack of platform packages for local notifications and in-app purchases. Though, these issues seemed quite solvable using platform method channels.

We liked Flutter so much that we decided to take a leap of faith and commit ourselves to rewrite the entire Reflectly app in Flutter within 2 months.

Building the Future of Journaling

Getting started with Flutter was easy. We quickly managed to put together the basic views of the UI. Gone were the days of discrepancies between what was rendered on iOS and Android. It felt great knowing that the UI would be rendered consistently across platforms. No more wasting time writing error-prone platform specific code.

The tradeoff? Being forced to produce better code that takes slightly longer to compose.

Flutter apps are built using Dart. Like Java but unlike Javascript, Dart 2 is strongly typed and object-oriented. Unlike Java, Dart is easier on the eyes and feels more lightweight. Coming from JavaScript, it does take time to get used to the class hierarchies and static typing in Dart. That being said, I feel that the additional effort is well worth it in the long run — maintaining and refactoring our codebase has never been easier and safer.

 

Midway through our sprint, Flutter reached beta and the confidence in our platform choice spiked. It was invigorating to see others starting to do projects using Flutter and share the same excitement for the platform.

The rewrite took 1 month longer than we anticipated. The delay was not caused by technical difficulties but rather our desire to polish the app and build our own state management solution. Overall it has been, and still is, a pleasure to work with Flutter. We look forward to using it in the future.

Flutter in the Wild

By the end of May 2018, Reflectly 2.0 was ready to be released and we began rolling out Reflectly 2.0 for Android on Google Play and submitted Reflectly 2.0 for iOS to the App Store review process.

Using Firebase Analytics and Sentry we meticulously monitored the release for any unforeseen issues as it was being deployed to new and old users. Despite Flutter’s beta label, we did not, and have not, seen any major issues using Flutter in production across hundreds of thousands of users, running on a multitude of different iOS and Android devices.

Over the course of the past few months, we have received widespread acclaim for Reflectly’s newfound slickness and design which we do to a great extent contribute to Flutter. Our development process is no longer fragmented by platform and we have moved from biweekly releases to weekly releases.

Reflectly was recently featured in the US App Store, which raised our new daily users count to 8.000. Here’s a sample of some of the wonderful words our users have to say about the new Reflectly.

 

Our Wishlist

We wish to see more mature plugins for platform integrations. Although it is easy to develop new platform plugins, it would be great to see more all-encompassing packages for these commonalities. Fortunately the Flutter team and community is already making great progress in this area. Many platform functionalities are already covered by the packages maintained in the official Flutter Plugins repository.

At a higher level we would love to see more discussions and work around state management, persistence, and remote data synchronization as these still prove to be troublesome for those of us who are not using Firebase’s Cloud Firestore. Redux and similar libraries have been ported to Flutter but they do not seem like a great fit for Flutter-specific constructs such as the awesome StreamBuilder widget. We hope to see more Flutter-centric solutions to these problems in time.

We’re hiring! Do you want help people live better lives and work on a large scale Flutter project full-time? Send me an email at daniel@reflectly.app to get in touch.

 

 

medium.com/reflectly-engineering/reflectly-from-react-native-to-flutter-2e3dffced2ea