The North Sea Web rendering engine based on Flutter is officially open source

The Web rendering engine Beihai (Kraken), developed by Alibaba for 3 years, is officially open source. It is committed to creating an easy to expand, cross-platform and high-performance rendering engine, and has been used in business scenarios such as Youku, Damai and Tmall.

Website: openkraken.com

Github:github.com/openkraken/…

background

The most mature cross-platform technology is the browser. Its inherent cross-platform capability, open standards and strong ecosystem make it one of the hottest containers. Browsers don’t do well on mobile because they’re not designed for performance, and because of historical baggage, compatibility, and slow vendor updates. Although the development of networks and hardware provides sufficient performance dividends, increasingly complex businesses can always take advantage of existing performance.

In the past, there have been many explorations and practices of cross-platform solutions, and new technical solutions have been developed with the tide of history. From the earliest H5 scheme to the Hybrid scheme, and later Weex/React Native scheme, to the current raging Flutter.

Flutter has become the latest fad in the past two years due to its streamlined rendering pipeline, efficient layout rendering, and self-drawn rendering. Before Flutter, the mainstream solution was React Native (Weex), which called the Native View at the bottom. Because of this, it is difficult to ensure complete multi-end consistency, because native View itself has some limitations, limited capabilities can not meet all the needs of developers, so the implementation of THE W3C standard is somewhat far-fetched. However, Flutter is based on the Skia at the lower level to render itself, which can well ensure the consistency of multiple objects.

Those of you who are familiar with The Flutter know that the Flutter was developed using the Dart language and widgets, although the Dart language is not very expensive for those of you who are familiar with JavaScript on the front end, We are familiar with the state-driven development model of widgets, but the overall disconnect from the existing infrastructure and front-end ecology is unacceptable. Moreover, the ability to be dynamic is a necessity for an Internet business, and Flutter for the Web is not ideal at the moment.

After all, the first step to introducing a new technology is to address the cost of introducing it. So we are actively exploring a cross-platform solution that connects up to the front-end ecology and uses self-drawn rendering down.

The result is Kraken, a high-performance cross-terminal rendering engine based on W3C standards.

Based on W3C standards

Kraken ultimately serves users or front-end developers, so how to reduce the learning and familiarity cost of front-end developers and how to quickly migrate old projects to Kraken? We don’t want to reinvent a DSL as a development framework for developers to use, but the Widget + Dart itself does a pretty good job if needed. Front-end developers may be using Rax, Vue or React, but we all expect Kraken users to have “zero cost” fast access. In that case, you rely on a set of standards that developers are familiar with to implement Kraken.

W3C standard is one of the most important Internet standards, but also front-end developers are very familiar with the standard, based on the W3C standard to implement the rendering engine, front-end developers familiar with the browser can achieve almost “zero cost” quick start. At the same time, we can get rid of some heavy historical baggage, making Kraken’s rendering more efficient.

A strong front-end developer ecosystem

Thanks to development based on the W3C standards, front-end developers on Kraken have access to the vast front-end ecology with which they are now familiar.

First of all, the choice of development framework, whether the developer is using Rax or Vue, React or Angular, is guaranteed to render well on Kraken.

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

In addition, a variety of tools that developers usually use in development projects can be directly used in Kraken projects without any additional familiarity and learning costs.

With the Chrome DevTools Protocol, developers can use Chrome DevTools directly to debug their pages. Whether developers need to change CSS styles, view DOM structures, or debug JavaScript code with breakpoints, they can ensure a web-developing-consistent debugging experience.

Render consistency

Kraken’s rendering capability is based on its W3C standard, so it is guaranteed to be completely consistent with Web rendering results.

Below is a screenshot of the actual business, Kraken (iOS), Kraken (Android) and The Web version from left to right. You can see that the rendering results are exactly the same.

Better experience and capability than the Web

So, in addition to the development and debugging experience consistent with current front-end development, and rendering consistency, what’s the ultimate capability, and what’s the payoff compared to the browser?

Infinite scrolling list

In business development, developers sometimes come across “infinite scrolling lists” with large amounts of data that cannot be pounded. In the client development there are RecyclerView/UITableView to achieve the rolling recycling layout container, and Web standards although there are also a lot of front-end optimization schemes to deal with this problem, but it has been a difficult problem. Kraken tries to solve this problem on the container side by adding the value of the CSS Display property — sliver.

When a child element in a Silver container scrolls out of that container’s Viewport, the renderObject used for rendering in that child element can be reclaimed to save memory. When the child element reappears, regenerate the RenderObject according to the DOM description.

