Home Insights UI and Mobile Why Flutter should be your next mobile development framework
Why Flutter should be your next mobile development framework

Why Flutter should be your next mobile development framework

The promise of mobile development

Write once, run anywhere. This is what mobile application developers have long been promised.

  • One code for both Android and iOS
  • No performance issues
  • One engineering and QA team for all mobile development
  • One common user interface utilized across all platforms that is visually appealing

Today’s reality: The compromise of cross-platform development

Every year, frameworks get closer to “The Promise”, but never quite achieve it. Native mobile applications deliver the best performance, but require separate teams with platform-specific skills. Also, the maintenance of native apps is resource-intensive. Cross-platform application development requires only one team, but introduces new performance limitations. Each additional mobile platform adds more overhead, and requires more resources to support. As the code size grows, execution speed suffers.

Flutter may be the answer for cross-platform development

For mobile application development, Flutter may be the cross-platform development framework that provides the right balance of performance and resource management to finally achieve “The Promise”. We will compare Flutter with some of its competitors: Native, Ionic and React Native, to show why Flutter is the best choice.

Native code: The application development baseline

To ensure the best possible performance on all platforms, applications must be developed using each platform’s native code. The code will be specifically optimized to take advantage of each platform’s features. The block diagram in Figure 1 shows the native code interfaces that connect directly to the platform hardware.

Figure-1a

Figure 1 – Native code application

However, this approach contains significant drawbacks. Each platform you want to run the app on, requires developing a separate application, duplicating efforts. The same duplication occurs for QA and maintenance cycles. Therefore, the advantages of native code development comes at a heavy price.

Ionic: The hybrid approach of cross-platform development

Ionic, along with other hybrid frameworks, attempts to utilize some common features of multiple platforms, namely HTML, CSS and JavaScript. Your application code executes inside the platform’s native web browser as shown in Figure 2. The hybrid framework then creates a software bridge to call platform-specific services.

Figure-2a

Figure 2 – Hybrid framework

The first version of Ionic was released in 2013, supporting Android and iOS. The Ionic framework is mixed with native platform code utilizing AngularJS, leveraging CSS for styling and animation. Ionic uses Cordova plugins to gain access to the host operating system features, such as the camera, GPS, flashlight, etc.

Ionic is good, but has performance issues with animation-intense applications: modern animated UI is an Ionic weak point. Native code may be used to solve some of the performance problems with graphics, but this hybrid approach loses some of the cross-platform capabilities. This framework is adequate for applications without heavy graphic requirements, but comes up short of “The Promise”.

React Native: An evolution of the cross-platform framework

In 2015, Facebook adapted ReactJS, a tool for large websites, to create React Native for mobile applications. React Native uses familiar JavaScript, which calls native code. This allows the developer to use components written in JavaScript, as well as native code. React Native also provides many ready-to-use components to aid in application development.

Figure-3a

Figure 3 – Reactive Native framework

The React Native framework, shown in Figure 3, is a step closer to fulfilling “The Promise”, but it is still not perfect. Because a software bridge is needed to connect the developer’s JavaScript to the execution platform, performance suffers. There is constant interaction over the JavaScript bridge, with permanent JSON serialization and deserialization. This file I/O slows graphics performance, effectively disabling any fancy UI effects.

Flutter: A clean-sheet cross-platform framework design

In 2017, Google introduced its own clean-sheet design for cross-platform application development: Flutter, which they hoped would finally fulfill “The Promise”. Flutter apps are written in the Google development language, Dart, and make use of many of the language’s more advanced features. Dart is closely tied to Java, so it’s easy to learn, and more powerful than JavaScript.

Figure-4a

Figure 4 – Flutter cross-platform framework

Flutter is an open-source SDK used to create superior-quality apps for Android and iOS using a single codebase. It is designed and optimized for fast rendering and complex animations, making the UI coding even easier than it would be with native development code. The architecture is optimized for vector graphics animation. Animations can be easily run inside Flutter, even achieving 120 frames per second. Fuchsia, Google’s next generation OS, will support Flutter, in addition to supporting Android and iOS. Fuchsia’s user interface and apps are written with Flutter.

Flutter architecture

Flutter is comprised of four main components:

  • Flutter Engine: Renders low-level graphics using the Skia graphics engine.
  • Foundation Library: Flutter building blocks written in Dart.
  • Widgets: The components used to build the user interface. All graphics, text, shapes and animations are created with widgets.
  • Design-specific widgets: Two sets of widgets specific to the operating systems. Material Design is used for Android, and Cupertino Style is used for iOS.

Google has assigned considerable resources to the Flutter ecosystem, resulting in an extremely stable framework. Indeed, the framework is considered more stable than React Native, despite the latter being a more mature product. This can be attributed to Google’s long-term commitment to Flutter, and its strategic importance to the Google OS roadmap.

Both the biggest advantage and disadvantage of Flutter is the use of a clean-sheet design. By starting anew, accomplishing “The Promise” is more achievable without having to deal with the baggage of legacy code. However, it also creates a slightly steeper learning curve, since the developer must now learn a new programming language. Although Flutter is newer than other cross-platform frameworks, it has had less time to “prove itself” to the developer community.

Which cross-platform framework should I use?

Ionic versus Flutter

TopicIonicFlutter
Release date20132017
ArchitectureWebkit UI and logic
Single threaded
Run-time compilation
UI rendering inside native application
True multithreading, compiled to native
Embedded graphics engine
Development environmentJavaScriptObject-oriented Dart
Designed and supported by Google
PerformanceLow. Graphics and animations rendered through native browser using WebKitClose to native for logic
Better than native for UI, and animations
UILimited to WebKit HTML/CSSPixel-perfect replica of iOS and Android
C/C++ layer for rendering 120fps
Custom UI controls based on vector-graphic animation
Support/QualityDependent on community forums
Slow bug fixes
Developed and supported by Google
Frequent updates by Google
FutureUnknown. Dependent on community supportStrong long-term commitment from Google
Used in Google’s next generation OS, Fuschia

React Native versus Flutter

TopicReact NativeFlutter
Release date20152017
PerformanceNative UI components
Requires constant interaction over JavaScript bridge with permanent JSON serialization and deserialization (This disables fancy UI effects)
Draws all UI itself
Superior performance of 120fps for animations
Independent from platform UI
Possible to instantly switch to Android UI on a iOS device
UI / UXStandard iOS / Android controls onlySupports vector graphics animations with Flare. This enables fancy UI, even better than native controls
Development environmentJavaScript is a weakly-typed language
Single threaded
Familiar to JavaScript programmers
Dart is a strongly-typed language
Multithreaded
Some learning curve for an Android developer
Easy integration with native code
Supports functional and object-oriented paradigms
SupportCommunity supported
Core by Facebook
Google
Excellent documentation and constant promotion

Flutter offers the strong support and backing of Google with a highly-attractive UI and excellent native performance. Once the developer is up-to-speed using the Dart programming environment, development time is faster than any alternatives.

If you’re starting a new ground-up project, Grid Dynamics recommends investing resources in the Flutter ecosystem. Grid Dynamics is experienced in application development and can assist you in your next project. Please contact us at +1 (650)523-5000.

Get in touch

Let's connect! How can we reach you?

    Invalid phone format
    Submitting
    Why Flutter should be your next mobile development framework

    Thank you!

    It is very important to be in touch with you.
    We will get back to you soon. Have a great day!

    check

    Something went wrong...

    There are possible difficulties with connection or other issues.
    Please try again after some time.

    Retry