阿里巴巴Flutter開源Kraken初體驗

1、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。

2、快速體驗

和其餘前端框架同樣，使用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、快速上手

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、建立項目

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