00 Introduction Why Every Senior Front-End Developer Should Learn Flutter #

Hello, I’m Chen Hang, the former technical lead of the merchant business front-end team at Meituan-Dianping. Over the next three months, I will be learning Flutter with you.

We are currently in the era of mobile internet, as well as the era of close integration of front-end technologies. The fragmentation of mobile systems and terminal devices has always been a headache for us in terms of the cost of developing and maintaining the same product on different platforms. Developing an app using native methods requires implementing the same product functionality separately for iOS and Android platforms, using different languages. It also requires adapting to different terminal devices and operating systems, as well as undertaking testing, maintenance, and upgrade work.

This is undoubtedly a huge burden for small and medium-sized teams, and it inadvertently slows down the delivery pace of internet products that strive for “small steps and fast pace” to respond quickly to market changes.

To solve this problem, various cross-platform development solutions with the slogan of “write once, run everywhere” have emerged like mushrooms after rain, and React Native is a typical representative among them.

React Native hopes to achieve a balance between performance, display, interaction capabilities, and iterative delivery efficiency. It optimizes the three major processes of loading, parsing, and rendering on the basis of the web container solution. It supports the necessary web standards for building mobile web pages in a relatively simple way, ensuring a convenient front-end development experience. By using native UI components instead of the core rendering engine, it maintains good rendering performance while preserving basic rendering capabilities.

However, due to the limitations of React Native’s technical solution, using native controls for rendering introduces new problems. Apart from the inefficiency caused by calling native APIs through a JavaScript virtual machine, we also need to deal with a large amount of platform-specific logic because the framework itself does not handle rendering and relies on native proxies.

Moreover, with changes in system versions and APIs, we need to deal with the differences in rendering capabilities of native controls on different platforms, fix various strange bugs, and even patch various issues on native systems.

All of these factors significantly reduce the cross-platform capabilities of React Native: to use React Native well, developers not only need to master this framework, they also need to be familiar with both iOS and Android systems. This undoubtedly presents more challenges for developers and is the reason why many developers have a love-hate relationship with React Native. Some teams have even decided to give up React Native and return to native development, as demonstrated by Airbnb.

Note: In 2018, the Airbnb team published a series of articles on Medium (React Native at Airbnb, React Native at Airbnb: The Technology, Building a Cross-Platform Mobile Team, Sunsetting React Native, What’s Next for Mobile at Airbnb) detailing this process.

Flutter, the protagonist of our course, is completely different from React Native.

It opens up a new way of thinking and provides a complete solution from the bottom-level rendering logic to the upper-level development language. Its view rendering is completely self-contained within its framework and does not rely on any components provided by the underlying operating system. This fundamentally ensures the high consistency of view rendering on Android and iOS platforms. The development language of Flutter, Dart, is a language specially tailored for (front-end) development by Google. With the help of advanced toolchains and compilers, it has become one of the few languages that support both JIT and AOT compilation. It has high development-time debugging efficiency, fast runtime execution speed, and good performance that can rival native apps. This creates a performance gap compared to React Native, which relies on just-in-time (JIT) execution with JavaScript.

It is precisely because of these revolutionary features that Flutter has gained significant popularity since its official release more than six months ago, with over 68,000 stars on GitHub, closing in on the industry-leading React Native, which has been released for over four years and has 78,000 stars. In addition, the support of well-known commercial cases such as Alibaba’s Idle Fish and Toutiao has further increased the popularity of Flutter.

Now, with strong support from Google, Flutter is highly likely to become the ultimate solution in the field of cross-platform development. In the past half year, I have interviewed more than 20 candidates at different levels, including front-end, Android, and iOS developers. When asked about the new technologies they are interested in learning recently, over 80% of the candidates told me that they are or will be learning Flutter.

To be frank, compared to other cross-platform technologies, Flutter has a relatively high learning curve. I have heard many feedback from (front-end) developers that Flutter is completely new, and they have to start accumulating knowledge from scratch, which can be overwhelming.

