Flutter-based Web rendering engine "Beihai" officially open source

Beihai (English name: Kraken), a web rendering engine developed by Alibaba for 3 years, is officially open sourced. It is committed to creating an easily scalable, cross-platform, and high-performance rendering engine. .

Official website: https://openkraken.com

Github：https://github.com/openkraken/kraken

background

The rapid development of Internet business is inseparable from cross-platform technology, and the most mature cross-platform technology is the familiar browser. Its inherent cross-platform capability, open standards and strong ecology make it a hot container one. However, because it is not designed for performance, and has problems such as heavy historical burdens, compatibility, and slow updates from manufacturers, the browser's performance on the mobile side is not outstanding. Although the development of the network and hardware has brought enough performance dividends, the increasingly complex business can always fully understand the existing performance.

In the past, there have been many explorations and practices of cross-platform solutions, and new technical solutions have been continuously developed with the tide of history. From the earliest H5 solution to the Hybrid solution, and the later Weex/React Native solution, to the now in full swing Flutter.

developing

Due to its streamlined rendering pipeline, efficient layout rendering capabilities, and self-drawn rendering features, Flutter has become the new darling of the cross-end industry in the past two years. Before the emergence of Flutter, the mainstream solution was still React Native (Weex), and the bottom layer of this solution called the native View. It is precisely because of this that it is difficult for this solution to ensure complete multi-end consistency, because the native View itself has some limitations, and the limited capabilities cannot meet all the needs of developers, so it is a bit far-fetched to implement the W3C standard. And Flutter does self-drawing rendering based on the lower-level Skia, which can well ensure multi-end consistency.

Students who are familiar with Flutter must know that Flutter is developed in Dart language and Widget. Although Dart language is not very expensive for front-end students who are familiar with JavaScript, they are already very familiar with the state-driven development model of Widget. , but the contradiction between the existing infrastructure and the front-end ecology as a whole is unacceptable. Furthermore, dynamic capabilities are just a necessity for Internet businesses, and Flutter for Web is not ideal at present.

After all, the first step in introducing a new technology is to address the cost of introducing the new technology . Therefore, we are actively exploring a cross-platform solution that connects the front-end ecosystem upwards and uses self-drawn rendering downwards.

Thus, this high-performance cross-terminal rendering engine based on the W3C standard, Kraken, was born.

kraken

Based on W3C standards

The users that Kraken will ultimately serve are still front-end developers, so how to reduce the cost of learning and familiarity for front-end developers and how to quickly migrate old projects to Kraken? We don't want to re-create a new set of DSL as a development framework for developers to use. If necessary, Flutter's own Widget + Dart has done a good job. Front-end developers may use Rax , or they may use Vue or React . We all expect Kraken users to be able to achieve "zero cost" quick access. Then, you need to rely on a set of standards that developers are very familiar with to implement Kraken.

The W3C standard is one of the most important standards on the Internet, and it is also a standard that front-end developers are very familiar with. The rendering engine is implemented based on the W3C standard, and front-end developers who are familiar with browsers can get started quickly at almost "zero cost". At the same time, we can get rid of some heavy historical baggage, making Kraken's rendering more efficient.

Strong front-end developer ecosystem

Benefiting from the development based on W3C standards, front-end developers on Kraken can fully use the huge front-end ecosystem they are familiar with.

First of all, in the choice of research and development framework, whether the developer uses Rax or Vue , or React or Angular , it can be guaranteed to complete the rendering well on Kraken.

undefined

Thirdly, the front-end has a very prosperous ecology. A large number of NPM packages in the community can be used directly on the Kraken project, and a large number of mature modules ensure the efficiency of business development.

In addition, various tools that developers usually use in developing projects can be used directly on the Kraken project without any additional familiarity and learning costs.

undefined

By docking with the Chrome DevTools Protocol, developers can directly use the very familiar Chrome DevTools to debug the developed pages. Whether developers need to modify CSS styles, view the DOM structure, or debug JavaScript code through breakpoints, the same debugging experience as web development is guaranteed.

Rendering Consistency

Kraken's rendering capabilities are based on its W3C standards, so it can be guaranteed to be completely consistent with the results of Web rendering.

The following picture is a screenshot of the actual business. From left to right, Kraken (iOS), Kraken (Android) and the Web version are respectively. It can be seen that the rendering results are completely consistent.

Better experience and capabilities than the web

So some students here would like to ask, in addition to the development and debugging experience that is consistent with the current front-end development, as well as the rendering consistency, what kind of capabilities can be obtained in the end, and what benefits can be obtained compared with browsers?

Infinite scrolling list

In business development, sometimes developers encounter some "infinite scrolling lists" that cannot be paginated but have a large amount of data. In client-side development, there are RecyclerView/UITableView to implement the layout container for scrolling recycling. Although there are many front-end optimization solutions to deal with this problem in web standards, it has always been a difficult problem. Kraken tried to solve this problem on the container side by increasing the CSS Display property value - sliver.

When the child element in the Sliver container scrolls out of the Viewport of the container, the renderobject used for rendering in the child element can be recycled to save memory usage. When the child element reappears, the renderobject is regenerated according to the DOM description.

This is a demo of tens of thousands of nodes. The left side is the overflow: scroll container, and the right side is the display: sliver container. You can see that the sliver container scrolls much more smoothly in the "infinite scroll list" scene. There is FPS data in the upper left corner, you can see that the container FPS of display: sliver has maintained a normal level, while the container FPS of overflow: scroll has dropped significantly. In addition, there are also greater gains in memory.

