preface

For someone who likes to pursue new technologies, it’s a shame I didn’t try the Flutter for more than a year. My lack of interest in flutter stems from my ignorance of the Dart language used for flutter — why use dart, a dying language, when there is a typescript language available for flutter? But recently a friend showed me a personal project he was working on with Flutter, and I was so impressed that I started learning flutter.

My learning process of Flutter is a little different from that of other languages. For example, with Rust, I wrote code while reading official documents. The whole process was very smooth. I learned Flutter because I didn’t have much experience in mobile app development. I always felt like “getting started and giving up” when I read the official documents, so I found some video courses to watch flutter.

I briefly followed the Flutter Crash Course for Beginners 2020[1] on YouTube. The course is about six hours long, but because it’s for an audience with little programming background, it can be watched most of the time at 1.5 times speed. Some of the very basic stuff, like the section on Introducing Dart, or even skipping it and going to Learn Dart in Y Minutes on your own, will suffice. This course introduced some very basic components and I ended up with a very rudimentary app.

Then I found a free learning video called Katai Honda 6 on site B. This tutorial is a bit more in-depth, taught by an engineer who has been in development for 12 years, mainly introduces concepts, usually throws out some knowledge and lets you get started. This course is not very suitable for beginners, but because of the large number of problem sets, the concepts can be well digested and mastered. If you have some react experience, this course is a great way to learn the basics of Flutter. The whole course takes about 8-12 hours due to a lot of practice.

Having been at the bottom of these two courses, having read part of the source code of Flutter Gallery, and having spent some time studying DART in depth, I have gained some basic understanding of Flutter. Here are my personal reflections on Flutter.

What is good about Flutter?

Unlike other cross-platform mobile app solutions, Flutter is more like a game engine, while the Flutter app is a game disguised as a normal app. You can stop and think about what that means. Yes, Flutter is built on top of Skia, a 2D graphics engine. Few people have heard of Skia, a graphics engine company that Google acquired in 2005 and was founded by Michael Reed. Interestingly, Google also acquired Android in 2005. Michael Reed is a very low profile guy. I couldn’t find out more about him. He didn’t even bother to set up a LinkedIn page. The only known reference to him comes from a 2017 TechWire article, “Inside Google’s Chapel Hill outpost, “which states that this guy is still at Google, leading some 40 Chapel Hill employees. The performance of Skia was so good that Google honed it until it became a graphics engine built into Chrome and Android, laying a solid foundation for their success.

We know that flutter’s previous cross-platform mobile application solutions had two main ideas:

1) Use DOM to render the UI. That’s the path of the early Phone Gap, now ionic. It allows developers to write javascript and package it into a mobile application. The mobile application itself is just a shell, all the logic is still in the Javascript of the WebView. While such apps are well cross-platform and can subtly mimic native apps with the right UI libraries, their Achilles heel is performance, including rendering performance.

2) The ability to map javascript to native UI and use native UI. This is the route adopted by React Native/Weex. The poor rendering performance of Phone Gap has developers wondering: if DOM rendering is inefficient, can we build UI libraries that allow javascript code to be mapped one-to-one to the native UI to achieve almost the same rendering performance as native apps? React Native tried this route, making the user experience almost identical to that of a native app, moving beyond DOM rendering. However, the downside of this approach is that the business logic and UI are still done through the JS Bridge, so this still slows down performance. On the other hand, if you have strange UI requirements, you may need to write native code for them.

Flutter has its own rendering engine

Flutter takes a different, imaginative approach: it does not rely on existing rendering engines, and controls the rendering of every pixel on the screen itself. This is why I say that Flutter is more like a game engine: because every control displayed on the screen is actually drawn by Flutter itself, pixel by pixel, so any changes that flutter makes redraw the whole screen — and of course flutter optimizes the redrawing process. This is why Flutter boasts a rendering capability of 60 FPS — enough to run the game smoothly. With this concept in mind, it will be easier to understand the following image:

The C/C++ Engine section of the figure contains skia and the Dart VM. User-written Flutter code, along with the Flutter framework, eventually calls the SKia library to efficiently render images and text via the GPU. We knew that our own low-level rendering control was extremely efficient, but the code development was very inefficient, so Flutter wrote a lot of SDK code to make flutter code simple for users.

If you’ve written a bit of Flutter code, you’ll feel familiar with React. Indeed, Flutter borrows a lot from react engineering practices. Its lifecycle and state management are very similar to react/ Redux. For example, flutter was designed to be stateful and stateless, which was used to control the ENTIRE UI “reactivity” via setState. React renders real changes to the DOM by using the diff VDOM and DOM differences. Flutter has a similar idea. It keeps the widget tree in memory, sees which subtrees have changed during rendering, and then renders it again. This algorithm is called: Structural repainting using compositing. Interested students can see flutter’s rendering pipeline [2].

