Let’s re-acquaint ourselves with Flutter in 2019

Now it is 2019, let's take a serious look at the highly anticipated Flutter and get to know it again. This article first briefly reviews the development history of mobile development (cross-platform development) and discusses the pros and cons of cross-platform solutions at different stages; then discusses Flutter in detail from the three aspects of WHAT / HOW / WHY, and combines simple Dart code to talk about how developers can get started, and then shows several Demo Apps; finally, a brief summary of this sharing will be made. What exactly is Flutter, and what does its arrival mean for the front end? Let's continue reading.

1. A review of the history of mobile development

The current mobile Internet seems to give us an illusion that Android and iOS have been around for many years. Looking back, we find that Android has just spent its first decade with us. Ten years ago, we discussed more about desktop applications and the Web, and ten years later, we focus on a small screen and enjoy the colorful world brought to us by mobile applications.

Mobile applications (what we call "native" applications in daily life) usually refer to applications that are unique to a certain mobile platform. By using the development tools and languages ​​supported by a specific platform for development, you can directly call some SDK APIs provided by the system. In the current popular mobile operating systems, we use Java or Kotlin to call the Android SDK to develop Android applications, or use Objective-C or Swift to call the iOS SDK to develop applications that can be listed on the App Store. There is no silver bullet, and the same is true for mobile development. In short, native application development has the following advantages:

1. All open functions of the platform can be obtained, such as camera, Bluetooth, etc.;

2. Users usually experience fast speed, high performance and good experience when accessing applications;

And its disadvantages are also obvious, mainly:

1. Developed for specific platforms, the overall cost is high, and maintenance of different platforms requires manpower costs;

2. The dynamic capability is weak. In most cases, new function updates can only be released;

[[255860]] Speaking of dynamic development, the Web, which can run on any platform after one coding, is a memory that we all remember. In order to improve the experience and make the application dynamic, a batch of cross-platform mobile development solutions have been born to address these problems on the mobile side. Based on the different implementation methods, I divide it into three eras:

1. Bronze Age. In this era, frameworks mainly use Webview containers (in a broad sense) to render content, and use native code to preset some system capabilities to be exposed to JavaScript calls. This type of protocol is what we usually call JavaScript Bridge. In this era, there is a clear boundary between Web and Native frameworks, and everyone has their own responsibilities (UI rendering and system function calls).

2. Silver Age. In this stage, we still use JavaScript for development, but the rendering has been handed over to Native. The UI presented to users is displayed by combining JavaScript VM parsing and Native Widgets.

3. Golden Age. Different from the previous era, due to the "unsatisfactory" performance of Native Widgets in UI, this era has a new concept for the solution - self-drawing engine, which can smooth out the differences in interface development on different platforms through its underlying drawing implementation, and truly achieve "controllable every pixel" in UI. Although native development still needs to intervene to implement corresponding plug-ins when it comes to the platform layer, this is already the most flexible of the three cross-platform mobile development solutions.

2. Problem

We often say that the Web will eventually dominate the world, and we often hear that the Web is moving away from us. However, there is still no perfect solution for terminal UI, because there are many practical problems in different stages and implementations. Let's review these three eras:

1. Bronze Age: Although the Webview rendering solution is low-cost and quick to deploy, it is still difficult to cover the rich interactive user interface and the fast response of complex gestures;

2. Silver Age: Although the solution of using JavaScript to call Native code to operate the UI has solved many rendering problems, the differences in cross-platform Native Widgets are still a problem, which requires us to make some "compromises" on the UI. The communication cost between JavaScript and Native still makes this solution "burdensome" in some scenarios;

3. Golden Age: Directly using the underlying API for drawing has made great strides in execution efficiency and seems to be the ultimate solution. But have you ever thought about why the Web, which is regarded as "unbearable" by the world, has existed for so many years and has not only not died but has become more and more prosperous, so that we often say "any application that can be implemented in JavaScript will eventually be implemented in JavaScript";

Note: For details on the "burdensome" issue, please refer to the introduction to the mobile development technology chapter on the Flutter Chinese website.

