In December 2018, Google announced the release of Flutter version 1.0. With 88,000 + views and 11,000 + forks on Github so far, Flutter is one of the hottest development frameworks on mobile this year.

What’s behind the Flutter fire? Why are more and more businesses and developers using Flutter? Will Flutter be the ultimate cross-platform development choice? I think that “Flutter is not the ultimate choice across platforms. Flutter was originally chosen not because it was necessarily the ultimate future choice, but because it might be something different.”

The cause of the Flutter fire

Dart has high performance and the ability to quickly allocate memory. Dart supports both JIT and AOT modes. Dart allows deformation and statically hot overloading in typewritten languages. Dart as an object-oriented language also makes it easier for most developers to get started. I agree that Dart language has certain advantages, but such advantages are not unique to Dart. I think this is not the core reason why people choose Flutter, because it is the inversion of cause and effect. In fact, Dart was introduced in 2011 and was mostly forgotten until the Flutter came along. Dart is back in the public eye because of the recent boom of Flutter. Dart was chosen by Flutter, or simply because Google’s Flutter and Dart teams were close to each other and could communicate easily. In my opinion, the main reasons for the fire of Flutter are as follows:

1. Existing cross-platform technologies are flawed

In the era of mobile Internet, the coexistence of Android and iOS for a long time, coupled with the mature Web front-end technology, leads to the human cost problem of repeated development of the same application. For this reason, cross-platform technology in the mobile era is a subject that needs long-term research. If the current cross-platform technology has a perfect solution, there may be no opportunity for new technologies to sprout. In fact, the mature cross-platform technologies in the industry have some defects, such as WebView rendering time is too long, the white screen rate will affect the conversion income, and the functions that can be realized are very limited. React Native has poor performance, difficulty in troubleshooting, and high maintenance costs. The advent of Flutter, which is Google’s open source technology and has gained some traction of its own, has helped to address these cross-platform development issues. In addition, the much talked about and mysterious Fuchsia system also uses Flutter on its UI framework as a long-term strategic investment, which increases confidence in Flutter.

2. R&d efficiency is competitiveness

In the second half of the mobile Internet, some emerging Internet unicorns, small giants, without historical baggage, are more willing to try new technologies with higher technical ceilings. From the difficulty of campus recruitment and social recruitment, it is not difficult to find that the talent on the client side is more scarce than before, especially iOS engineers. In the second half, there will be more competition and more competitive tracks, such as education and other directions. Flutter itself is ideal for application development from scratch without historical baggage. For new business, especially in the case of team manpower shortage, the consideration of Flutter in technology selection can speed up the product landing at multiple points, and fast trial and error.

3. Beautiful and smooth at the same time

Flutter has attracted the attention of developers since its birth with a “beautiful UI, pixel-controlled, smooth performance, comparable to native performance”, and even a self-rendering engine capable of developing games. In the second half of mobile terminal, there is no demographic dividend and the competition is more intense. How to better meet users’ demands for high quality and high fluency is a powerful competitiveness of mobile terminal. Cross-platform technology for greater fluency, using self-rendering technology is a better solution, and a more thorough cross-platform technology direction.

Bytedance selects the initial heart of a Flutter

Speaking of which, let’s share the story of how Flutter came to be in the first place. While working on the Chrome team, Flutter’s founder, Eric, encountered some problems that he wanted to create a smoother experience for one part of the Web. He spent a few weeks experimenting with Flutter, regardless of how compatible the Web was. I removed a lot of code for compatible access and some features that Web developers don’t usually use, removed a lot of Web elements rendering is no longer supported, then did a benchmark test and concluded that some metrics of concern are 20 times faster. So Eric decided to do something about it, and a lot of research and development went into it, which led to Flutter.

It sounds like Flutter should be easy for Web engineers to learn about. I have communicated with many of the company’s business teams that are using or investigating Flutter, and found that the client has a higher acceptance of Flutter than the students at the front end. Personally, I come from the Android terminal technology, and I do think it is very easy to learn Flutter. However, students at the front of the company have more fun with Flutter. So, I think that Flutter is more of a cross-platform technology from a client perspective. Flutter is more of a big mobile technology than a big front-end technology. The Roadmap for Flutter is to fully support Android/iOS capabilities first, and further improve Web capabilities.

Bytedance attaches great importance to client technology. Bytedance has many client engineers. In the past, the basic technology of client in-depth is mainly plug-in, hot repair, performance optimization, security reinforcement, etc., and the cross-platform direction has always been promoted by front-end engineers, which is a big front-end direction. Flutter is a more client-led cross-platform technology solution. In addition, ByteDance does not mean that there is only one set of cross-platform technology stack. The company also has multiple sets of cross-platform technology stack, including self-developed solutions.

In bytes to beat, cross-platform technology did not form large-scale landing, before also mentioned there is no historical burden, so in the face of cross-platform technology selection, to focus on the technical limit and cross-platform technology development potential, the rendering technique of Flutter can be understood as more completely pure cross-platform technology, along with rival native fluency, This is why we choose Flutter.

