Techletter: Scaling cross-platform mobile development using Flutter

Dustin Danielle Catap at ERNI Philippines offices.

Cross-platform crossroads

Earlier this year, I had a project that required an MVP mobile app to be developed in under a month. It was for a local sports team that enable their users to keep track of the players/game statistics and provide a way for them to watch the game either real-time or via replay.

Here at ERNI, we primarily use Xamarin for developing a cross-platform mobile app. Xamarin, best described as a “Write once, run everywhere, and be native”, allows you to create apps for Android, iOS, Tizen, Windows, Mac, and Linux with a native look-and-feel. Xamarin has been around for 9 years and backed by Microsoft since its acquisition in 2016.

Google first introduced Flutter back in 2015. It is a UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Although being relatively new, Flutter showed some strong points which made it worth considering from other frameworks.

Image Source: https://blog.codemagic.io/flutter-vs-xamarin-a-developer-s-perspective/

Key points to consider

  1. Developer Experience – Factors that can contribute to a developer’s productivity
  2. Minimal Platform Specialization – Write code that should look and behave the same on both Android and iOS, with a low occurrence of platform-specific issues or implementations
  3. Performance – The framework’s end product is able to perform across platforms without a loss in quality or to its user’s experience
  4. Future-Proof – The framework’s roadmap, popularity, and continuity

Developer experience

The Hot Reload feature enables a fast development lifecycle. This is built-in Flutter’s development experience in which enables you to see your changes in your code in real-time. This increases the developer’s productivity by ten-folds, as well as cutting down development time.

Flutter appears to have a better scalability thanks to Hot Reload that scales well with codebases and is more robust as compared to other alternatives. Xamarin has its own Hot Reload but it only works on UI (XAML) changes, otherwise, you have to re-compile your app to see your changes.

Other tools included are out-of-the-box UI debugging tool that works on all supported platforms and is very well integrated to any IDE of choice (Visual Studio Code, Android Studio, IntelliJ). Flutter also provides testing tools for Unit, Integration, and E2E (End-to-End) tests.

Dart, a programming language used by Google, is used to write Flutter apps. It has some similarities to C# (e.g. object-oriented, generics, lambdas, async/await), that makes any developer moving from Xamarin or any similar framework to learn Flutter with ease.

Personally, having used C# and Dart, I would still like to use the former because it’s more mature. It would be great if Flutter used C#. As a developer, the real push to why choose Flutter (or any framework in general) is the tooling and productivity. There have been times that I made something to work as I wanted in Xamarin, but it was certainly harder to get it right compared to a similar feature in Flutter.

Minimal platform specialization

Unlike Xamarin, which abstracts and uses platform-specific controls to render the UI, Flutter on the other hand uses its own controls. You don’t need to know how a button will appear on Android as compared to iOS and vice-versa. Flutter offers more built-in abstractions (such as navigation) that is platform agnostic.

The further away the framework is from the underlying platform, the larger the abstraction, the more likely that the cross-platform code will break in only one of the platforms.

When it comes to accessing platform-specific APIs (such as push notifications, hardware access), Xamarin provides an easier way because these APIs are already translated to C#. While Flutter uses platform channels to send/receive data from the underlying platform. This means that you have to write platform implementations using the platform’s native language, but most of these implementations are available by using 3rd party libraries.

Performance

Other cross-platform mobile frameworks like Xamarin and React Native relies on “bridge” that translates managed code (C# or JavaScript) to something that that the underlying platform will understand. This step takes resources and time, impacting performance.

“Native” Cross-Platform Technical Architecture

Flutter’s performance is comparable to apps written using Java/Kotlin (Android) and Objective-C/Swift (iOS). There is no “bridge” that translates Dart code, instead, it uses the previously mentioned platform channel. It doesn’t rely on code generation, but rather uses binary messages to communicate with the underlying platform.

Flutter’s Technical Architecture

Flutter is fast. Rendering is done using the hardware-accelerated 2D graphics library called Skia, no platform-specific controls. This enables mobile apps built with Flutter to render up to 60 FPS (or 120 FPS if the device is capable). Dart can be Ahead-of-Time compiled to 32-bit and 64-bit ARM machine code for iOS and Android, as well as JavaScript for the web and Intel x64 for desktop devices.

Future-proof

For now, Flutter mainly supports mobile, it will continue to expand to other platforms such as the web and desktop. Flutter for the Web is now in Beta, while Flutter for Desktop (Windows, macOS, and Linux) is in its Alpha. Google also continues to partner with platform developers (such as Canonical – the company behind Ubuntu) in order to help bring Flutter to other platforms.

One factor to consider also when determining a framework’s continuity is its community support. In early 2020, Flutter has over 90k stars in its GitHub Page (https://github.com/flutter/flutter). Not to mention also that Flutter was included to StackOveflow’s 2020 Developer Survey Most Loved Frameworks (https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-other-frameworks-libraries-and-tools). C# is popular, but sadly Xamarin is not. Don’t make the mistake of combining the language and framework as one.

Image Source: https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-other-frameworks-libraries-and-tools

Some might say that Google is notable in shutting down the products they made. This is one of the reasons why some developers are reluctant to try Flutter. Dart has been around since 2011 and is not only used in mobile, but also for backend or web development. There are also Google apps that are built using Flutter, most notably Google Ads, Google Stadia, and (just recently) Google Pay. Not to mention Flutter will also be used in Google’s upcoming Fuchsia OS.

But if the day ever comes and Google decides to stop supporting Flutter, there is a very high chance that the community will continue maintaining it.

Are you ready
for the digital tomorrow?
better ask ERNI

We empower people and businesses through innovation in software-based products and services.