In A Flutter, from user input to final rendering, the following pipeline will occur:

So you can see that every flutter control has a build method that controls the rendering of that control. Like Render on React, don’t put any computation-intensive code in the build method.

The ability of the Flutter to control its own rendering gives it a number of revolutionary advantages — a dimension reduction blow to React Native/Weex. For example, Flutter makes it easy to create cool animations and interfaces — anything that isn’t regular, customizable and high interface is a lot of work in other frameworks, even native applications. Here’s an example:

Additionally, compared to React Native/Weex or even native applications, Flutter can easily maintain UI consistency across operating systems and hardware, an ability that many people often overlook. For example, when developing a native app, you need to consider compatibility with older operating systems and older hardware. Flutter handles its own rendering, so that its performance is consistent across different versions of the system, making testing much easier.

The potential of Flutter is limitless across platforms

Flutter has unparalleled cross-platform potential. Again, this benefits from its own control of screen rendering. Properly used at the component level and handled with media Query, Flutter makes it easy to extend your mobile applications to clients or even the Web. Flutter currently supports OSX applications (Master Channel) and Windows/Linux applications (Technical Preview). Additionally, There is web support for Flutter Beta Channel. Flutter is currently the most promising technology solution for unifying the big front end, and I think Flutter has very big ambitions in this direction.

Why does Flutter use Dart?

What language a person uses affects how they think, especially in the world of programmers. The Team at Flutter reportedly tried more than a dozen languages before choosing their own Dart. It’s an option that would initially turn a lot of people off, including me. I used to have a hard time understanding why Flutter doesn’t use TypeScript and instead uses Google’s own dart language. But as I learned about Flutter, I realized that Dart makes Flutter possible. Eventually Flutter feeds dart.

As we said earlier, the main advantage of Flutter as a cross-platform solution is performance. Dart is a compiled language that supports AOT (Ahead Of Time) and JIT (Just In Time). That is, the flutter code we write is compiled to native ARM (mobile) /x86 (desktop) machine code. This maximizes runtime efficiency. Because Dart is a programming language with GC, AOT compilation is similar to Golang in that it includes the MEMORY management runtime in the VM in the compiled executable file, which is why the DART runtime exists in the architecture diagram above. Dart’s JIT capability makes debugging in a development environment easy, making it the ultimate “write as you write” experience for mobile developers. This is something that many existing languages do not have: Interpreted languages like TypeScript have JIT, but no AOT. The Flutter team also had to provide AOT compilation capabilities for them, a huge task given the ARM/x86 support and performance optimizations. Compiled languages like Golang/Rust have AOT, but no JIT, and the presentation capabilities of the language are not good for front-end code.

Those of you who work on Android will have experienced that earlier versions of Android, if they didn’t properly control object allocation, would sometimes lag, which is the drawback of GC controlled memory allocation: While eliminating the hassle and insecurity of manually allocating and freeing memory, regular GC can affect application performance. While this phenomenon is becoming less common on newer Android, it’s still a problem. With Dart, Android engineers might wonder: Can DART’s GC handle the complex interactions of a large number of UI components?

Since flutter can boast a rendering capability of 60fps, dart must be cheap enough to create objects and GC. I haven’t studied this specifically, but some public blogs (including Flutter: Don’t fear the garbage collector), you can see that dart does not require locking for object creation or GC creation, and its GC is generation collection. Many lessons learned from Java GC (and, I believe, from Golang, also at Google). For the application scenarios of flutter, a large number of objects had a short life cycle and were applicable to the Young generational hypothesis, so GC was sufficiently efficient.

These are all performance trade-offs. The syntax and programming paradigm of a programming language often affect the user’s efficiency and thus the acceptability of the language. Dart is easy for programmers with a Java /typescript background to understand, especially if you’re just thinking about writing UI. It’s easy to get started in minutes to hours. And its syntax, compared to Java, is well suited to lengthy UI structure declarations.

As an object-oriented language, Dart supports mixin, generics, and other high-level features. Dart uses the async/await concurrency model, where each future object can be considered an independent Coroutine. Dart is statically typed, but its type schema is similar to TypeScript, and type declarations are recommended but not mandatory. After a few days of use, Dart seems to be a good server-side developer, at least in a language that is more expressive than the javascript behind NodeJS. Of course, currently dart programmers are almost all FLUTTER programmers, but something like javascript -> NodeJS from the front-end to the back-end can’t be ruled out in the future. After all, backend programmers are constantly being squashed by cloud services, and a backend engineer’s hard-earned server-side code is being attacked by monsters like Firebase.

conclusion

Flutter is a very interesting framework that deserves some attention. If you are doing big front-end related things, then you should not miss flutter; If you are doing back-end development, you can also learn about Flutter and build your own end-to-end capabilities.

Click on Learn more to get all information about Flutter.

For other needs, you can also check it on Github