ł ukasz Kosman and Jakub Wojtczak

Original text: medium.com/swlh/lesson…

In the past 24 months, we have spent 17.193,00 hours completing 10 commercial applications with Flutter. This article will share our insights.

After reading this article, you will learn:

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

It’s now been two years since we started developing our first commercial app on Flutter on LeanCode in July 2018. When I first learned about Flutter, I was still skeptical despite its promise, Mainly because of the negative experience we had with our recent investment in Xamarin. Since our team is always looking to use some exciting new technology in projects, we want it to prove that it can bring real value to customers.

It was an agricultural project, dealing with herd management, and it was a very interesting and typical project where the administrator used the system to calculate the needs for the barn, and our team thought it was a good insight from the UX perspective.

In two days, they proudly demonstrated a proof-of-concept that proves how easy it is to animate and can give you a great and smooth experience. Eventually, this has evolved into a full-scale animation, which you can see here:

With this joy, I was convinced that Flutter was worth trying.

Initially, we didn’t commit ourselves 100% to Flutter, but worked in parallel with the React Native project. I was pessimistic about writing the first Google Maps implementation without official support from the Flutter team. You can learn more about your experience and the difficulties associated with writing your first commercial application in Flutter here. In the end, we delivered a relatively simple application with less than 40 views and less than 500 hours of Flutter development.

Since we delivered our first application and collected five star reviews from customers, we felt that we should start recommending Flutter more actively to customers. Starting in May 2019, we decided that Flutter would be our first choice for mobile technology. In the meantime, we will stop developing applications on different frameworks.

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

Flutter faster

We don’t discuss the theoretical approach here (look up Bran De Connick’s paper here), although that would be interesting. We then rewrote our Xamarin and ReactJS based apps and compared them. Using the same API on the back end, we reduced our time by 33% compared to Xamarin (667h vs 987h) using ReactJS (486h vs 704h). That’s 31% less time.

Stop and think about the numbers. This data answers how to build mobile applications faster and cheaper (using Flutter). With the economy in the doldrums, it is increasingly important to deliver on time and within budget. This also means you can deliver 50% more orders for the same budget. Imagine that you are a product owner, responsible for the development team’s priorities, and able to raise the budget barrier by a further 50%.

This will greatly improve the team’s creativity and the quality of the work they deliver. For a detailed analysis of the GastroJob case, check out our presentation at the Flutter Europe Conference, or check out our case study here.

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

90% of our code will not be written twice on both native platforms. It saves 90% of the time compared to native application development and frees up a lot of creativity due to consistency and the team uniting around a goal rather than splitting into two native streams. In addition to sharing business logic and user experience, there are a number of off-the-shelf libraries available that provide additional benefits. 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, etc.). Second, it is easier to integrate with many popular services such as Firebase, maps, payments, social logins, analytics, crash reporting services, etc. As a result, you only need to write code twice (one for iOS and one for Android) when writing platform-specific custom code. But even then, bridging between Dart and native code is reasonably simple, as explained later in this article.

More importantly, if you factor in quality, you can save more, so the application is less expensive to maintain in the long run. In fact, we studied bug fixing times in all projects built with Xamarin, React Native, and Flutter, and Flutter typically takes 8-10% of bug fixing time. React Native requires 7-14%, and Xamarin requires 11-23%.

Working with UX/UI has never been better

During the Flutter project, there was a need for collaboration between UX/UI designers and developers. Perhaps it’s because they don’t have to undertake such tedious local adaptations that their creativity loosens up. However, you could expect the same result from the React Native team’s experience, and it wasn’t. When we dug deeper, we found that Flutter brought pure joy to developers who could write beautiful interfaces that previously would have been slowed down by the added burden. As a result, they are more willing to collaborate, and we have seen pair programming sessions begin as designers and developers work together to do field experiments. After several such interactions, and thanks to a powerful theme engine, the team was able to provide the application with an adaptive design language that not only looks great in Figma or Adobe XD, but also provides the best user experience and a sense of coherence. Correct design sequence. It is also interesting to see how this consistency can be maintained throughout the life of the project. Previously, when UX/UI designers reviewed products at demo meetings, they had most of the reviews at the end of the project, changing their minds or simplifying things after hands-on experience. What is unique about Flutter is that by the end of the project, the involvement of the designers has completely disappeared, as they started at the beginning of the design cycle of trial and error. This also meant less time was spent optimizing for subsequent sprints, and this continued collaboration was reflected in a steady Scrum rate for the next release.

