41 Let's Talk Flutter the Continuously Evolving New Technologies in the Ui Layer

41 Let’s Talk Flutter The Continuously Evolving New Technologies in the UI Layer #

“The world has long been suffering from Qin.” Whether it’s H5, React Native, or the popular mini-programs in the past two years, these cross-platform solutions have always been criticized for their performance and stability. The most obvious example is React Native, which has been in beta for several years.

Flutter, as the hottest new mobile development technology this year, went from its first Beta test version to the official 1.0 version in December 2018, a total of just over 9 months. Flutter achieves cross-platform development while maintaining native performance. Furthermore, it has become the UI framework for Google’s next-generation operating system, Fuchsia, providing great possibilities for the future development of mobile technology.

With its high performance, cross-platform capabilities, and its status as an important part of Google’s next operating system, Flutter has already gained so much attention. So should we immediately embrace this wave? New technologies and frameworks emerge every year, so how should we keep up?

The Past and Present of Flutter #

Most so-called “new technologies” will eventually be forgotten in the river of history. When faced with a new technology, we need to be skeptical and understand all aspects of it before deciding whether to adopt it. Now let’s take a look at the past and present of Flutter.

One of the early developers of Flutter, Eric Seidel, participated in an interview called What is Flutter, in which he talked about why Flutter was developed, as well as some design principles and directions of Flutter. - -

Eric Seidel and several early developers of Flutter all came from the Chrome team and had extensive experience in layout and rendering. So why did they develop Flutter? They had always been frustrated with the performance of the browser. One day, they decided to step out of the scope of the web. By removing a large amount of code and abandoning web compatibility on top of Chromium, they found that the performance was 20 times better than before. I also deeply understand this. In the past six months, I have been working on a Lite version of the main app, and the installation package has been reduced from 42MB to 8MB. By removing a lot of historical business logic, the performance is much better than the main package.

As mentioned in the interview, Flutter is a product that has been incubated within Google for many years. From its initial development to now, it has always adhered to two most important design principles:

  • Performance First. It has a built-in layout and rendering engine that uses Skia to rasterize through the GPU. It uses the Dart language for development and uses AOT compilation for the final release version, eliminating the need for interpreter execution or JIT. It also supports Tree Shaking to remove unused code and reduce the package size.

  • Efficiency First. It supports Hot Reload of code during development, achieving near-instantaneous compilation updates. It values the development toolchain and has complete tools for development, debugging, testing, and performance analysis. It has a built-in runtime for true cross-platform development, allowing one codebase to generate Android/iOS applications simultaneously, reducing development costs.

So why choose the Dart language? “The Dart team’s office is closest to the Flutter team’s office” is definitely one of the reasons, but Dart also provides a lot of help for Flutter’s pursuit of performance and efficiency, such as AOT compilation, Tree Shaking, Hot Reload, and generational, lock-free garbage collection. Because of these features, Flutter ultimately chose Dart after considering various languages. I also recommend you to read the article Why Flutter Uses Dart for more information.

In summary, Flutter is a framework that incorporates a built-in layout and rendering engine, uses Dart as the development language, and adopts a React-like way to write UI, allowing one codebase to run on multiple platforms. But as mentioned earlier in this column, the core demands of the era of the “big front-end” are cross-platform development and dynamism. Now let’s take a look at how Flutter performs in these two aspects.

1. Cross-platform Development with Flutter

Although React Native/Weex use native system UI components and improve rendering speed and UI smoothness through native rendering, performance is still limited due to factors such as JS execution efficiency and the cost of JSBridge communication. It is impossible to completely eliminate the platform differences of different systems, making such cross-platform solutions always face challenges.

As Eric Seidel said in the interview, Flutter was simplified from a browser engine. Both its layout engine (for example, it also uses CSS Flexbox layout) and the design of the rendering pipeline have many similarities to browsers. However, it abandoned the heavy historical baggage and web compatibility of browsers, achieving cross-platform development while maintaining performance.

Let’s recall in issue 37 of this column, “After 3.5 Years of Work, I Transformed from Mobile Development to Mobile Game Development”, I also described another cross-platform solution with a built-in runtime: the Cocos engine.

In my opinion, Cocos and Unity are the earliest and most mature cross-platform frameworks, and they have stricter performance requirements. Even for complex games like “King of Glory” and “PUBG”, we can achieve smooth performance.

Flutter’s Dynamic Practice #

In the 40th issue of the column “Dynamic Practice, How to Choose the Right Solution”, I mentioned a point: “Compared to cross-platform capabilities, China is more obsessed with the dynamic capabilities of front-end development.”

In the “iron triangle” of performance, cross-platform, and dynamicism, we cannot achieve all three at the same optimal level. If Flutter is better than browsers in terms of performance, cross-platform capability, and dynamicism, then Flutter would not exist as a framework but rather become a groundbreaking version of Chromium.

Browsers choose cross-platform and dynamicism, while Flutter chooses performance and cross-platform capability. Flutter sacrifices the dynamicism of the web, uses the Dart language’s AOT compilation, and uses a lightweight engine of only 5MB to achieve high performance that browsers cannot achieve. The initial target audience for Flutter was native developers on Android using Java, Kotlin, and on iOS using Objective-C and Swift. Whether Flutter can further penetrate the web field based on this breakthrough remains to be seen.

Does Flutter support dynamic updates? It is absolutely not possible to dynamically update in iOS because it compiles the code into AOT code. As for Android, Flutter’s dynamic update capability is actually already implemented in Tinker. From the official solutions provided, it’s essentially a simplified version of Tinker that only replaces the changed files.

