foreword
After more than 2 months of intense development work, today we released a new version 0.10.0. The core function of this version is to support the Flutter Widget hybrid rendering scheme, and simply encapsulate the Flutter Widget into a Custom Element, which can be provided to the front-end for use, not only It enriches the front-end component ecology, and can access more business scenarios by accessing the native high-performance container. The following describes the major updates of this version.
update content
Support Flutter Widget hybrid rendering
Previously, Kraken's support for Flutter Widgets was limited to simple leaf nodes (such as pictures, videos, text, etc.). In version 0.10.0, Kraken supports complete hybrid rendering, which can access complex such as waterfalls and long lists. The container type makes it possible to nest Flutter Widget and Kraken.
The following example demonstrates how to encapsulate Flutter's pull-down refresh and waterfall widgets into custom components and use them on the front end.
- The EasyFresh and WaterfallFlow Widgets are encapsulated into Custom Elements on the Dart side.
- Create custom components on the front end via standard DOM APIs and use them in JSX.
The hybrid rendering capability of Web and Flutter Widget, under the background of the integration of the large front-end technical system, enables the front-end to exert its own advantages of strong rendering capability and high development efficiency, focusing on page layout and business logic assembly, and the client can exert good performance and rich interaction. Focus on the development of various high-performance containers (such as pull-to-refresh, recyclable lists, waterfalls) to maximize capacity and production efficiency. For the detailed technical solution, please refer to the article "Kraken Builds a Large Front-end Hybrid Rendering Technology System - Web and Flutter Widget Hybrid Rendering Solution ".
Enhanced styling capabilities
The 0.10.0 version mainly strengthens the style ability in terms of rendering ability. We have completed the common CSS ability <style>, <link>label and classNamethese commonly used CSS functions. The style sharing achieved by className can reduce the style string in JSBridge compared to the inline style. on the transfer time, and reduce the memory footprint on the dart side.
In addition, we support the CSS Variables feature. Through CSS Variables, you can easily adapt to the dark mode of the APP (Dark Mode) at the front end.
performance optimization
Another focus of version 0.10.0 is to optimize performance and improve application stability. Through system refactoring on the code architecture, we have fixed many issues that affect the performance of the first screen, scrolling frame rate, and memory usage, ensuring that the business can be implemented. Pass the published performance baseline.
JSBridge performance optimization
On the JSBridge side, by optimizing the creation time of JS objects and the time-consuming means of optimizing createElement and createTextNode, the overall time for creating a JS DOM tree on the C++ side is improved.
Layout performance optimization
By adding caching, the calculation of constraints of unnecessary renderObjects is reduced, and the time-consuming of the layout stage is reduced, and the performance is improved by about 45% in the scenario of deep Flex container nesting. In addition, we have also optimized the rendering performance of long text, rendering only the visible part of the text in the overflow hidden container to reduce unnecessary text rendering.
Performance Testing
We constructed a long list page with infinite loading. The test machine is the low-end Android phone Xiaomi 6, and compared the performance of the 0.9.0 and 0.10.0 versions in terms of first screen loading and scrolling frame rate.
The following video is a comparison of the loading time of the two versions at 0.5x speed. The left side is the 0.10.0 version, and the right side is the 0.9.0 version. The optimized first screen time is increased by about 10%.
The following video is a comparison of the scrolling frame rate of the two versions. The left is version 0.10.0, and the right is version 0.9.0. When scrolling to a certain number of nodes, new nodes will be dynamically created. The old version of Layout takes time There are more obvious freezes. After the optimization of the new version, the scrolling will be much smoother, and the frame rate can reach about 50 fps on the low-end Android phone Mi 6.
Flutter version support
The 0.10.0 version has upgraded the support for Flutter to 2.5.3. Flutter 2.5 is the second largest version update in the history of Flutter, and it has made a lot of improvements in performance and development tools.
In addition, the 0.10.0 version will continue to support the Flutter 2.2 version until the 0.11.0 version is released. Note that Kraken 0.10.0 will only release the release package that supports the Flutter 2.5.3 version. The release package that supports the Flutter 2.2 version requires developers to be in Kraken. The source code of checkout on Github is 0.10.0-flutter-2.2tagcompiled by yourself.
Linux support
Version 0.10.0 added support for Linux system, please refer to README for the compilation method .
other updates
In addition to the capabilities described above, we have also fixed a number of rendering consistency and performance bugs, see CHNAGELOG for details .
More about Beihai Kraken
community collaboration mechanism
We hope to build Kraken's underlying capabilities and ecology together with many developers in the community through a good community collaboration mechanism. The Kraken team participates in Kraken feature 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.
Simply put, as long as you submit a certain quality and quantity of code to the Openkraken Group, you can become a collaborator; after submitting constructive contributions to the project, TSC members have the right to nominate collaborators to participate in the TSC.
The Kraken team hopes to enable developers in the community to better participate in the evolution of the project through a friendly and participatory collaboration mechanism, so that everyone's voice can be heard, and jointly promote the development of Kraken and Web standards. developing.
More detailed cooperation mechanisms can be moved to Github TSC .