Make way for Flutter
For all those people who think only mobile app developers can create awesome and amazing mobile applications, time to Flutter your wings.
Well, being a web developer I always fascinated about mobile app development.The only bump in my road was I had to learn two different languages also I had to write the same application multiple times for multiple platforms. That was a lot for me!
In 2013 with the emergence of hybrid technologies like Ionic what we have seen that Web App developers can also do Mobile App development. But then , one of the shortcomings of Hybrid Applications is , these applications are not as performant as Native Apps.
So , developers have to compromise between either writing the same application multiple times or choosing a common solution which would compromise the performance.
Well , fast forward 2 years. In 2015, when Facebook announced React Native we , developers saw a bright light of hope. Now, not only the applications have native like designs but also they are as performant as Native Apps.But everything comes with a price. Here the price came in the form of JavaScript bridge.
Let’s see what are the challenges that we face when we build cross platform mobile apps.
Challenges of cross platform mobile app development :
There are four challenges that we commonly face..
Native like designs :
If users can differentiate between cross platform and native applications by just seeing the app, there is no point to develop. right? So the application should look like a native app.
Smooth Animations :
“We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content.” — ZURB Foundation
What else than a jank free animation provides an informative and functional interface?
Great Performance :
To transform the bane of Hybrid App to boon for Flutter app , these apps should be as performant as Native apps.
Faster Development :
With these we need faster development.Well…
First , we will look into Flutter’s system overview.
Flutter System Overview :
Flutter’s system is organized around layers with each layer build upon the previous one.Let’s discuss the roles of every layers .
Embedder Layer :
Flutter provides layer that hosts the Dart VM and this platform specific layer gives access to the native platform APIs and hosts and the establishes the platform relevant canvas. There is also an embedder API, if you want to use Flutter like a library, instead of hosting running an app.
Engine Layer :
The Engine part of Flutter is written in C++ and it includes Skia, a 2D graphics rendering engine , Dart Runtime , Text rendering engine and more.
Skia , which is real world tested for many years in Android, Chrome, Chrome OS, Firefox, is a hardware accelerated engine and it paints directly to your graphics card, rather than being a wrapper on top of iOS and Android Native components. So you can own each and every pixel of your application and can create jank free animation or design.
Framework Layer :
The Flutter Framework is written in dart.Let’s get an idea about the framework layers.
- A bindings / foundation layer which is mostly about initial setup.
- A rendering layer which is a typical view model with long lived objects. This layer handles things like layout and painting, text editing, gestures, etc.
- A widget layer which comprises a tree of short-lived items that describes how the UI should look in a single frame. Flutter adopts a reactive programming pattern where the UI is rebuilt each time the state changes.
- Flutter is all about abstraction and making your life as a developer easier.An opinionated layer that expresses a particular design aesthetic, e.g. Material Design for Android.
Well if you are a typical developer and quickly want to make an app , you can use widgets form Material or Cupertino Layer. But if you want something out of the box you can play with animations, rendering , painting layers.
Let’s prove this claim by actually creating an out of the box animation.
I have made an application which is an exact replica of Google Pay or Tez app.It uses Local Auth for authentication . Also I used device features like Contacts and Camera.
Main challenge for me was to create the scratch card feature, at least I thought so. So I started playing around with painting, widgets, rendering layers and poof! Within a day it was done. Flutter as a framework gives you flexibility to create anything you can imagine.
So I think Flutter has overcome two of our challenges , which are to create native like design and to get jank free animation.
Let’s proceed to the next one.
Flutter Architecture :
How does Hybrid App work?
Your app creates HTML and displays it in a WebView on the platform. To access device features or Platform services, the application goes through a bridge. It is difficult for languages like JavaScript to talk directly to native code (Platform services) so the bridge does the context switches between the JavaScript realm and the native realm. Because platform services are typically not called all that often, this did not cause too many performance problems.
Limitations : Performance issues when using too many callbacks to the native code.
How does React Native work?
React Native is very popular because the it allows you to access the platform or OEM widgets using JavaScript. But it has to go through the bridge to access them. Widgets are typically accessed quite frequently (up to 60 times a second during animations, transitions, or when the user “swipes” something on the screen with their finger) so this can cause performance problems.
Limitations : Even if React Native allows to access the Platform widgets for view creation , it can cause performance problems because of the JavaScript bridge.
What’s the solution?
Now If we look at Flutter’s architecture, it includes widgets that look and feel good, are fast, and are customizable and extensible. That’s right, Flutter does not use the platform widgets or DOM WebViews, it provides it’s own widgets. With pre-compiled native ARM code your Flutter application can directly talk to native or platform code.
Because Flutter does not use any JavaScript bridge it is Fast and provides Great performance.
Why Dart ?
We have analyzed that Flutter is fast because of how it is build. Let’s see what makes it faster.
So despite of JavaScript being so popular, Flutter has chosen dart as a programming language. It may have raised some eyebrows but trust me it’s for good.
- Sound Type System similar to Typescript : Dart has a sound type system , its combination of static and run time checks, which guarantees that an expression of one type cannot produce a value of another type.
- AOT and JIT compilation : Now this is a very important reason. Dart has Ahead of time as well as Just in Time compiler. JIT (Just in Time) compiles at runtime on-the-fly while AOT (Ahead of Time) compiles before the application is deployed and launched.
AOT has the advantage of speed. So what happens is, dart code is pre compiled to Native code before even running your application with help of AOT compiler. With pre-compiled binary format, the code can be executed directly and quickly. This helps in dense computing or graphics rendering, and brings very good experience for your users. Static type allows ahead-of-time compilers to generate better code by taking full advantage of the type information that programmers write. - Single Threaded but supports async execution : Similar to JavaScript Dart is single threaded but it supports async execution with the help of event loop.
4. Tree Shaking algorithm : Tree shaking algorithm helps in only including the methods that you have used from imported libraries. Only the parts of the Flutter framework that were used are included in the final application.So even if you are using multiple libraries you don’t have to think about the overhead , it would be taken care by Dart’s tree shaking compiler.
5. Multi generational Garbage collection : Dart has a very fast, multi generational garbage collector. This is useful because Flutter follows a reactive programming pattern where UI objects are created and destroyed rapidly.
Well till now Flutter have successfully overcome 3 challenges , now what about the Faster Development ?
Stateful hot reloading :
So to get out of this kind of mess , there is a feature in Flutter called Hot Reloading. Let’s see hot reloading in action..
So what I tried to do here is , I changed the color of pay screen while I was at that screen and the change was quickly rendered within some milliseconds. So ,we are injecting updated source code files into the running Dart VM. And after doing that, App state is getting retained. The modification also did not took more than some milliseconds.
Think about how much time developers will save at the time of development.
Developers all over the world are reporting that they have seen 3 times more productivity with hot reloading.
Hot reloading being the icing on the cake Flutter has overcome all of the challenges that we commonly face.
What’s new and exciting in Flutter?
In recently aired Flutter Live event some exciting features were released.
Add to App : You might be one of the people interested in using Flutter in your daily job, but unfortunately, you cannot use it as you already have a native application that you cannot just rewrite now with Flutter.Luckily, Flutter can be integrated into an already existing application.
Platform Views : While Add To App is useful as a way to gradually introduce Flutter to an existing application, Platform Views allows us to utilise any native interfaces that are already available in iOS and Android.For instance, we can now use the native Google Maps Android and iOS SDK directly inside flutter, by the use of Platform Views!
Flutter beyond Mobile : The best thing about Flutter is you do not have to limit your self only to iOS and Android. Hummingbird is Google’s latest project that focuses on bringing Flutter to different places. It basically takes Dart code and compiles it into JavaScript, which as a result allows the code to run on any modern browser. The desktop embeds for Mac, Linux and Windows are being polished as per the demonstration at recent Flutter Live event organised by Google.
Flare Integration : Flare, a tool that helps developers to make and export 2D vector designs as well as animations right from the Flutter itself. This means you can now interact with Animations also.
Flutter in comparison to others :
Write Once Use Everywhere
Performance
Accessing Device Features
Rich pre-styled components
Phew!!! Lots of theoretical things. right?
Now it’s time to see if companies are trusting flutter with their applications.
Who is Using Flutter?
All over the world many companies are using Flutter .Top mentions would be Alibaba(Xiyanyu App), Hamilton Musical, Abbey Road Studios, Tencent. If you want to know more, follow the link https://flutter.dev/showcase.
If any one is wondering, Here is a link to Flutter Live Event.
Hello everyone!! I am Debasmita. I fell in love with Flutter a long time ago and I am head over heels now. I work at Bounce. We as organisation keep exploring new technologies .
If you like this article please give a 👏 or 50 !! Also share your thoughts on comment section. Cheers!! :)
Resources