“Pit” in Flutter landing process

Up to now, Bytedance has implemented a number of Flutter technology solutions, including More than 20 businesses including Toutiao, Watermelon Video, and Manpi Shrimp. There are both pure Flutter projects and hybrid Flutter and Native projects. If you want to know more about the implementation of the business, I will share with you at this year’s QCon Beijing 2020.

The maximum potential of Flutter is high, but it still needs to be polished and refined. We have many problems in the process of Flutter propulsion. For example, the package size is too large, the performance is not as expected, the support for hybrid engineering is not friendly, the versions of the host Flutter engine are not consistent, the base library is not perfect, and all data after the Flutter modification is equal. In addition, there are many non-technical difficulties, such as the business team’s disapproval of the new Flutter technology, engineers’ lack of Flutter experience, and concerns about audit risks, which will affect whether the business side will adopt THE Flutter technology. Every difficulty needs to be solved, otherwise it will be difficult to implement the Flutter technology. Let me talk about two of them.

1. Package volume problem

The large apps in Bytedance, such as Toutiao and Douyin, are very sensitive to the increment of the package volume. The package volume of a Flutter involves two parts: the packet volume of a Flutter engine at one time, and the code increment of a Flutter engine each time you write the Dart code rather than the OC code. These two problems are very difficult for us, so we set up the package volume optimization special project to tackle them. Meanwhile, we communicated with Google engineers for many times to reduce the package volume. Finally, we achieved a lot through a series of optimization methods, including Data compression, compilation optimization, Skia clipping, BoringSSL/ICU library/text rendering /libwebp library clipping. Through practice, we found that when OC code and Dart code were used to write the same business logic, Dart generated more machine code instructions than OC, mainly in the generated binary instruction header, instruction redundancy, simplification of instruction alignment, and simplification of StackMap and CodeSourceMap. We also reported this to Google. For streamlining instructions, check out Issue Progress, which documents the progress in detail: github.com/flutter/flu…

2. Performance optimization

This was one of the thorny problems we encountered. We used the performance analysis tool Timeline provided by Flutter official to analyze a weird performance problem, but could not find any exception. For a long time, I simply lifted the source code of the whole performance analysis tool of Timeline again, finally found its defects, and mentioned it to the Flutter community, and incorporated 10 PR. Based on this, I was lucky to become a Flutter Member, and I will continue to contribute more to the community in the future: Github.com/flutter/flu… .

Flutter is a self-rendering cross-platform technology with a high performance ceiling, but this does not mean that Flutter is currently performing well in all aspects. After all, Flutter is a “newborn” and still needs some modifications. In addition to the performance tool modification, we also solved many performance problems in the Flutter landing scenario, and optimized our engine, such as UI preloading strategy, Flutter Turbo technology, and Vsync scheduling strategy, to speed up the engine and maximize Flutter performance.

Resistance to Flutter at the business level

The introduction of Flutter also created a lot of value in the company’s business. This is mainly reflected in the following aspects: first, Flutter has a good performance in multi-terminal consistency. It can achieve WYSIWYG without additional adaptation for a certain platform. Second, the hot overload technology enables the design team and engineering team to modify and debug UI very quickly. Designers only need to pay attention to the implementation of one platform, and the UI acceptance efficiency is significantly improved. Cross-end development can improve the human efficiency of engineers (the team has estimated that the human efficiency is roughly increased by 1.8 times). Third, performance smoothness is improved, which is much longer than the first screen time of THE H5 version. Finally, the commercialization data of the product has obvious benefits. It can be seen intuitively that Flutter has brought revenue to the company.

However, there are still some obstacles to the development of Flutter at this stage:

1. Flutter uses Dart language and fails to introduce a mature front-end ecosystem

As a front-end engineer, WE may prefer to have JavaScript or TypeScript on top of Flutter. In the future, we may consider providing high performance interoperability between Dart and JS. In addition, there are some challenges for front-end developers to develop Flutter. Pure front-end technologies may not be able to Cover, for example, a hardware related Plugin for Flutter is only buggy in a certain phone. If there is no existing solution in the community, It may cost a lot of time to learn Native technologies or consult client engineers.

2. The open source library is relatively insufficient and the update frequency is insufficient

The ecology of Flutter is not perfect enough. New business access needs to build its own wheels, especially when the business team is not proficient in Flutter, which will increase additional costs. Flutter can be promoted more easily in large and medium-sized enterprises. In addition, Flutter documents are a little limited and there is not much experience for reference. In the future, more developers should be strengthened and encouraged to participate in ecological construction.

3. There is a certain competitive relationship with the native ecosystem

