INSIGHTS Why we build the ABOUT YOU app with Flutter

The history of the ABOUT YOU app

When we started developing our own app in 2015, we simply had our mobile website embedded in a Cordova layer. In 2017 we switched to React Native. We were already using React for the ABOUT YOU store and website and loved the concept behind the library, with Redux as the state container and Redux saga as the sync layer. At that time we also switched to React and Typescript with all teams to develop components and interfaces as clean as possible. However, the usage of our app and accompanying feature requests grew at such speed that we could no longer meet the demands using our previous setup. The more maintenance work had to be done on the app, the more complicated it became. Dependency management using npm in conjunction with native libraries constantly led to problems. Redux Saga, while very handy at first, reached a certain point where it became more and more difficult for our developers to understand which action did what. In retrospect, it was probably just our own fault for not thinking more carefully in advance about how to best set up Redux Saga for our use cases - at some point it seemed like we had missed the jump. 

The ABOUT YOU App when it was still written using React Native.

Especially during the formation of ABOUT YOU, we had rebuilt the app many times - this also went hand in hand with reduced code quality. At that point, it was simply more important to us to get new features live for customers quickly than to achieve perfect stability. React Native doesn't have the best performance in itself because, unlike true native apps, changes always have to be translated through an interface - the React Native Bridge. We were definitely maxed out with our sprawling architecture. Our startup times were extremely bad. Some views were very slow to respond - partly due to memory leaks when the app was used for a longer period of time - and React Native itself was nowhere near as mature as it is today. 

Why Flutter in particular?

That was all three years ago now. One day Sebastian Betz, our Co-Founder and Co-CEO responsible for Tech and Product, approached me and said, "Have you actually seen Flutter before?". At that time, Flutter was relatively new and there were no big reference projects yet. Sebastian said he was excited about how easy it was to build Views and how fast the startup times are. In addition, the programming language used by Flutter, DART, was surprisingly similar to Typescript, which we had been using previously. Word quickly got around our development team that Flutter could be a solution to our stalled scaling problems with the ABOUT YOU app, and everyone was eager to try it out. 

This excitement then evolved into a prototype project that I had the chance to lead. With a lot of commitment and enthusiasm from the team, we actually managed to prototype the ABOUT YOU app with Flutter within a month... We had to prioritize heavily, of course: which must-haves do we really need in the new app? Which features can we deliver later? We benefited from the fact that there were many more ready-made Flutter components that we could use for our project than we had suspected with our React Native experience. 

After the successful proof-of-concept, we then decided to tackle the full-on migration from React-Native to Flutter. In total, it took us six months to rebuild and optimize the app using Flutter. After nine months, it was then live on Flutter - with a new design and optimized UX. Looking back, it was a huge success, although I still sometimes wonder how we managed to do it in parallel with the live operation! 

Our learnings when switching from React-Native to Flutter

As this was a major project, we used the phased deployment methodology that we always use for larger roll-outs at ABOUT YOU: release first in a smaller country, and then scale it up country by country. And of course, as with any major project, not everything went smoothly with our switch to Flutter. Here are our most important lessons learned: 

Dedicated API for the app

Initially, we used our normal REST API from the ABOUT YOU store as the central data interface for the app. With Flutter, however, we were suddenly able to develop new features in the app so quickly that our backend teams could no longer keep up with providing the appropriate interfaces for us.  We then built our own Go interfaces - especially for pure, app-specific functions - in order to become significantly faster in development.

gRPC instead of GraphQL

When developing the API for the mobile app, it was very important to us, as an e-commerce app with sometimes extreme load peaks and our bad experiences in mind, to rely on the right architecture this time. Some of our developers had already started to get interested in Go and to build first microservices with it. That's when we came across gRPC and the idea of using it for the app's communication with our backend was born. 

At that time we were onboarding more countries and were not sure if all customers would have a fast enough mobile connection. After some testing, we decided to use gRPC instead of a REST API or GraphQL. This way we had the advantages of http/2 and also benefited from the significantly smaller response sizes due to binary encoding of the transmitted data. It was especially important for us to have a strong connection between the frontend and the backend - GraphQL and gRPC can basically both fulfill these requirements. However, because we needed a lot of control over the performance of the app, we decided against the flexibility of GraphQL and in favor of gRPC. Dart can also be used out-of-the-box with gRPC. Today, we even use gRPC with web-grpc for the aboutyou.com website. 

Use the webview widget with caution

Since we run a lot of logic on the server side in our checkout process, a good webview was important to us. So we wanted to be able to integrate HTML pages into our app. Flutter's webview widget was unfortunately not suitable for this purpose. Instead, we now use Chrome custom tabs (Android) and SFSafariViewController (iOS). 

Flutter E2E testing and other problems

Unfortunately, the End2End testing of Flutter never convinced us. There was a rewrite recently, but it doesn't really work stable for us. Currently, we are still working with Golden Files testing - a testing method in which reference screenshots are generated, which are then compared with the current screenshots of the app during each test. In the beginning - when the code base was still small - golden file testing gave us a lot of security with little effort. However for larger changes, it is quite tedious to maintain and unfortunately also error-prone. That is why, in addition to golden file testing, we rely on integration testing. 

Golden file testing in practice: illustrated with a failing UI test. 

Fun fact: The tests for our ABOUT YOU app are still running via Gitlab CI/CD with Gitlabrunner on Mac Minis in our office. That should be optimized soon as well.

Regarding the code itself, Flutter has some bugs that haven't been fixed for ages - the official webview widget is a good example. There was also a time when we had problems with image caching, but we managed to get them under control with workarounds. 

Conclusion 

Overall, we are very happy with the decision to switch to Flutter. At the time, we were one of the first larger companies in Europe to build a comprehensive app on top of it - today, Flutter is a reference in the app development scene. 

To conclude, a testament of our love for Flutter: the team behind the ABOUT YOU app is also the official developer of the "SignIn with Apple Plugin" for Flutter.  

Reading this article, you might have wondered how big our ABOUT YOU app team is. Back then, we started with three developers, and for the past two years there have been five of us. In the next few months, we want to double the size of our team. And if you have reached the end of this article, we might be a good match! We are looking forward to receiving your application on our Dart / Flutter Developer (m/f/d) - Shop Applications opening :)

*numbers from ABOUT YOU's Quarterly Statement for Q3 2021/2022, ending on 30 November 2021.