The high learning curve is currently the most important reason why most developers hesitate to adopt this framework. I can relate to this sentiment.

However, in fact, there are many similarities and connections among various front-end directions. Facing the increasing demands from the business side, as the head of the front-end team, I have led the team to explore and implement large-scale cross-platform solutions represented by React Native and Flutter at different stages. I am also one of the initiators and promoters of the earliest large-scale Flutter applications at Meituan-Dianping. In the process of exploring and implementing Flutter on a large scale, I have read a lot of tutorials and technical blogs about Flutter. However, I found that many of these articles have a high learning curve and focus too much on the introduction of parameters or implementation details of the application layer API. This makes it difficult for developers who come from other platforms to get started and they can only imitate without understanding the reasons behind it and unable to connect their own experience to form a knowledge system. This undoubtedly increases the learning curve and lengthens the learning period.

So, how should we actually learn Flutter? Do we really need to start from scratch?

Although Flutter is a new cross-platform technology, its underlying framework principles and low-level design ideas, such as low-level rendering mechanisms, event handling methods, component decoupling, and engineering as a whole, are no different from native Android/iOS development. It even incorporates many excellent design concepts from React Native. Even the Dart language used in Flutter has borrowed many ideas from other excellent programming languages in terms of information expression and processing methods.

Therefore, fundamentally speaking, Flutter does not introduce new concepts. This means that if we can delve into its principles, design ideas, and general concepts while learning Flutter, and combine them with our past development experience, we can establish our own knowledge system at an abstract level, rather than just relying on the use of the application layer API, breaking the strong dependence on experience and platform.

In this way, even if old frameworks are constantly updated or new solutions emerge, we can still stand firm.

So, what are the key technologies underlying the Flutter framework? How do they efficiently support a cross-platform solution that can rival native applications? What are the best practices for Flutter application development? What kind of terminal technical talent do enterprises need? And what are the future development directions for terminal technology?

These are the questions that I want to answer through this course. In this course, I will not only help you get started quickly and develop an enterprise-level app using Flutter but also help you connect it with your past development experience to build your own knowledge system. At the same time, I hope you can understand Flutter’s usage and see its principles and design ideas behind it.

To help you understand the core ideas and key technologies of Flutter, and not get stuck in the API details of components, I will omit some code and parameter explanations that do not affect core functionality, focusing on analyzing the core knowledge points and underlying principles of the framework, and sharing some problem-solving approaches to common issues.

In general, this course mainly includes the following five parts:

• Getting started with Flutter development module. I will start with the development history of cross-platform solutions and introduce Flutter’s background, basic principles, and take you through how Flutter code runs on native systems.
• Dart basics module. I will compare Dart with other programming languages in terms of design ideas and explain the key ideas and unique features of Dart, which we will practice through a comprehensive case.
• Flutter basics module. I will compare Flutter’s unique concepts and framework design ideas with native systems and teach you Flutter’s unique concepts. After completing this module, you will be able to develop a simple app.
• Advanced Flutter module. I will explain some difficult issues, advanced features, and their underlying principles in Flutter development and help you turn from passive to active when encountering problems.
• Comprehensive Flutter application module. I will discuss how to build your own Flutter development system from the perspectives of efficiency and quality during the iterative lifecycle of an enterprise-level application.

In the end, I hope this course can help you quickly get started with Flutter development, master its essence, and guide you to establish your own terminal knowledge system.

Now, Flutter is in rapid development, and the community is very active. Looking ahead, although the goal of Flutter dominating all platforms is already clear, a three-month course may not cover all possible future technical developments of Flutter. Next, I will continue to follow the latest changes in Flutter, including beyond the mobile platform, and keep updating this course, sharing the latest Flutter information with you in a timely manner.

That’s it for today’s content. If possible, please introduce yourself in the comments, and let’s chat about your current job, learning situation, and any problems you have encountered while learning or using Flutter. This way, we can understand each other and it will be easier for me to provide targeted explanations later on.

Keep it up and let’s break through our bottlenecks. Keep learning, stay calm, and keep growing.