Animation is so easy and affordable

Implementing static views in Flutter is not only easy, but also provides many new opportunities for animation. This takes this KIND of UX-Dev collaboration to a new level, resulting in an unprecedented transition. So far, this is typical only for large budget projects. Now, thanks to Flutter, it is available to all developers. This happens because Flutter can render directly on canvas and has complete control over graphics, 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 base your drawing on default views that can change the appearance of new controls, thus building a stinky code that is platform-dependent and directly contradicts the approach shared code should not take into the deployment platform.

The Flutter app is lighter

When faced with PWA business options, PWA proved how easy it is to add shortcuts to your phone to save your website like an application. Let’s leave the user experience aside and just consider the burden of downloading the application. Yes, it’s not easy in either case. According to the SimiCart blog, the best PWA sites require users to load from 4.9MB to 11.6MB. This is much lower than the average size of our Xamarin app of 25MB, and even lower than the average size of our React Native app of 32MB, but very close to the average size of Flutter of 11MB, with all Flutter applications ranging from 9-14MB (please note, Although these numbers highlight patterns, they are not directly comparable). You have to admit that this (11MB) space is very low for the native application experience, smooth look and feel, fast response, and all the services that are typical of native applications, such as push notifications. That means there are no barriers. Users download the application and start using it as efficiently as possible with all the plug-ins and integrations. This also means that applications perform better because they can perform similar tasks with smaller code. This performance improvement translates directly into milliseconds compared to other cross-platform frameworks, giving you a faster experience in cooler applications, animations, CPU and memory usage (in fact, in cases where Flutter can provide better cold-launched applications, Even compared to Swift/Kotlin native applications).

Native code can be accessed as needed.

The advantage of Flutter is that mobile teams prefer to use native code and write some Kotlin/Swift packages because they have complete control over the native implementation, as is the case with Xamarin where 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 a native environment. With this approach, it is easy to implement specific functions, such as local payment providers or complex libraries. What’s more, even advanced functions that require biometric recognition algorithms for facial recognition or fingerprint checking can run smoothly on Flutter, as demonstrated by a banking application developed by ING Business in Flutter, The application was shown on JakubBiliński in Flutter Warsaw Meetup (link).

The concept of Flutter is very simple

Other benefits of integration with native code when we need to build a proof of concept to check the most dangerous hypothesis tests. This means we can build the smallest application to answer the most critical business or technical questions before the customer decides to sign the contract for the entire project. At this point, we cannot overestimate the function of Flutter. Each time we set such a plan for a two-day development period, we try to figure out what we can achieve in such a short time. So far, we are experimenting with various POCs, including an image detection system that supports AR (below),

Draw advanced animation from whiteboard drawings.

Establishing a fast PoC not only allowed us to show the speed of development, but also helped us provide more accurate estimates for the final project.

The developers are happy

From the point of view of building an internal team, Flutter proved to be a good choice. Initially, There were few Flutter developers because there was no professional experience. However, unlike Xamarin, where developers have C# backgrounds, in the case of Flutter, all candidates are mobile developers who have moved from a native (mostly Android) background. As Flutter became more and more popular, and the number of available candidates grew exponentially due to the activity of community organizations and the rise of regular gatherings and webinars, there are now a large number of professionals willing to seek work on Flutter projects. After years of native application development, we changed our minds. This kind of transfer is easy, thanks to the well-documented Flutter code and the availability of other libraries provided by the community. As a result, some companies that previously had independent mobile teams are investing in them around Flutter. At LeanCode, we have even organised a Flutter Boot Camp, a three-day training programme at the lakeside to provide hands-on experience and select the best candidates for an intensive, two-month study programme, where learning about Flutter is accompanied by doing some non-commercial projects. We were surprised to note that after 9 weeks of training, the developers were ready to work side by side with their colleagues who had started coding in Flutter from an early stage. Such a short learning cycle proves that choosing to switch from native apps to Flutter is not a revolution from a business owner’s perspective, but rather an evolution in which internal teams can play an important role.

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

If you consider that this happens even before Flutter for Web or Flutter for Desktop is released in production, it suggests that Flutter for Mobile is valuable enough to compete in this very advanced market. Regardless of your industry, the era of early adopters has passed and we will soon see more and more mature players entering the Flutter ecosystem. I hope this will enable us to share the lessons learned from these implementations in next year’s summary, after we have produced another 10 great applications in Flutter.

communication

Lao Meng Flutter blog (330 controls usage + practical primer series) : laomengit.com