This is a demo of tens of thousands of nodes. The left is the overflow: Scroll container, and the right is the display: sliver container. You can see that the sliver container scrolls much more smoothly in the “infinite scroll list” scenario. The FPS in the upper left corner shows that the FPS in the display: sliver container remains normal, while the FPS in the Overflow: Scroll container decreases significantly. In addition, there are big gains in memory.

Synchronous rasterization

In the browser, rasterization is done asynchronously, and with inertial scrolling, a white screen appears, which is a constant problem with WebViews. With Flutter’s efficient synchronous rasterization implementation, Kraken can scroll long lists quickly and without a blank screen.

Enhanced gesture ability

By building in common gestures, Kraken eliminates the need for business developers to introduce a JavaScript lib to hijack Touch Events when using gesture capabilities.

Taking the swipe of the gesture “Swipe” as an example, developers simply need to do the following to get the gesture capabilities that are provided by default on an Element. The ability to develop complex interactive applications more quickly by directly using the enhanced gesture capabilities built in.

element.addEventLisenter('swipe'.(gestureEvent) = > {
	/ / /...
})
Copy the code

The enhanced gesture capability addresses the performance issues of frequently passing events on the Web and the problem of JavaScript handling gestures occupying the UI thread. In addition, the competition field capability implemented inside the container can solve problems such as gesture penetration under the Web.

The built-in standardized gesture ability also ensures the standardization and unity of gesture interaction ability 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 its pluginability. Pluginability gives front-end engineers the opportunity to redefine the capabilities of the browser. Developers can extend Kraken’s capabilities by simply coding a Flutter Plugin.

Plugins allow developers to implement many custom tags internally (such as Camera or custom video player), and to lower commonly used business components (such as sliders) to the container layer for performance reasons. Because browser vendor development and standard setting are often slow, developers with plugins can quickly customize various rendering capabilities, enabling business development to take advantage of the latest or enhanced capabilities.

In addition to extending the rendering capabilities, developers can also extend gesture capabilities, which allow for the ability to take the Touch Event implementation that you previously had to hijack on the front end and sink it into the container itself, in addition to enhancing the interactive experience, it also opens up more possibilities for interaction.

Stability assurance

The rendering engine is very complex, and changing a Bug often affects the whole body. Therefore, high coverage automated tests are needed to ensure the stability of the rendering engine. After each modification, existing cases need to be ensured to be correct. Automated tests are used to ensure that each case is compared with the result before modification. If there is a difference, the Bug can be modified by case and diff of the difference.

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

Currently, there are nearly 3,000 test cases, and more will be added in the future according to more scenarios to ensure the stability of Kraken.

Business floor

With all this talk about Kraken’s abilities, I’m sure some of you want to know how Kraken performs in actual production scenarios.

Currently, Kraken has related services connected to mobile devices and low-performance IoT devices in c-end scenarios, which can be fully used in actual production scenarios.

In Youku APP, Kraken has landed a large number of businesses. For example, the identity details page shown below shows a quality improvement after the transformation of Kraken. Compared with the original scheme of the same page, the first screen rendering is improved by 28.4% and the frame rate is improved by 8.3%.

In terms of IoT devices, Kraken also has a very good performance for our Tmall U online IoT devices with low performance. The animation and interaction performance of the application is better when the application runs for a long time, and the memory stability does not increase significantly, which ensures the stability of the offline IoT application.

Community collaboration mechanism

The Kraken team expects 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 functionality iterations and issue discussions as collaborators. At the same time, a technical committee (TSC) composed of a group of collaborators determines technical direction, releases, and customizes standards.

The Kraken team hopes that through a fair and collaborative mechanism, the community of developers can better participate in the evolution of Web standards container technology, so that everyone’s voice can be heard, and jointly promote the development of Kraken and the industry.

See github for more details on collaboration mechanisms.

future

In the past, when we do front-end performance optimization, often optimize to the browser level optimization is not moving, it is difficult to further optimize. The emergence of Kraken has given front-end engineers new opportunities and challenges. It provides front-end engineers with an opportunity to redefine the capabilities of the browser and has a very large imagination space:

Surpass the capabilities of the Web and match the performance and experience of Native.
Implement standards faster than browser vendors, define issues at the forefront of standards, and push the industry forward with the ability to reverse standards through implementations.
You can look down the entire rendering link to optimize and experience, optimize performance across the whole link and define some new rendering capabilities.
At present, increasingly complex front-end applications have led to more and more bloated JS bundles. 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, but can do more by sinking common capabilities.
Through the combination of “cloud + side”, there is also an opportunity to explore the next generation of rendering technology for the future.
Based on Kraken, explore more possibilities……

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