一、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.gitcd ./demos/hello-vue

而后，装置依赖并打包。

npm inpm 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.jsimport { 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.gitcd ./demos/hello-react

而后，装置依赖并打包。

npm inpm 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