Flutter: what all the fuss is about
Flutter is Google’s open-source mobile application development SDK for crafting high-quality native applications for Android and iOS in record time. Google is here with a new way to build fast, attractive mobile apps that helps developers to break away from “cookie cutter” apps.
Just like Android, Flutter is an open source SDK.
As with the announcement of Flutter Release Preview 1, everyone wants to know what makes Flutter different, or need to push all other native tools aside and start to focus only one tool-chain — The Flutter Platform and SDK from Google. What is new and exciting about Flutter? Or Why Flutter? is a fair question, and this article is about to answer it from a technical viewpoint — not just what is exciting, but why.
Flutter
Flutter, a cross-platform framework, designed to address both the Android and iOS platforms. It’s based on Google’s own Dart programming language with a rendering engine based on the Skia Graphics Library, the same thing Chrome used to draw pixels on a screen. There’s an IntelliJ IDE for Flutter, just like Google has with Android Studio. And Google is also using Flutter in its upcoming Fuchsia OS.
Interesting right.
Flutter Epiphany
Flutter removed all the platform specific UI bureaucracy and provides a reactive-style views like React Native. And it takes a different approach to avoid performance issues caused by the need for a JavaScript bridge by using a compiled programming language, namely Dart. Another factor that makes Flutter shine is the tooling. When you apply changes to the code you can see your results in sub-second cycles.
Core principles
Flutter includes a modern react-style framework, a 2D rendering engine, ready-made widgets, and development tools. These components work together to help you design, build, test, and debug apps. Everything in Flutter is organized around a few core principles.
Let’s go deeper one aspect at a time.
The Dart programming language
Dart is a big reason why developers love Flutter.
Dart is Google’s own programming language that was released as a direct competitor to JavaScript. Dart’s internal adoption at Google has been extensive with AdWords, AdSense, and Google Fibre teams in order to write their customer facing web apps.
Why Flutter Uses Dart
Because it matched the way they were building user interfaces
Dart has a lot of Object-Oriented features that are essential for serious development than the JavaScript holds. In other words, for being a “real” programming language JavaScript isn’t up and Dart is going to fill that glaring gap.
Dart is compiled “ahead of time” (AOT) into native code for multiple platforms. This allows Flutter to interact with the platform without going through a JavaScript bridge that does a context switch. Dart can also be Just in Time (JIT) compiled for exceptionally fast development cycles and game-changing workflow. Compiling to native code also improves app launch time.
Hot Reload!
Flutter offers fast development.
Its website promises “Hot Reload in milliseconds to paint your app to life.”
In cross platform frameworks, JavaScript needs to go through a bridge in order to talk to the native code. With Dart, Flutter eliminates the need to use a context switch or the “bridge”, and as a result, it breaks the orthodox structure of code implementation.
For instance, React Native works across two domains: first, the native domain, and second, the JavaScript domain. It uses JavaScript to access the OEM widgets in the native realm. Each domain by itself is blazingly fast. But the performance bottleneck often occurs when we move from one realm to the other. In order to architect performant, React Native apps, we must keep passes over the bridge to a minimum. Otherwise this can cause performance problems.
Wm Leler, Senior Software Engineer at Google, further explains: “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.”
Flutter has a concept called “plugins” that specifically intended to let you use existing platform libraries. Dart code talks to the OEM side that is implemented using the native library. In this way, Flutter completely bypasses the iOS and Android OEM control pipeline and draws the entire screen as a Skia canvas, with its own dart UI widgets.
Flutter is the only mobile SDK that provides reactive views without requiring a JavaScript bridge should be enough to make Flutter interesting and worth trying.
Flutter fixes this issue by injecting the updated source code files into the running Dart Virtual Machine (VM). The VM updates classes with the latest versions of fields and functions. Next, the Flutter framework automatically rebuilds the widget tree. This allows to instantly view the changes that you’ve made. In flutter you can deploy and test an app on a device instantly. Instant change detection would multiply productivity, reduce cost, and cut down development time.
So, the hot-reload function of Flutter adds a great value!
Flutter UI
Instead of wiring up to native Android and iOS components, Flutter paints every single pixel to the screen. Flutter has pixel-perfect replications of the iOS UI and Android’s Material UI, so you can create familiar experiences in an out of the box way.
Flutter’s real power is in creating totally custom interfaces and animations. In Flutter the layouts are defined using Dart code only. There is no XML / templating language or any visual designer/storyboarding tool either.
Like other Frameworks Flutter use reactive views and refreshes the view tree for every new frame, it creates many smooth animations and transitions that run at 60fps. Dart uses “generational garbage collection” that is very efficient for these kind of systems, because objects especially for short-lived ones are relatively cheap. In addition, allocation of objects can be done with a single pointer bump, which is fast and doesn’t require locks. This helps to avoid UI jank and stutter.
Everything is a widget
Widgets are critical to an app’s view and interface. They need to look good and natural irrespective of the screen size. They must perform fast, should be extensible and also customizable. Flutter makes it all possible by providing its own widgets.
Dart also has a tree shaking compiler, which only includes code that you need in your app. You can feel free to use a large library of widgets even if you only need one or two of them.
Flutter has a widget for everything and which again is a productivity booster.
“Everything is a Widget” approach of Flutter made it easy to compose custom UIs from a rich set of building blocks provided by the framework. And, because Flutter runs on both iOS and Android, it’s easier to spend our time creating beautiful designs instead of porting the UI.
Try it!
There are lot more in Flutter framework, to build apps and make them interactive.
The latest Release Preview 1 SDK is available on Flutter’s site, and users wondering what all the fuss is about can check out something from the Flutter app showcase.
