一、Kraken簡介

歷時3年，阿里巴巴正式開源了基于Flutter的Web 渲染引擎項目【北?！俊Ｒ恢币詠?，大家都在為跨平臺開發(fā)進(jìn)行不斷的探索與實踐，從最早的 H5 方案到 Hybrid 方案，以及后來的 Weex/React Native 方案，到現(xiàn)在如火如荼的 Flutter，都能看到大家在跨平臺方向的不斷的努力。

Flutter 由于其精簡的渲染管線，高效的布局渲染能力，以及自繪渲染的特性，一躍成為這兩年跨端開發(fā)的新寵。熟悉 Flutter 的同學(xué)肯定知道 Flutter 是用 Dart 語言以及 Widget 來開發(fā)的，雖說 Dart 語言對熟悉 JavaScript 的前端同學(xué)來說上手成本并不是很高，對于 Widget 這種基于狀態(tài)驅(qū)動的開發(fā)模式也已經(jīng)是非常熟悉，但是整體上與已有基建與前端生態(tài)割裂的矛盾是無法接受的。基于這些原因，國內(nèi)很多的大廠在基于Flutter的渲染方案，上層基于 W3C 標(biāo)準(zhǔn)實現(xiàn)，從而讓擁有非常龐大的前端開發(fā)者可以直接使用JavaScript來開發(fā)Flutter應(yīng)運。個人感覺它和Weex項目差不多，只不過底層渲染使用的是Flutter的Skia。

二、快速體驗

和其他前端框架一樣，使用Kraken開發(fā)之前需要先安裝Kraken CLI腳手架。

macOS 用戶

Kraken CLI 是面向前端開發(fā)者的桌面端 Kraken 應(yīng)用，提供調(diào)試和預(yù)覽能力，使用以下命令即可安裝 Kraken CLI。

$ npm install -g @openkraken/cli

安裝完成之后，可以使用 kraken --help 查看Kraken的使用方式和參數(shù)，也可以使用下面的命令啟動一個調(diào)試應(yīng)用。

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

如果需要調(diào)試應(yīng)用，可以在 Chrome 中打開一個新的 Tab 頁，然后粘貼即可訪問 Chrome DevTools 來調(diào)試 Kraken 應(yīng)用。

Windows

Kraken 目前暫時沒有提供可運行在 Windows 平臺的 CLI 程序，請使用安卓手機(jī)下載 Kraken Gallery 以體驗 Kraken 在移動端的表現(xiàn)。

當(dāng)然，如果你是使用 的是Android 手機(jī)，也可以掃描下面的二維碼下載 Kraken Playground，來體驗各個文檔中的示例。

三、快速上手

3.1 創(chuàng)建Kraken 應(yīng)用

由于Kraken的底層使用的基于 Flutter的自繪渲染方案，而上層則是基于 W3C 標(biāo)準(zhǔn)實現(xiàn)，所以Kraken可以擁抱龐大的前端開發(fā)者生態(tài)。無論你是 Vue 開發(fā)者、Rax 開發(fā)者還是 React 開發(fā)者，都可以使用它來開發(fā)一個 Kraken 應(yīng)用。

Rax 開發(fā)者

如果你是一名Rax 開發(fā)者開發(fā)者，可以使用我們構(gòu)建出來的 Rax bundle 來運行一個 Kraken 應(yīng)用，以此體驗一下 Rax 應(yīng)用在 Kraken 下的表現(xiàn)，命令如下。

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

如果希望了解更多如何使用 Rax 來開發(fā)一個 Kraken 應(yīng)用，那么可以基于 npm init rax 命令來快速創(chuàng)建一個 Rax for Kraken 的應(yīng)用。

Vue 開發(fā)者

如果你是一名Vue 開發(fā)者開發(fā)者，可以使用我們構(gòu)建出來的 Vue bundle 來運行一個 Kraken 應(yīng)用，以此體驗一下 Vue 應(yīng)用在 Kraken 下的表現(xiàn)，命令如下。

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

如果希望了解更多如何使用 Vue 來開發(fā)一個 Kraken 應(yīng)用，或者如何對 Vue 的老項目進(jìn)行改造，使它能夠在 Kraken 上運行，可以訪問使用 Vue 開發(fā) Kraken 應(yīng)用。

React 開發(fā)者

如果你是一名React 開發(fā)者，可以使用我們構(gòu)建出來的 React bundle 來運行一個 Kraken 應(yīng)用，以此體驗一下 React 應(yīng)用在 Kraken 下的表現(xiàn)，如下所示。

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

如果希望了解更多如何使用 React 來開發(fā)一個 Kraken 應(yīng)用，或者如何對 React 的老項目進(jìn)行改造，使它能夠在 Kraken 上運行，可以訪問使用 React 開發(fā) Kraken 應(yīng)用。

四、創(chuàng)建項目

4.1 使用Vue開發(fā)Kraken應(yīng)用

示例應(yīng)用

Kraken官方提供了一個 示例應(yīng)用 來展示一個 Vue 應(yīng)用如何在 Kraken 上運行起來。首先，將代碼 clone 下來，并進(jìn)入 ./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 節(jié)點必須是 document.body。因此，開發(fā)者需要在入口文件中，將 mount 的入?yún)⒏臑?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 標(biāo)簽的支持，所以需要將 bundle 打在一個包中。

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

需要注意的是，由于目前 Kraken 只支持內(nèi)聯(lián)樣式，所以我們建議使用下列方法來寫 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的代碼實現(xiàn)簡單的點擊加法操作，如下所示。

<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 開發(fā) Kraken 應(yīng)用

示例應(yīng)用

Kraken官方提供了一個示例應(yīng)用來展示一個 React 應(yīng)用如何在 Kraken 上運行起來。首先，將代碼 clone下來，并進(jìn)入 ./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 項目。然后開發(fā)者只需要對項目做一些工程上的改造即可使 React 項目在 Kraken 上順利運行起來。

由于 Kraken 沒有 HTML，所以我們的 root 節(jié)點必須是 document.body。因此，開發(fā)者需要在入口文件中，將 ReactDOM.render 的入?yún)⒏臑?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 標(biāo)簽的支持，所以需要配置 webpack ，使 bundle 打在一個包中。

參考：
基于 Flutter 的 Web 渲染引擎「北?！拐介_源
官網(wǎng)：https://openkraken.com