阿里巴巴Flutter开源Kraken初体验

青旅半醒 2023-01-19 04:42 9阅读 0赞

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

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

##### 来源：xiangzhihong #####

https://segmentfault.com/a/1190000039868652

# 一、Kraken简介 #

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

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

![在这里插入图片描述][2a0ecfce660b6d8b79a88392c3ee9666.png] 在这里插入图片描述

# 二、快速体验 #

和其他前端框架一样，使用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

![在这里插入图片描述][a81cedba3d5ea5c545eb06eb53c519ac.png] 在这里插入图片描述

### 初始化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

![在这里插入图片描述][49a75d1e19bdd91a68d57592c8aa8f9e.png] 在这里插入图片描述

### 初始化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 渲染引擎「北海」正式开源][Flutter _ Web]  
官网：https://openkraken.com

## 最后 ##

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

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

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

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

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

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

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

[9d1e62f485c23c3a84e241aef8a166ff.png]: /images/20221021/2b9a9547e5654a5d812f2a8562e2cb90.png
[2a0ecfce660b6d8b79a88392c3ee9666.png]: /images/20221021/d42d63c3c8b14d2faf1ca6da4cabbccc.png
[a81cedba3d5ea5c545eb06eb53c519ac.png]: /images/20221021/1fd2cec2c0cc4e11947b5a2573b00cf6.png
[49a75d1e19bdd91a68d57592c8aa8f9e.png]: /images/20221021/a9296299093e4d81a2c7252a6024ad3a.png
[Flutter _ Web]: https://mp.weixin.qq.com/s?__biz=MzI5NjM5NDQxMg%3D%3D&idx=1&mid=2247490583&scene=21&sn=0fff706d0a1f91b55f7d7c105366a8db#wechat_redirect