Http://medium.com/leancode/l…

Author: medium.com/@leancode

Published: 28 July 2020-10 minutes to read

ł ukasz Kosman and Jakub Wojtczak.

Over the past 24 months, we have spent approximately 17.193,00 hours on the Flutter project, creating the first 10 commercial applications, and we would like to share with you what we learned.

After reading this article, you will know:

  • What is the reason for choosing Flutter? What impact does Flutter have on budget and stability?
  • Is Flutter ready for enterprise use?
  • How does Flutter compare to Xamarin?
  • Which projects is Flutter suitable for?

It has been two years since the first commercial application of Flutter was developed at LeanCode in July 2018. When I first learned about Flutter, although it was promising, I remained skeptical, mainly because of our recent negative experience investing in Xamarin. Since our team always had some new and exciting technology they wanted to bring to the project, we challenged them to demonstrate how this could bring real value to the customer. This is an agricultural project that involves cattle management. One interesting artifact, which is typical of the industry, is widely used by breeders to calculate the need for cattle sheds, which our team thinks is a good insight from a user experience perspective.

In two days, they proudly presented a proof of concept, showing how easy it is to build the huge, fluid experience that an animated wheel gives you. Eventually, this has evolved into the full animation, which you can see here.

Simple animation example of Flutter in the Kedzia App project.

With this pleasing object, I was convinced that Flutter was worth trying.

Initially, we didn’t want to devote 100% of our energy to Flutter, so we kept the React Native project parallel. When faced with our first implementation of writing Google Maps without official support from the Flutter team, I felt this pessimism was justified. You can learn more about the experience and related difficulties of writing this first commercial application with Flutter here. We ended up delivering a relatively simple application with less than 40 views and less than 500 hours of Flutter development.

After we delivered this first app and collected five star reviews from customers, we decided that we should start recommending Flutter more actively to customers from early 2019. As of May 2019, we decided that Flutter would be our first choice in mobile technology and that we would stop participating in developing applications on different frameworks.

Since then, we have delivered over 10 mobile products and dozens of MVP/ POCs on Flutter. Now, it’s time to draw conclusions.

Flutter faster.

We’re not talking about a theoretical approach here, although that would be interesting (find Bran De Connick’s paper here). We had a unique opportunity to rewrite the application from Xamarin (client-facing mobile application) and ReactJS (Web application for restaurant managers), and the results were comparable. Compared to Xamarin, we spent 67% of the time (667h vs 987h) and 69% of the time (486h vs 704h) creating the application with ReactJS, to very much the same extent, using the same API on the back end. Stop and think about the numbers. This is the ultimate answer to how to build mobile apps faster and cheaper. In a tough economy, delivering new digital products on time and within budget has never been more important. It also means you can deliver 50% more of your backlog for the same budget. Imagine that you, as a product owner, set priorities for your development team and were able to raise the budget barrier by a further 50%.

The time it took to move the Xamarin and Web ReactJS versions to rewrite the project into Flutter.

This will greatly increase the creativity of your team and the quality of the work they deliver. For a detailed analysis of the GastroJob case, see our presentation at the Flutter European Conference, or check out our case study here.

On average, 90% of the code is shared between iOS and Android.

90% of our code is never written twice for two native platforms. 90% of the time was saved compared to native app development, and a lot of creativity was freed up due to consistency and the team uniting around a single goal rather than splitting into two native streams. In addition to sharing business logic and user experience, we can use a large number of ready-to-use libraries for the added benefit. First, they can speed up the development process by providing common logic for many different things used within the application (such as communication with the server (HTTP client), push notifications, secure storage, databases, animations, and so on). Second, it is easier to integrate with many popular services such as Firebase, maps, payments, social logins, analytics, crash reporting services, etc. Therefore, you only need to write code twice (one for iOS and one for Android) if you are writing custom platform-specific code. However, even so, bridging between Dart and native code is fairly easy, as explained later in this article.

What’s more, there are greater savings when we factor in quality, which makes the application also cheaper to maintain in the long run. Inspired by the fact that we surveyed all projects built with Xamarin, React Native, and Flutter to find patterns, we found that Flutter projects typically spend 8-10% of their time on bugs, while React Native ranges from 7-14%. Xamarin is 11-23%.

Working with UX/UI has never been better.

The collaboration between UX/UI designers and developers in the Flutter project has had some hits. Perhaps because they didn’t have to go through the tedious process of native adaptation, they set their creativity free. However, judging from the React Native team’s experience, this was also expected, and it wasn’t. As we looked deeper, we found that Flutter brought pure joy to developers who could write beautiful interfaces, whereas previously this was associated with extra burden and slowing down the pace. As a result, they are more willing to collaborate, and we are seeing the pairing of designers and developers doing field experiments hand in hand beginning to happen. After several such interactions, and thanks to a powerful theme engine, the team was able to come up with an adaptable design language for the application that not only looks good in Figma or Adobe XD, but also gives the user the best experience, as well as a sense of coherence and proper design order. It will also be interesting to see how this consistency exists throughout the project lifecycle. When UX/UI designers used to review products in Demo sessions, they mostly changed their minds or simplified things at the end of the project after experiencing them firsthand. The unique feature of Flutter is that at the end of the project, designers are completely absent because they have done their job early in the design cycle of trial and error. This also meant that subsequent sprints needed less time to improve, and this continued collaboration was reflected in the steady scrum pace of the next release.

Animation is easy and affordable.

