Kraken V0.10.0 release – Support for hybrid rendering of Flutter Widgets

preface

After more than 2 months of intensive development work, we have released the new version 0.10.0 today. The core function of this release is to support the mixed rendering solution of the Flutter widgets. The Flutter widgets can be provided to the front-end by simply packaging them as Custom elements. It not only enriches the front-end component ecosystem, but also allows access to more business scenarios through access to Native high-performance containers. The following describes the major updates.

Update the content

Support for Flutter Widget mixed rendering

Previously, Kraken’s support for Flutter widgets was limited to simple Leaf nodes (images, videos, text, etc.). In version 0.10.0, Kraken supports full hybrid rendering and can access complex container types such as waterfall streams and long lists. Make it possible to nest the Flutter Widget and Kraken with each other.

The following example demonstrates how to encapsulate the pull-down refresh and waterfall stream widgets of Flutter into custom components and use them at the front end.

  1. Encapsulate EasyFresh and WaterfallFlow widgets as Custom Elements on the Dart side.

  2. Create custom components on the front end through standard DOM apis and then use them in JSX.

The combination of Web and Flutter Widget rendering capability enables the front-end to focus on page layout and business logic assembly with its advantages of strong rendering capability and high development efficiency under the background of the integration of the technology system of the big front-end. The client can give full play to the advantages of good performance and rich interaction, focusing on the development of various high-performance containers (such as pull refresh, recyclable list, waterfall stream), to maximize capacity and productivity. For detailed technical solutions, please refer to the article “Kraken Building a Large Front-end Hybrid Rendering System — A Hybrid Rendering Solution for the Web and Flutter Widgets”.

Enhanced style capabilities

In addition, we support the feature of CSS Variables, through which the APP’s Dark Mode can be easily adapted in the front end. The following figure shows an example of the Dark Mode on the page.

Performance optimization

Another focus of 0.10.0 was to optimize performance and improve application stability. Through system refactoring of the code architecture, we fixed a number of issues that affected first-screen performance, scrolling frame rate, and memory usage, ensuring that the business that was launched passed the performance baseline of the release.

JSBridge performance optimization

JSBridge improves the overall creation time of the JS DOM tree on the C++ side by optimizing the creation time of the JS object and the elapsed time of createElement and createTextNode.

Layout performance optimization

Reducing unnecessary constraints calculations of renderObjects by caching reduces Layout stage time, improving performance by around 45% in deep Flex container nesting scenarios. In addition, we also optimized the rendering performance of long text, rendering only the visible part of text in overflow Hidden container to reduce unnecessary text rendering.

The performance test

We constructed a long list page with infinite loading. The test machine was low-end Android MI 6, and compared the performance of 0.9.0 and 0.10.0 versions in terms of first screen loading and scrolling frame rate respectively.

The following video shows the comparison of the first screen loading time of the two versions at 0.5 times speed. The first screen loading time of the two versions is 0.10.0 on the left and 0.9.0 on the right, which improves the first screen time by about 10%.

The following video shows the comparison of scrolling frame rates between the two versions. The left version is 0.10.0, and the right version is 0.9.0. When scrolling to a certain number of nodes, new nodes will be dynamically created. On the low-end Android Mi 6, the frame rate is around 50 FPS.

Flutter Version support

Support for Flutter has been upgraded to 2.5.3 in Version 0.10.0. Flutter 2.5 is the second major update in Flutter history, featuring numerous improvements to Flutter performance and development tools.

In addition, 0.10.0 will continue to support Flutter 2.2 until The release of 0.11.0. Note that Kraken 0.10.0 will only release releases that support Flutter 2.5.3. The release package that supports Flutter 2.2 requires developers to compile the source code for the 0.10.0-flutter 2.2tag on Kraken’s Github.

Linux support

Linux support has been added in version 0.10.0. See README for compilation methods.

Other updates

In addition to the capabilities described above, we have also fixed a number of render consistency and performance bugs, as described in CHNAGELOG.

More on North Sea KRAKEN

Community collaboration mechanism

We hope to build the underlying capabilities and ecology of Kraken together with many developers in the community through a good community collaboration mechanism. The Kraken team participates in Kraken feature iterations and issue discussions in a collaborative manner. At the same time, a technical committee (TSC) composed of a group of collaborators determines the technical direction, releases, and customizations of standards.

Simply put, you can become a collaborator by submitting a certain quantity and quality of code to the Openkraken Group; After submitting constructive contributions to the project, TSC members have the right to nominate collaborators to participate in the TSC.

The Kraken team hopes that through a friendly, participatory and collaborative mechanism, developers in the community can better participate in the evolution of the project, so that everyone’s voice can be heard and contribute to the development of Kraken and the development of Web standards.

A more detailed collaboration mechanism can be found at Github TSC.

\