There are some other questions worth considering, such as:

• Is it too costly to develop a separate set of code for each mobile platform today?
• The self-drawing engine is already free enough to control the UI, but why didn’t this solution become popular at the beginning?
• Will the Web development model of rapid development and deployment and multi-terminal access continue its past growth momentum now and in the future?

What is Flutter?

With these questions, we come to the protagonist of this article - Flutter. From the first Alpha version in 2017 to the 1.0 version released by Flutter Live last month, Flutter is gaining more and more attention. Many students who hear this word may sigh that it seems that UI technology has ushered in the ultimate solution. Let's first look at the official definition of it:

Flutter is a mobile SDK developed by Google to help developers develop high-quality native UIs on both iOS and Android platforms. Flutter is compatible with existing code, is free and open source, and is widely used by developers around the world.

[[255861]] Looking at the trend of Flutter GitHub Stars, we can find that every sharp increase indicates an important release of Flutter. Before we go into more details, let’s take a look at a few apps made with Flutter to get a feel for what the official description of Beautiful looks like.

[[255862]] 4. How is Flutter

It seems pretty good, but what makes Flutter different? Let's talk about it in four aspects according to the official description:

1. Beautiful - Flutter allows you to control every pixel on the screen, which means that "design" no longer has to compromise with "implementation";

2. Fast - What is the standard for an application to run smoothly? You might say 16ms or 60fps, which is enough for desktop or mobile applications. However, when facing the vast field of AR/VR, 60fps will still become a bottleneck that makes the human brain dizzy. Flutter's goal is far more than 60fps. With the help of Dart's AOT compilation and Skia's drawing, Flutter can run very fast.

3. Productive - Front-end developers may be accustomed to the hot reload mode during development, but this feature is still a new thing in mobile development. Flutter provides a stateful hot reload development mode and allows a set of codebases to run on multiple terminals; other features, such as JIT compilation and AOT compilation during release, make developers more efficient when developing applications;

4. Open - Dart / Skia / Flutter (Framework), these are all open source. The Flutter and Dart teams are also open to a variety of technologies, including the Web, and are willing to learn from and absorb any excellent ones. In terms of ecosystem construction, Flutter's speed in responding to GitHub Issues is even more amazing, because it is really fast (the average resolution time for closed issues is 0.29 days);

[[255863]] Note: The data comes from Flutter. There are 4116 issues. Is it mature?

Why use Flutter?

Why use Flutter? Is it just because it is the built-in UI SDK of Fuchsia OS, the next generation operating system of Google?

[[255864]] Let's look at it in more detail. The previous Flutter system architecture diagram, based on the previous answer to the question "Which is recommended for developing cross-platform apps, React Native or Flutter?", I will try to interpret it briefly:

[[255865]] From top to bottom, they are Framework, Engine and EmEmbedder:

• The Framework layer is what framework users need to deal with directly, including basic widgets such as text/images/buttons, rendering, animation, gestures, etc. If you write a Flutter application, you can roughly understand it as calling these packages and then "assembling" your own code with Dart.
• The Engine layer is implemented in C++. This layer includes Skia, Dart and Text. I am not familiar with the latter two, so let's talk about Skia. This is a 2D graphics library that provides a common API for a variety of software/hardware platforms. It is the graphics engine for Chrome, Chrome OS, Android, Firefox, Firefox OS and other products, and also supports Windows 7+, macOS 10.10.5+, iOS8+, Android4.1+, Ubuntu14.04+ and other platforms; Dart may include Dart Runtime (JIT/AOT), etc., and Text is responsible for text rendering.
• Embedder is an embedding layer that does Flutter to Platforms, such as rendering Surface, thread settings, plug-ins, etc. Flutter's platform layer is very low. For example, iOS only provides a canvas, and all other rendering-related logic is inside Flutter. This is why Flutter claims to be able to accurately control every pixel; but it is undeniable that for the plug-in part, the underlying construction of a specific operating system is still required (such as payment, map, etc.).

Is there any more clarity on Flutter?

