高手问答第 263 期 —— 聊聊基于 Flutter 的 Web 渲染引擎 Kraken

白开水不加糖 发布于 07/05 08:08
阅读 4K+
收藏 13

开源软件供应链点亮计划,等你来!>>>

Kraken 地址:https://github.com/openkraken/kraken

互联网业务如火如荼地发展离不开跨平台技术,而最成熟的跨平台技术就是大家熟悉的浏览器了,它与生俱来的跨平台能力、开放的标准以及强大的生态使它成为炙手可热的容器之一。而由于其本身不是为了性能而设计的,并且历史包袱重、兼容性、厂商更新慢等问题,浏览器在移动端的表现并不突出。尽管网络以及硬件的发展带来了足够多的性能红利,但是日益复杂的业务总能把已有的性能吃透。

过去也有很多对跨平台方案的探索与实践,新的技术方案也随着历史的浪潮不断地发展。从最早的 H5 方案到 Hybrid 方案,以及后来的 Weex/React Native 方案,到现在如火如荼的 Flutter。

Flutter 由于其精简的渲染管线,高效的布局渲染能力,以及自绘渲染的特性,一跃成为这两年跨端届的新宠。而在 Flutter 出现之前,主流的方案还是用 React Native(Weex)的,这套方案的底层调用了原生的 View。正是因为如此,导致这套方案很难保证完全的多端一致性,因为原生 View 本身就存在一些限制,有限的能力不能满足开发者所有的需求,所以在实现 W3C 标准时有些牵强。而 Flutter 基于更底层的 Skia 做自绘渲染,可以很好地保证多端一致性。

熟悉 Flutter 的同学肯定知道 Flutter 是用 Dart 语言以及 Widget 来开发的,虽说 Dart 语言对熟悉 JavaScript 的前端同学来说上手成本并不是很高,对于 Widget 这种基于状态驱动的开发模式也已经是非常熟悉,但是整体上与已有基建与前端生态割裂的矛盾是无法接受的。再者,动态化能力对于互联网业务来说简直就是刚需,而目前来看 Flutter for Web 并不理想。

毕竟,引入一项新技术的第一步是解决引入这项新技术的成本问题。因此阿里方面积极探索一种向上对接前端生态,向下使用自绘渲染的跨平台方案。于是诞生了这款基于 W3C 标准的高性能跨终端渲染引擎——北海(Kraken)。

OSCHINA 本期高手问答(7 月 05 日 - 月 11 ) 我们请来了 @染陌同学  和大家一起探讨以下问题

  1. Kraken
  2. 前端技术
  3. FLutter

可讨论的问题包括但不限于以上内容其他相关问题也欢迎大家积极提问!

嘉宾简介:

染陌 ,阿里巴巴淘系技术部前端架构团队成员,高性能 Web 渲染引擎 Kraken 核心开发者,《剖析 Vue.js 内部运行机制》作者。

知乎:https://www.zhihu.com/people/cao-yang-49

Github:https://github.com/answershuto

为了鼓励踊跃提问,@博文视点   会在问答结束后从提问者中抽取 5 名幸运用户赠予 《Flutter 企业级应用开发实战——闲鱼技术发展与创新》 一书。

购买链接:https://u.jd.com/6TdgR5a

OSChina 高手问答一贯的风格,不欢迎任何与主题无关的讨论和喷子。

下面欢迎大家就相关问题向 @染陌同学 提问,直接回帖提问即可。

加载中
2
白开水不加糖
白开水不加糖

高手问答第 263 期 —— 聊聊基于 Flutter 的 Web 渲染引擎 Kraken

@Morty_a@Flutter2web@凌小宇@建安七子@blueskyred2006

恭喜以上五位网友分别获得《Flutter 企业级应用开发实战——闲鱼技术发展与创新》图书一本
请私信 @白开水不加糖     告知快递信息(格式:姓名+电话+地址)

2
赤脚小子
赤脚小子

@染陌同学 你好,尝试了FLUTTER,发现字体都是CANVAS画的都无法鼠标划取复制(WEB),而且字体加载慢的话加载完成前展示的都是小方块,体验很不好,请问这方面目前有优化方案么?