Not only is it easy to implement some static views in Flutter, but it also offers great new opportunities for animation. This takes this UX-Devs collaboration to another level, making beautiful transitions easier than ever. So far, this is typical of big-budget projects. Now, thanks to Flutter, it is available to all developers. This is because Flutter renders naked and has complete control over drawing directly on the canvas, which allows us to create pixel-perfect images on all platforms without the additional conditional formatting required by other cross-platform frameworks. For example, when drawing with React Native, you are based on the default view, which may change the look of your new controls, so building a stinky code that is platform-dependent directly contradicts the way shared code should not be brought into the deployed platform.

The Flutter application is much lighter.

This is worth considering when faced with PWA business options and proves how easy it is to add shortcuts to save websites on your phone, just like an application. We don’t comment on the user experience, just the burden of downloading the app. Yes, it’s effortless in both cases. According to the SimiCart blog, the best PWA sites require users to download between 4.9MB and 11.6MB at load time. This is much lower than the average size of our Xamarin app, which is 25MB, and even lower than the average size of our React Native app, which is 32MB, but very close to the average size of a Flutter, which is 11MB, while all of our Flutter apps range from 9 to 14MB (as long as the

The Flutter application is lighter.

This is worth considering when faced with PWA business options and proves how easy it is to add shortcuts to save websites on your phone, just like an application. We don’t comment on the user experience, just the burden of downloading the app. Yes, it’s effortless in both cases. According to the SimiCart blog, the best PWA sites require users to download between 4.9MB and 11.6MB at load time. This is far less than the average size of our Xamarin app (25MB), even less than the average size of our React Native app (32MB), but very close to the average size of Flutter, which is 11MB, All of our Flutter applications range in size from 9 to 14mb (note that these numbers are not directly comparable, although they highlight this pattern). You have to admit that this (11MB) is extremely low for the native app experience, for the smooth look and feel, quick response, and all the typical native app services like push notifications, etc. This means that there is no barrier for users to download the app and start using all the plug-ins and integrations efficiently. This also means better performance for applications because they can perform similar tasks with smaller code. This performance improvement translates directly to those milliseconds, giving you a faster experience of cold loading, animation, CPU and memory usage than other cross-platform frameworks (even when Compared to Swift/Kotlin native apps, Flutter delivers better cold launch).

Native code is accessible when needed.

The best thing about Flutter is that mobile teams are more interested in writing some Kotlin/Swift packages into native code because they have complete control over the native implementation. For example, this is not the case in Xamarin because the final code is generated in an isolated black box. Bridges to native code are also more powerful because they are completely transparent and therefore friendlier to developers moving from native environments. Because of this approach, it is relatively easy to implement specific features, such as local payment providers or complex libraries for some niche audiences. What’s more, even the advanced features of biometric algorithms that require face recognition or fingerprint checking can run smoothly on Flutter, as it was demonstrated in a banking application developed for business by ING, demonstrated by Jakub Biliński during the Flutter Warsaw Meetup (link).

The proof of concept in Flutter is easy.

The ease of integration with native code brings an added benefit when we need to build a proof of concept to check the riskiest hypothesis tests. This means that we can build as small an application as possible to answer the most critical business or technical questions before the customer decides to sign a contract for the entire project. At this point, we cannot overestimate the power of Flutter. Each time we framed these initiatives in a two-day development period, trying to figure out what we could achieve in that short time. So far, we are experimenting with various POCs from AR supported image detection systems (below).

Gfycat.com/revolvingcl…

A proof of concept example completed in 2 days, Flutter demonstrates AR.

Through whiteboard and advanced animation.

Gfycat.com/deadverifia…

Having a quick PoC not only allowed us to demonstrate development speed, it also helped us provide a more accurate estimate for the final project.

DEV is happy.

From an internal team-building perspective, Flutter has proved to be a good fit. Initially, Flutter had few developers because no one had professional experience. However, in contrast to companies such as Xamarin whose developers have C# backgrounds, all of Flutter’s candidates are mobile developers who have moved from a native (mostly Android) background. As Flutter grows in popularity, and also thanks to a very active community that organizes regular metups and webinars, the pool of available candidates has multiplied, and there is now a significant number of professionals looking for jobs in Flutter projects who are willing to switch careers after years of native app development. Thanks to the well-documented Flutter code and the availability of additional libraries driven by the community, such career changes are relatively easy to make. As a result, some companies, which previously had their own independent mobile teams, are investing in tweaks around Flutter. At LeanCode, we are even organizing a Flutter boot camp, a three-day training program at the lakeside for hands-on experience and a two-month intensive learning program for the best candidates to do some non-commercial projects while learning about Flutter. We were surprised to find that after 9 weeks of training, developers were already working side by side with colleagues who had been using Flutter coding since the early days. Such a short learning cycle proves that, from a business owner’s perspective, making the choice to switch from native apps to Flutter is not a revolution, but an evolution in which their internal team can play an important role.

Making the right decisions about your tech stack can have a lasting impact on your business and personal career. However, few choices are so simple. Flutter has become an unstoppable movement, a force to be reckoned with, and it is growing and expanding into very conservative industries with extremely high quality standards such as banking or insurance (e.g. NuBank, ING, AXA, etc.).

If you consider that this happened even before The Release of Flutter for Web or Flutter for Desktop in production, it shows that Flutter for Mobile is providing enough value to compete in this very advanced market. No matter what industry you work in, the days of early adopters are over and we will soon see more and more mature players entering the Flutter ecosystem. I hope that this will allow us to make 10 more great applications of Flutter and share these implementation lessons in next year’s summary.

Translation via www.DeepL.com/Translator (free version)