If there is one more thing that can impress you to use Flutter, it is animation. With Flare, you can easily build animation effects that support Flutter. This is a bit like using Flash to make keyframe animations ten years ago.

Of course, the continuous efforts and optimizations of the Flutter and Dart teams are one of the reasons to convince you to choose Flutter. At the D2 that just ended not long ago, Google engineers introduced why Flutter can be so fast, such as Dart has fewer mallocs at runtime, Flutter applications have fewer processing links at runtime (skipping Android/Chromium), Flutter has a more efficient traversal process in rendering layout, etc.

[[255866]] For the future, HummingBird and Flutter for Desktop are also important factors for you to bet on Flutter. STAY TUNED FOR GOOGLE I/O 2019!

[[255867]] 6. Code with Dart

Using the scaffolding provided by Flutter, to make a simple demo, you only need to write and modify two files: main.dart and pubspec.yaml. As a front-end, you can compare them to index.js and package.json. The detailed code can be found at https://gist.github.com/hijiangtao/2b58ab07d3d7ed96aa0f868140c906e5 .

[[255868]] 7. Take away

Human memory is short-lived. Having said so much, if this article wants to give you some thoughts, I think it can be summarized in the following five sentences:

1. RECAP / In the historical changes of mobile cross-platform development solutions, we have gone from Webview plus Bridge to React Native and now the Flutter that attracts everyone's attention. We don't know whether terminal UI technology has really ushered in the ultimate solution, but by briefly reviewing several glorious moments in this long river of history, we hope that their development figures can bring some global thinking beyond the business code to everyone engaged in the front-end;

2. WHAT / What is Flutter: Google's Portable UI Toolkit. It originated from the mobile terminal, but its vision is far more than the immediate.

3. HOW / Flutter has four features: Fast, beautiful, productive and open. These capabilities come from the support of Dart, skia and more technologies behind it. Understanding these will help us to better understand which parts a complete UI system consists of, so that we can have a more three-dimensional understanding of the superstructure.

4. WHY / Why did I choose Flutter? I introduced many reasons in my sharing, including system design analysis, an open learning attitude, and a future-oriented Mobile and beyond.

5. END / If you are interested in Flutter, please don’t forget to pay attention to Google I/O. Always be curious about the new technologies around you and be a happy geek!

Where will we be in the next decade? I hope my sharing can help you gain something. If there are any mistakes in the article, please comment and point them out. You are welcome to discuss more about Flutter. Thank you.

[[255869]] The story behind 1: When many front-end engineers first heard about Flutter, they were full of doubts. Why did Flutter choose Dart instead of using Web technology or JavaScript language to implement the Flutter framework? In fact, many contents in Flutter are absorbed from the Web community, such as tree shaking and hot reload. But another little-known story about Flutter is that most members of the team have a Web (Chromium) background. If you have watched Flutter Live, you should know that there are not many people in the Flutter and Dart teams. They are roughly those listed in the avatar wall. In the initial design, they have repeatedly considered Web technology, and JavaScript has also been considered in language selection. There should be no one who knows JavaScript and the Web better than them, but if you look at those who have developed Chromium, they finally gave up JavaScript. We have reason to believe that they made the decision after careful consideration. In the words of Google engineers, "We pay attention to many technologies, including Web technology. We take the essence and bravely throw away the historical baggage."

Behind the story 2: In the past year, we have heard more about Flutter from client developers, but since the release of 1.0, it has attracted more and more attention from front-end students. This is similar to the phenomenon mentioned in the answer to "What should the 2019 front-end technology plan include?". But have the front-end students ever thought that Flutter originated from the mobile terminal. Although the current Flutter comes from the former Chromium team, its overall friendliness to client development is higher than that of front-end development. After all, there is a platform layer plug-in. Look at Flutter's upcoming HummingBird. At first glance, it is a blessing for the Web, but this only provides a way for Flutter to the Web, rather than providing the possibility of enhancing the Web for the front end. In a sense, the territory of the Web is gradually shrinking. This time, are we really going to be unemployed?

Note: The description about Google engineers is paraphrased from the relevant remarks made by Google engineers at the Flutter roundtable, and there are some differences.