g
gamedot
无法复制文字,那这东西就没什么卵用了啊。
染陌同学
染陌同学
这是 Flutter for web 目前的实现原理,具体的可以关注 Flutter 团队的动态。
2
红薯片
红薯片

@染陌同学

自己实现渲染是否意味着你们需要自己实现H5所有标准? 目前支持多少多少标准了?

染陌同学
染陌同学
我们支持的是业务常用的一个子集,所有支持的特性都可以在我们的官网找到 http://openkraken.com/ 这样做的原因一方面是 RIO 的考量,另一方面是支持子集也可以使渲染速度更快,摒弃了一些历史包袱,因为很多能力目前来看已经没有业务使用了,反而给底层的计算逻辑带来的额外的开销。
2
feelings777
feelings777

@染陌同学  染陌你好 ,
1.闲鱼是否 已经实际 落地使用  基于 Flutter 的 Web 渲染引擎 Kraken ,  感觉 闲鱼体验很差 ,动不动提示 异常退出 ,等待修复, 并且 点击修复一直在修复中,关闭程序 ,重新打开 需要重新登录,并且发布闲置时候,编辑体验很差,ios 长按键盘移动光标 ,也没显示 ,有时候还会闪退

2. 提出问题 ,  Flutter 是用 Dart 语言以及 Widget 来开发的, 国内很多的大厂在基于Flutter的渲染方案,上层基于 W3C 标准实现,从而可以直接使用JavaScript来开发Flutter应运。个人感觉它和Weex项目差不多,只不过底层渲染使用的是Flutter的Skia。感觉Flutter 在ios 上体验还是和原生有差距 ,而且包体很大 , 而且在 Flutter iOS项目中,Dart 标准库提供了一份完全不同的实现。而且,想要把 Dart VM和标准库从 Flutter剥离出来,太困难了

 

染陌同学
染陌同学
咸鱼没有落地 Kraken。 跟原生的体验肯定有差距的,只能说尽量靠近而不太会是超越的情况,架构上考虑的不会是单点的问题,还有开发效率以及动态性等很多考量的因素,需要在这些考量中取一个最优的平衡点。与类 RN 方案最大的区别是解决了通过自绘而达到的多段一致性。
1
belief_888
belief_888

@染陌同学  看到flutter编写的页可以直接转web,是编写好页面就可以一键转换吗。其中涉及到硬件交互又是怎么处理,还是不太明白。

染陌同学
染陌同学
我们的方案是用 JS 来编码 Flutter 应用的。Flutter 转 Web 的技术原理可以 Google 一下。
1
码男
码男

@染陌同学 你好, 北海引擎是干啥用的 ?

染陌同学
染陌同学
具体介绍可以看我这篇文章 https://my.oschina.net/u/3161824/blog/5027369
1
Flutter2web
Flutter2web

@染陌同学  1.Kraken和 FLutter 之间的关系是什么?

2. Kraken 使用了什么设计模式? 前端页面父子页面关系嵌套怎么合理安排?

3.  flutter是计划 用 于做  前端技术 架构吗?目前有现成可以学习的GitHub现成地址吗?

4.作为一名新手,应该怎么学习 flutter 和  Kraken ??

染陌同学
染陌同学
Kraken 是 Flutter 生态的一部分,是 Flutter 的一个 pub,它提供了一个基于前端标准实现,可以用前端的方式开发 Flutter 应用的方案。前端开发的方式与以往开发 Web 是一致的,对于一名前端来说,没有非常多的额外学习成本。
1
猪娃娃
猪娃娃

@染陌同学

有些业务场景不需要支持IOS平台, 对于这种对跨平台不是那么重要的情况,flutter目前的开发效率与支撑度能否与其他技术想对比,未来flutter的走向会是什么样呢

染陌同学
染陌同学
具体的业务场景具体分析,技术没有银弹,可以根据自己的团队以及业务场景来做技术选型。
0
开源中国首席罗纳尔多
开源中国首席罗纳尔多

@染陌同学 您好,请问 Flutter Weex/React Native 都是原生渲染有什么区别?

染陌同学
染陌同学
Flutter 基于 Skia 做自绘渲染,很好地解决了Weex/React Native 等方案多端无法完全抹平差异的问题。
0
lmrwork
lmrwork

@染陌同学

现在开发flutter,可以直接学习2.0吗?

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部