The official dynamic recovery solution can be said to be very weak and requires the application to restart to take effect. It also does not support simultaneous modification of native code.

Furthermore, it is also questionable whether Flutter allows dynamic updates on Google Play. According to the regulations in the Google Play Developer Policy Center (source), dynamic updating of executable files is not allowed on Google Play.

From the article “Flutter’s Compilation Mode”, we can use flutter build apk --build-shared-library to compile the Dart code into app.so. Whether it’s the dynamic update of libflutter.so or app.so (actually vm_*, isolate_* are also executable files), it violates Google Play’s policies.

Of course, it is not ruled out that Google has given the green light to Flutter’s dynamic updates in order to promote it. Recently, I have also consulted with Google Play’s policy team and have not received a response yet. If there are further results in the future, I can also synchronize them to all of you.

In summary, Flutter’s dynamic capabilities can theoretically only be resolved through JIT compilation mode, but this will have a significant impact on performance and code size. Of course, Xianyu is also exploring a layout dynamicization solution for Flutter, which you can refer to in the article “Comparison and Best Implementation of Flutter Dynamicization”.

How to Choose in the Face of New Technologies #

After the above learning, we finally have an understanding of Flutter in all aspects. It can be said that Flutter is a framework that prioritizes performance and efficiency, but its dynamic capabilities are very limited.

Currently, Xianyu App, Meituan Takeout, Today’s Headlines App, iQIYI Broadcast Assistant, NetEase News Client, JD JDFlutter, Mafengwo Travel App, have all shared their experiences and lessons learned from using Flutter. If you are interested in adopting Flutter, I highly recommend carefully reviewing the experiences and lessons learned from those who have come before.

Whether it’s Flutter or other new technologies, when deciding whether to follow along, we need to consider the following factors:

  • Benefits. What benefits does adopting new technologies or frameworks bring us, such as improvements in stability, performance, efficiency, security, etc.

  • Migration Cost. If we want to obtain the benefits brought by new technologies, what costs do we need to pay, such as the learning cost of new technologies, the cost of transforming the original architecture, etc.

  • Maturity. In simple terms, it refers to whether the new technology is reliable. Just like choosing open source projects, factors such as team size, capabilities, and whether the project is valued are what we need to consider.

  • Community Atmosphere. Mainly considering whether there are enough people following this technology, whether documentation and resources are abundant, and whether help can be obtained when facing problems.

1. My Perspective on Flutter

Flutter is a very promising technology, and this is undeniable. I have conducted a comprehensive evaluation and analysis, but the conclusion I reached is that I will not adopt it in the applications I am responsible for, mainly for the following reasons.

The main reason I have not followed Flutter is that the benefits are not significant enough. If there were significant benefits, the other factors would not be a problem. The applications I am responsible for currently use H5 and mini-programs as cross-platform and dynamicization solutions. After extremely optimized performance, they can meet the requirements.

On the other hand, the introduction of new technologies is a very good opportunity for refactoring, whether it is for historical code, architecture, or our personal knowledge system. I hope that we can introduce something new every once in a while to break everyone’s dissatisfaction with the existing architecture.

New technologies may have more or less imperfections, which is a challenge but also an opportunity. By overcoming one difficulty after another and continuously summarizing and accumulating experiences, we may ultimately achieve the growth of team members’ technical and other abilities. Taking Xianyu as an example, while they implemented Flutter, they not only summarized their experiences into dozens of high-quality articles, but also participated in QCon, GMTC, and other technology conferences. They also open-sourced several libraries such as fish-redux and FlutterBoost, which made Flutter a technology brand for Xianyu.

It can be believed that in the past year, in the process of collectively overcoming one difficulty after another in Flutter, both the team’s morale and the team’s technical and non-technical capabilities will have made significant progress.

2. Perspectives from Others on Flutter

Since I have not yet used Flutter in actual projects, before writing this article, I consulted many friends with practical application experience. Let’s take a look at their perspectives on Flutter together.

Summary #

There was a time when we had no idea how to approach the massive codebase of Chromium. Flutter, on the other hand, is a complete engine that is much simpler than WebKit. It covers a range of knowledge from CPU to GPU, from the upper layers to the hardware. There are many places in its source code that are worth exploring and studying.

In the future, it will be very interesting to see Flutter applications running in mini programs. We can directly use or refer to Flutter to implement a mini program rendering engine. This approach also brings another benefit. When a feature, such as “Nearby Restaurants” in WeChat, is not mature enough, we can first try it out as a mini program. Once the feature becomes stable, we can easily convert it to in-app code without any cost.

Since its launch in 2011, Dart has always aimed to be a high-performance language, attempting to replace JavaScript. However, it has not been widely used outside of Google for a long time. With the opportunity provided by Flutter, can it achieve a breakthrough? The biggest realization for me is that opportunities may arise at any time, but we need to be prepared.

“As iron needs to be strong, we still need to focus on internal cultivation.” Whether or not to learn Flutter, my answer is “Actions speak louder than words.”

Homework #

What are your thoughts on Flutter? Are you planning to incorporate it into your applications? Feel free to leave a comment to discuss with me and other classmates.

As one of the most popular technologies this year, Flutter offers numerous opportunities for us to build our own tech brand, such as writing articles, attending tech conferences, and open sourcing our projects. For learning Flutter, you can refer to the following resources.

Feel free to click on “Please read to a friend” to share today’s content with your friends and invite them to learn together. I have also prepared a generous “study boost gift” for students who think carefully and actively share. Looking forward to progressing together with you!