乐趣区

关于flutter:阿里巴巴Flutter开源Kraken初体验

jiezi

一、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

退出移动版