One of my friends told me about how the Android development team asked him, “Why are you developing apps with Flutter? What’s wrong with Our Android? Tell us we can improve it.” Not to mention a lack of understanding of cross-platform, but at least a sense of the native platform’s concern about cross-platform technology, many Android teams are launching Kotlin Multiplatform in an effort to capture more of the market. The official announcement was intended to say that the core features and functions of apps must be included in the binaries of the software, rather than implementing dynamic updates through technologies like HTML5. Apple is going to suppress dynamic updates. Google took the initiative to remove Flutter’s iOS dynamic capability, and the final product that Flutter was packaged into is IPA. Flutter is actually fully compliant with the specification, and there are even apps developed using Flutter that have been recommended by Apple. On the contrary, React Native, Weex, H5 and other technologies are dynamic solutions, which is exactly what Apple wants to control. Currently, Apple’s attitude is not to advocate, but it does not guarantee that they will not be banned. Even so, Apple doesn’t want the native development ecosystem to be usurped by other cross-platform technologies. Apple is pushing the SwiftUI framework in an effort to fend off the erosion of native development by cross-platform technologies like Flutter. The pace of Flutter should be strengthened in the future, so that more large apps can benefit from Flutter technology. Only when the user group comes up, can the status and discourse power of Flutter be higher in the future. For example, small programs currently do not meet the review requirements of Apple in principle, but all large applications basically have the function of small programs online. It doesn’t look like Apple is killing the applets.

Flutter is not the ultimate cross-platform choice

From Hybrid App to React Native to Flutter, cross-platform technologies emerge one after another. Flutter is currently the hottest technology for cross-platform development, but I don’t think Flutter is necessarily the ultimate cross-platform development. It has historical limitations, and I can only say that Flutter is probably the most promising cross-platform technology at the moment. I would recommend trying Flutter if you have high performance fluency requirements, or if you have multiple products that want to iterate quickly on multiple sides of trial and error.

For some time to come, there will be multiple cross-platform technologies. Flutter has not been able to completely overwhelm other cross-platform technologies, so we can consider a more suitable solution according to the team and business characteristics. Students with certain client experience can acquire Flutter more quickly. If the team has a good landing on React Native, the business does not encounter performance bottlenecks, and the team lacks client capability, it is recommended to conduct technical research and precipitation first, instead of blindly pursuing new technology. Only when the team is capable and the business has demand. It is recommended to consider switching technology stacks again.

As we mentioned earlier, the much-discussed and mysterious Fuchsia system also uses Flutter on its UI framework. Fuchsia is a next-generation operating system developed by Google. Fuchsia is a new modular design concept, cross-platform framework technology system. It can support fast tailoring and customization, and is more suitable for future diversified devices, including mobile phones, tablets, notebooks, routers, smart devices, robots, etc. Fuchsia is likely to become a new universal operating system across all platforms.

At this stage, attempts to explore and accumulate precipitation Flutter technology capabilities and business applications using Flutter technology will be strategically ahead. The choice of Flutter can be described as “advance can attack, retreat can defend”. Further forward, Flutter application can seamlessly migrate to Fuchsia system in the future, and expand to a wider range of user scenarios by borrowing the energy of Fuchsia system. Taking a step back, Flutter technology itself performs well on Android/iOS compared to other cross-platform technologies.

Flutter was originally chosen not because it must be the ultimate future choice, but because it might be something different.

Prospect of Flutter: Will eventually move towards multi-terminal integration

Review the evolution of the entire mobile operating system, from Symbian feature phone to Android/iOS smartphone, small screen phone to full screen, fringe screen, water screen. The evolution of any system is finally reflected in the input and output two links. After receiving the input signal, the operating system processes the output information to the user. From touch-tone interaction to touch screen interaction, with the transition of the symbian system to Android, interactive way in the future will be more intelligent creatures, the touch screen interaction can understand human touch input mode, the future will be toward the people is the more common form of hearing (voice) input and vision (body posture, facial expressions, etc.) input, Even olfactory (smell change) input, which will come with the new operating system. Going from small screen size to large screen size does not lead to an operating system revolution, because technological innovation is discontinuous, and discontinuity leads to the second curve and the birth of new technology. From mainframes in 1960, to personal notebooks in 1990, to smartphones now, the devices themselves have gotten smaller and smaller. The device of the future, if it develops discontinuous revolution, may no longer need physical hardware, can output anywhere, a blank sheet of paper, a wall, by then the OPERATING system UI architecture will certainly have a completely new change.

With the development of science and technology, the arrival of 5G era, and the increasing maturity of artificial intelligence, what changes will the terminal have in the end? Will there be a new operating system? Will there be any new changes to the UI architecture of the system? Is it compatible with Android/iOS? Will The Fuchsia system with the Flutter UI framework shine in IOT and new ways of interacting with it? Is there a superplatform that connects everything?

As the technology evolves, so does the platform itself. In the future, Flutter will evolve towards multi-terminal integration, supporting more terminals (including tablets, laptops, smart devices, etc.). As a cross-platform UI framework with a self-rendering solution, Flutter is a high level of cross-platform technology, but it needs to improve its engineering capabilities and ecosystem in order to attract more developers.

Join us

Welcome more friends to join bytedance mobile Platform Department to explore and deeply explore mobile terminal technology. The team has a strong technical atmosphere. We hope to create a different future with Android/iOS/Flutter. You can send your resume to [email protected] and see gityuan.com/job for more details.