北海(Kraken)v0.10.0 发布 - 支持 Flutter Widget 混合渲染

简介: 经过 2 个多月紧张的开发工作,今天我们发布了全新的 0.10.0 版本,该版本的核心功能是支持 Flutter Widget 混合渲染方案,将 Flutter Widget 简单封装成 Custom Element 就可以提供给前端使用,不仅丰富了前端的组件生态,而且可以通过接入 Native 的高性能容器接入更多的业务场景。以下介绍该版本的主要更新内容。

前言

经过 2 个多月紧张的开发工作,今天我们发布了全新的 0.10.0 版本,该版本的核心功能是支持 Flutter Widget 混合渲染方案,将 Flutter Widget 简单封装成 Custom Element 就可以提供给前端使用,不仅丰富了前端的组件生态,而且可以通过接入 Native 的高性能容器接入更多的业务场景。以下介绍该版本的主要更新内容。

更新内容

支持 Flutter Widget 混合渲染

之前 Kraken 对于 Flutter Widget 的支持只限于简单的 leaf 节点(如图片、视频、文本等),在 0.10.0 版本中 Kraken 支持了完整的混合渲染,可以接入类似瀑布流、长列表这种的复杂容器类型,使得 Flutter Widget 与 Kraken 互相嵌套成为可能。

下面示例演示了如何将 Flutter 的下拉刷新与瀑布流 Widget 封装成自定义组件,并且在前端使用。

  1. 在 Dart 侧将 EasyFresh 与 WaterfallFlow Widget 封装成 Custom Element。

  1. 在前端通过标准的 DOM API 创建自定义组件,然后在 JSX 中使用。

Web 与 Flutter Widget 混合渲染能力在大前端的技术体系融合的背景下,使得前端能发挥自身渲染能力强、开发效率高的优势专注于页面排版和业务逻辑组装,客户端能发挥性能好、交互丰富的优势专注于各种高性能容器(如下拉刷新、可回收列表、瀑布流)的开发,达到能力与生产效率的最大化。详细的技术方案可以参考《北海(Kraken)构建大前端混合渲染技术体系 —— Web 与 Flutter Widget 混合渲染方案 这篇文章。

样式能力增强

0.10.0 版本在渲染能力上主要是补强了样式方面的能力,我们补齐了 <style><link> 标签与 className 这些常用的 CSS 能力,通过 className 实现的样式共享,相对于内联样式能减少样式字符串在 JSBridge 上的传输时间,并减少 dart 侧内存占用。

另外我们支持了 CSS Variables 特性,通过 CSS Variables 可以在前端方便地适配 APP 的深色模式(Dark Mode),下图为问大家页面的深色模式示例。

O1CN01jvEFYU1nTGi9SBJNi_!!6000000005090-0-tps-1080-2160.jpg

性能优化

0.10.0 版本的另一个重点是优化性能与提升应用稳定性,通过代码架构上系统的重构,我们修复了诸多影响首屏性能、滚动帧率、内存占用的问题,保证了落地的业务能够通过发布的性能基线。

JSBridge 性能优化

在 JSBridge 侧通过优化 JS 对象创建时间、以及优化 createElement 与 createTextNode 的耗时的手段,提升 C++ 侧创建 JS DOM tree 的整体时间。

Layout 性能优化

通过加缓存的方式减少不必要 renderObject 的 constraints 计算减少 Layout 阶段耗时,在深度 Flex 容器嵌套的场景下性能提升 45% 左右。另外我们也优化了长文本的渲染性能,在 overflow hidden 容器中只渲染可见部分本文,减少不必要的文本渲染。

性能测试

我们构造了一个无限加载的长列表页面,测试机为低端安卓机小米 6,分别对比了 0.9.0 与 0.10.0 版本在首屏加载与滚动帧率方面的表现。

下面视频为两个版本在 0.5 倍速下首屏加载时间的对比,左侧为 0.10.0 版本,右侧为 0.9.0 版本,优化首屏时间提升 10% 左右。

首屏对比.gif

下面视频为两个版本滚动帧率的对比,左侧为 0.10.0 版本,右侧为 0.9.0 版本,无限滚动时滚动到一定的数量的节点会动态创建新的节点,旧版本 Layout 耗时较多有比较明显的卡顿,新版本优化后滚动会顺畅许多,在低端安卓机小米 6 上帧率能达到 50 fps 左右。

帧率对比.gif

Flutter 版本支持

0.10.0 版本对 Flutter 的支持度升级到了 2.5.3,Flutter 2.5 是 Flutter 历史上排名第二的大版本更新,主要对性能与开发工具方面进行了大量改进。

另外 0.10.0 版本会继续支持 Flutter 2.2 版本,直到 0.11.0 版本发布为止,注意 Kraken 0.10.0 只会发布支持 Flutter 2.5.3 版本的 release 包,支持 Flutter 2.2 版本的 release 包需要开发者在 Kraken 的 Github 上 checkout 0.10.0-flutter-2.2tag 的源码下来自行编译。

Linux 支持

0.10.0 版本新增了对于 Linux 系统的支持,编译方式请参考 README

其他更新

除了以上介绍的能力之外,我们也修复了大量渲染一致性方面与性能方面的 bug,详细请见 CHNAGELOG

关于北海 KRAKEN 更多的内容

社区协作机制

我们期望通过一种良好的社区协作机制,来与社区的众多开发者一起共建 Kraken 底层能力及生态。
Kraken 团队通过协作者的方式来参与 Kraken 功能迭代以及 issue 讨论等工作。同时,通过由一部分协作者组成的技术委员会(TSC)来确定技术方向、发布以及定制标准等工作。

简单地说,只要向 Openkraken Group 提交一定质量和数量的代码即可成为协作者;对项目提交建设性的贡献后,TSC 成员有权提名协作者参与到 TSC 中。

Kraken 团队期望通过一种友好、共同参与的协作机制,让社区的开发者能够更好地参与到对项目的演进中去,让每个人的声音都能被听到,共同促进 Kraken 以及 Web 标准 的发展。

更详细的协作机制可以移步 Github TSC

目录
相关文章
|
2天前
|
存储 调度 安全
腾讯T2大牛亲自讲解,关于Flutter文本组件Widget的全面解读
腾讯T2大牛亲自讲解,关于Flutter文本组件Widget的全面解读
腾讯T2大牛亲自讲解,关于Flutter文本组件Widget的全面解读
|
2天前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
3天前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
3天前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
3天前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。
|
3天前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
3天前
|
开发框架 搜索推荐 Android开发
Flutter的Widget基础:概念、分类与深入探索
【4月更文挑战第26天】Flutter Widget详解:基础、分类与工作原理。Widget是Flutter UI的核心,描述界面外观而非直接渲染。分为基础、布局、可滚动及状态管理四大类。基于响应式编程,状态变化时自动更新UI。了解其概念、分类和原理,能助开发者高效构建精美应用。随着Flutter生态发展,Widget系统潜力无限。
|
8月前
|
Dart 前端开发 开发工具
谷歌移动UI框架Flutter教程之Widget
谷歌移动UI框架Flutter教程之Widget
|
9月前
Flutter源码分析笔记:Widget类源码分析
本文记录阅读与分析Flutter源码 - Widget类源码分析。
62 0
Flutter源码分析笔记:Widget类源码分析
|
10月前
|
API Android开发 容器
Flutter控件之基类Widget封装
基类的Widget主要确定以下几个方面,第一就是,自定义一个抽象类还是非抽象类,第二、继承方式,采取有状态还是无状态,第三、关于组件的点击方式,如何进行实现。
114 0