Cross-Platform Mobile Development: There’s a New Kid on the Block
It’s been several years since the iPhone was announced (June 29, 2007) and since the Android was introduced (October 22, 2008). In that time period, there have been several million applications written for these devices. To write a native application for iPhone (IOS) and Android, you used to write two version of the application—one in Objective-C or Swift for IOS, and another in Java or Kotlin, for Android. Nowadays, there is a need to be able to write the application once and run it on both platforms.
Over the years several cross-platform mobile frameworks have come out: Xamarin, Ionic, React Native and NativeScript.
Now, there is a new kid coming to the playground, and its name is Flutter. The company behind it is Google. It was inspired by Facebook’s React.js and React Native frameworks but it took a slightly different direction. One of the main differences is how it renders the user interface (UI).
When the application runs, the JavaScript definition of your UI Component is passed through a bridge and translated to a native component, such as a UIView for IOS and Activity for Android.
The bridge is a very complex piece of coding. It not only has to translate UI layout definitions between the two environments, but it also has to manage the communications back and forth between the JavaScript side and the Native side of the application. The bridge has to manage the differences between IOS and Android (see image below).
Flutter takes a different approach. Instead of using the native UI components of the different platforms, it uses a completely different UI library. Flutter uses the SKIA Graphics Library. This library uses the Canvas and event system of each platform but draws the UI components itself.
SKIA Graphics Engine is an open source library originally developed by Skia Inc. and was acquired by Google in 2005. The library is used in many products from Google Chrome, Google Chrome OS, Mozilla Firefox, Android, Sublime Text 3 and now Flutter.
With Flutter, you define a widget using the Dart language and it uses SKIA to draw the UI component (see the diagram below).
With this approach, there is no complex bridge to deal with. The code is compiled into binary code and talks directly to the device.
For more details on Flutter and why it was designed this way, check out these great articles.
We also have a 5-Part Series on Flutter Animations!