阿里巴巴Flutter开源Kraken初体验

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

来源：xiangzhihong

https://segmentfault.com/a/1190000039868652

一、Kraken简介

历时3年，阿里巴巴正式开源了基于Flutter的Web 渲染引擎项目【北海】。一直以来，大家都在为跨平台开发进行不断的探索与实践，从最早的 H5 方案到 Hybrid 方案，以及后来的 Weex/React Native 方案，到现在如火如荼的 Flutter，都能看到大家在跨平台方向的不断的努力。

Flutter 由于其精简的渲染管线，高效的布局渲染能力，以及自绘渲染的特性，一跃成为这两年跨端开发的新宠。熟悉 Flutter 的同学肯定知道 Flutter 是用 Dart 语言以及 Widget 来开发的，虽说 Dart 语言对熟悉 JavaScript 的前端同学来说上手成本并不是很高，对于 Widget 这种基于状态驱动的开发模式也已经是非常熟悉，但是整体上与已有基建与前端生态割裂的矛盾是无法接受的。基于这些原因，国内很多的大厂在基于Flutter的渲染方案，上层基于 W3C 标准实现，从而让拥有非常庞大的前端开发者可以直接使用JavaScript来开发Flutter应运。个人感觉它和Weex项目差不多，只不过底层渲染使用的是Flutter的Skia。

二、快速体验

和其他前端框架一样，使用Kraken开发之前需要先安装Kraken CLI脚手架。

macOS 用户

Kraken CLI 是面向前端开发者的桌面端 Kraken 应用，提供调试和预览能力，使用以下命令即可安装 Kraken CLI。

$ npm install -g @openkraken/cli

安装完成之后，可以使用 kraken --help 查看Kraken的使用方式和参数，也可以使用下面的命令启动一个调试应用。

# kraken [localfile|URL]
$ kraken https://raw.githubusercontent.com/openkraken/kraken/master/kraken/example/assets/bundle.js

如果需要调试应用，可以在 Chrome 中打开一个新的 Tab 页，然后粘贴即可访问 Chrome DevTools 来调试 Kraken 应用。

Windows

Kraken 目前暂时没有提供可运行在 Windows 平台的 CLI 程序，请使用安卓手机下载 Kraken Gallery 以体验 Kraken 在移动端的表现。

当然，如果你是使用 的是Android 手机，也可以扫描下面的二维码下载 Kraken Playground，来体验各个文档中的示例。

三、快速上手

3.1 创建Kraken 应用

由于Kraken的底层使用的基于 Flutter的自绘渲染方案，而上层则是基于 W3C 标准实现，所以Kraken可以拥抱庞大的前端开发者生态。无论你是 Vue 开发者、Rax 开发者还是 React 开发者，都可以使用它来开发一个 Kraken 应用。

Rax 开发者

如果你是一名Rax 开发者开发者，可以使用我们构建出来的 Rax bundle 来运行一个 Kraken 应用，以此体验一下 Rax 应用在 Kraken 下的表现，命令如下。

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-rax.js

如果希望了解更多如何使用 Rax 来开发一个 Kraken 应用，那么可以基于 npm init rax 命令来快速创建一个 Rax for Kraken 的应用。

Vue 开发者

如果你是一名Vue 开发者开发者，可以使用我们构建出来的 Vue bundle 来运行一个 Kraken 应用，以此体验一下 Vue 应用在 Kraken 下的表现，命令如下。

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-vue.js

如果希望了解更多如何使用 Vue 来开发一个 Kraken 应用，或者如何对 Vue 的老项目进行改造，使它能够在 Kraken 上运行，可以访问使用 Vue 开发 Kraken 应用。

React 开发者

如果你是一名React 开发者，可以使用我们构建出来的 React bundle 来运行一个 Kraken 应用，以此体验一下 React 应用在 Kraken 下的表现，如下所示。

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-react.js

如果希望了解更多如何使用 React 来开发一个 Kraken 应用，或者如何对 React 的老项目进行改造，使它能够在 Kraken 上运行，可以访问使用 React 开发 Kraken 应用。

四、创建项目

4.1 使用Vue开发Kraken应用

示例应用

Kraken官方提供了一个 示例应用 来展示一个 Vue 应用如何在 Kraken 上运行起来。首先，将代码 clone 下来，并进入 ./demos/hello-vue 目录。

git clone https://github.com/openkraken/samples.git
cd ./demos/hello-vue

然后，安装依赖并打包。

npm i
npm run build

通过 Kraken Cli 脚手架将打包好的 bundle 运行起来。

kraken ./dist/js/app.js

初始化Vue项目

Vue 提供了一个官方的 Vue CLI脚手架，我们可以直接使用 Vue CLI 来初始化一个 Vue 项目，然后对项目做一些工程上的改造，改造完成之后即可使 Vue 项目在 Kraken 上顺利运行起来。

vue init webpack kraken-vue

由于 Kraken 没有 HTML，所以我们的 root 节点必须是 document.body。因此，开发者需要在入口文件中，将 mount 的入参改为 document.body。打开src/main.js文件，然后替换成如下代码。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
 
createApp(App).mount(document.body);

然后，然后打开 vue.config.js配置文件，由于没有 Script 标签的支持，所以需要将 bundle 打在一个包中。

module.exports = {
  chainWebpack: config => {
    config.optimization.delete('splitChunks');
  },
};

需要注意的是，由于目前 Kraken 只支持内联样式，所以我们建议使用下列方法来写 CSS 样式。

<template>
  <div :style="style.home">
    demo
  </div>
</template>
 
<script>
  const style = {
    home: {
      display: 'flex',
      position: 'relative',
      flexDirection: 'column',
      margin: '27vw 0vw 0vw',
      padding: '0vw',
      minWidth: '0vw',
      alignItems: 'center',
    },
  };
 
  export default {
    name: 'App',
    data() {
      return {
        style,
      };
    },
  };
</script>

然后，我们修改App.vue的代码实现简单的点击加法操作，如下所示。

<template>
  <div>
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
  </div>
</template>
 
<script>
  export default {
    name: 'App',
    data() {
      return {
        counter: 0,
      };
    },
  };
</script>

4.2 使用React 开发 Kraken 应用

示例应用

Kraken官方提供了一个示例应用来展示一个 React 应用如何在 Kraken 上运行起来。首先，将代码 clone下来，并进入 ./demos/hello-react 目录。

git clone https://github.com/openkraken/samples.git
cd ./demos/hello-react

然后，安装依赖并打包。

npm i
npm run build

最后，通过 Kraken Cli 将打包好的 bundle 运行起来。

kraken ./build/static/js/bundle.js

初始化React 项目

首先，我们使用React 提供的官方的 Create React App脚手架工具来初始化一个 React 项目。然后开发者只需要对项目做一些工程上的改造即可使 React 项目在 Kraken 上顺利运行起来。

由于 Kraken 没有 HTML，所以我们的 root 节点必须是 document.body。因此，开发者需要在入口文件中，将 ReactDOM.render 的入参改为 document.body。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.body,
);

由于 Kraken 没有 Script 标签的支持，所以需要配置 webpack ，使 bundle 打在一个包中。

参考：
基于 Flutter 的 Web 渲染引擎「北海」正式开源
官网：https://openkraken.com

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持