可以用Vue写Flutter？这我真没见过

Posted 2021-10-05 SHERlocked93

作者：大帅老猿

原文链接：https://juejin.cn/post/6965514185371287582

本篇主要围绕Vue构建高性能 Flutter 应用话题展开

在当下，跨端已经是前端绕不开的一个话题，随着 IoT 设备的普及越来越多的“端”涌现到我们的日常开发中。自 Hybrid 、React Native（Weex）后，Flutter 凭借其精简的渲染管线以及自绘渲染的特性，一跃成为这两年跨端的新宠。但其用 Dart + Widget 的开发模式以及与前端割裂的生态造成了研发成本过高。基于这个背景，我们探索一种基于 W3C 标准的 Flutter 应用方案，向上对接前端生态，向下通过自绘保证多端一致性。

以上是本次VueConf2021^[1]中，由阿里巴巴淘系技术部染陌带来的分享。不过在他的分享的前半部分，几乎都在讲述跨端的历史，以及Flutter之所以出现并流行的原因。像是一个用于阿里内部的报告：p ，不过他的分享后，更有VueConf2021全场最佳绿哥的灵魂拷问：

Weex已经黄了，你这个能坚持维护多久？

开个玩笑，有些小伙伴还不了解Flutter，我分享一下我对于Flutter的理解

Flutter究竟好在哪？

1. 跨端一致性

2. 跨端一致性

3. 跨端一致性

这里真不是跟大家开玩笑，Flutter当然还有一些其他的优点，但在我看来，那些优点和跨端一致性相比都不足一提。或者说，跨端一致性是Flutter能在跨端框架圈能立住脚的核心原因之一，正因为这个非常sexy的特性，开发者们愿意去适应和接受Flutter框架的“固执”...

Flutter的固执？

我并不了解Flutter为何固执的设计成今天这个样子，它并不难学，但是对于一个已经习惯了Web前端开发习惯和生态的开发者而言，要去适应另一套风格和习惯自然是有不小的成本。

另外，Web前端工程师的生存环境越来越艰难！内卷成灾：p

即使掌握了Flutter，却往往不能一直写Flutter，要时常在Dart/JS，Flutter/Vue之间来回横跳，这就相当难受了。

比如笔者就是如此，所以经常大脑缺氧，记忆错乱...

举几个例子大家感受下

• 异步函数

//javascript
async function func(){
}

//dart
func() async{
}

• 随机值

//javascript
Math.random();
Math.floor(Math.random()*5);

//dart
Random().nextDouble();
Random().nextInt(5);

• 日志打印

//javascript
console.log();

//dart
print();

• 数组

//javascript
var arr = [];
arr.push(1);
arr.push(1,2,3,4,5);

//dart
var arr = [];
arr.add(1);
arr.addAll([1,2,3,4,5]);

这种差异我仅列举冰山一角，你如果日常要在这两种习惯间反复横跳，会不会疯？

所以，既利用Flutter的跨端一致性，但又可以用沿用Web前端开发者们习惯来编写代码，完成开发多好呢？kraken就在这个背景下诞生

Kraken是个啥

Open Kraken（openkraken.com/）^[2]

阿里巴巴历时 3 年自研开发的 Web 渲染引擎 北海（英文名：Kraken）正式开源，致力打造易扩展，跨平台，高性能的渲染引擎，并已在优酷、大麦、天猫等业务场景中使用。

所以kraken到底能干嘛，大家可以去看官网，我的理解是

Weex = JS+Vue+原生渲染

Kraken = JS+Vue/React/Rax+Flutter自渲染

而Flutter脱胎于web标准，是chrome团队去掉一些乱七八糟的web规范后...

所以我可不可以理解为，Kraken把那些乱七八糟的web规范整回来了~

也就是说，Kraken = 用Flutter实现了一个Webkit，这个理解，我特意向Flutter中国的朋友请教了一下...

参考资料

[1]

https://vue.w3ctech.com/: https://link.juejin.cn?target=https%3A%2F%2Fvue.w3ctech.com%2F

[2]

https://openkraken.com/%EF%BC%89: https://link.juejin.cn?target=https%3A%2F%2Fopenkraken.com%2F%25EF%25BC%2589

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1. 点个「在看」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -_-）

2. 欢迎加我微信「 sherlocked_93 」拉你进技术群，长期交流学习...

3. 关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。

点个在看支持我吧，转发就更好了