Synchronized Rasterization

In the browser, rasterization is performed asynchronously. When inertial scrolling, a white screen will appear, which is an unavoidable problem with WebView. With Flutter's efficient synchronous rasterization implementation, Kraken can scroll long lists quickly without a white screen.

Enhanced Gesture Ability

Kraken has built-in common gestures , so that when business developers use gesture capabilities, they no longer need to introduce a JavaScript lib to hijack Touch events for development.

Taking the swipe gesture "swipe" as an example, developers only need to use the following methods to obtain the gesture capabilities provided by default on an element. Directly use the built-in enhanced gesture capabilities to develop complex, interactive applications faster.

element.addEventLisenter('swipe',(gestureEvent) => {
	///...
})

The enhanced gesture capability solves the performance problem of frequent event delivery under the Web and the problem that JavaScript processing gestures occupies the UI thread. In addition, through the competitive field capabilities implemented inside the container, problems such as gesture penetration under the Web can be solved.

The built-in standardized gesture capabilities also ensure the standardization and uniformity of gesture interaction capabilities under different applications of the same container.

Plug-in capability

In addition to the above experiences and capabilities beyond the Web, a very important feature of Kraken is the plug-in capability . The plug-in capability provides front-end engineers with the opportunity to redefine browser capabilities . Developers only need to code a Flutter plugin to expand Kraken's own abilities.

Through the plug-in capability, developers can implement many custom tags (such as Camera or custom video player, etc.) internally, or they can sink common business components (such as Slider) into the container based on performance considerations Floor. Because the development of browser manufacturers and the formulation of standards often lag behind, developers with plug-in capabilities can quickly customize various rendering capabilities, so that business development can use the latest or enhanced capabilities.

In addition to expanding rendering capabilities, developers can also expand gesture capabilities. Expanding gesture capabilities can sink the ability to hijack Touch Event implementations on the front end into the container itself, which not only enhances the interactive experience, but also provides more possibilities for interaction.

Stability Guarantee

The rendering engine is very complex, and it often happens that changing a bug will affect the whole body. Therefore, high-coverage automated tests are required to ensure the stability of the rendering engine. After each modification, it is necessary to ensure that the existing case is no problem. Ensure that each case is compared with the results before the modification through automated testing. If there is a difference, you can modify the bug through the case and the diff of the difference.

This automated test system ensures the consistency of the case results obtained before and after each modification by Kraken to ensure the stability of the rendering engine itself.

At present, there are nearly 3,000 test cases, and will continue to increase according to more scenarios in the future to ensure the stability of Kraken.

undefined

business landing

Having talked so much about Kraken's capabilities, there must be some students who want to know how Kraken performs in actual production scenarios.

At present, Kraken has relevant business access to mobile devices and low-performance IoT devices in the C-side scenario, which can be used in actual production scenarios.

In Youku APP, Kraken has already landed a lot of business. The sub-venue page of the "Power Generation Leaderboard" shown below is an example. After the transformation of Kraken, there has been a qualitative improvement. Compared with the original plan of the same page, the rendering of the first screen has increased by 28.4%, and the frame rate has increased by 8.3%. .

On IoT devices, our Tmall U-first business also performed very well on low-performance IoT devices offline. In the relatively complex offline scenarios such as Slider, animation and interaction performance are good, and the application runs for a long time, and the memory stability does not increase significantly, ensuring the stability of offline IoT applications.

Tmall U first

community collaboration mechanism

The kraken team hopes to build Kraken's underlying capabilities and ecology together with many developers in the community through a good community collaboration mechanism.

The kraken team expects to participate in Kraken function iterations and issue discussions through collaborators . At the same time, through a technical committee (TSC) composed of a group of collaborators to determine the technical direction, release and customize the standard and other work.

The kraken team hopes that through a fair and good collaboration mechanism, developers in the community can better participate in the evolution of container technology for web standards, so that everyone's voice can be heard, and jointly promote Kraken and the industry development of.

For more detailed collaboration mechanisms, you can move to github .

future outlook

In the past, when we were doing front-end performance optimization, it was often optimized to the browser level, and it was difficult to optimize further down. The emergence of Kraken has given front-end engineers new opportunities and challenges. It provides front-end engineers with an opportunity to redefine the ability of browsers , and has a very large room for imagination:

Go beyond the capabilities of the Web, and match the performance and experience of Native.
Implement standards faster than browser manufacturers, define problems at the forefront of standards, and push standards back through implementation capabilities to promote the development of the industry.
You can view the optimization and experience of the entire rendering link from top to bottom, optimize performance and define some new rendering capabilities through full-link means.
At present, the increasingly complex front-end applications have caused JS bundles to become more and more bloated. Developers can also abstract and reuse common capabilities and sink them to the container level. The reuse of rendering and common capabilities no longer only depends on NPM. Sink generic abilities to do more.
Through the combination of "cloud + terminal", there is also an opportunity to explore a new generation of future-oriented rendering technology.
Based on Kraken, explore more possibilities...

Finally, I hope that Kraken can bring you better experience and capabilities. I also hope that everyone can actively participate in the Kraken project and build the Kraken ecosystem together.

Official website: https://openkraken.com

Github：https://github.com/openkraken/kraken