Kraken初探，用Vue开发Kraken应用

早听闻阿里系在开发轮子，准备对Flutter进行集成，以此来降低Flutter的使用门槛。现在Kraken（北海）已正式发布，官方说已经在多个项目中上线使用，但是github上依然存在很多坑，如果大家对Flutter有向往，但是一直因各种原因还没有入门的，不妨来动起手来，早点学习。可惜的是目前只支持macOs用户体验；

官网：https://openkraken.com

Github：https://github.com/openkraken/kraken

Kraken 是什么

Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter 进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C 标准实现，拥有非常庞大的前端开发者生态。

Kraken-cli安装

macOS 用户

Kraken CLI 是面向前端开发者的桌面端 Kraken 应用，提供调试和预览能力。

使用以下命令安装 Kraken CLI：

$ npm install -g @openkraken/cli

安装完成之后你将得到一个 kraken 的全局命令行，你可以使用 kraken --help 查看使用方式和参数。

你可以使用下面的命令启动一个调试应用：

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

如果你想要调试，可以在 Chrome 中打开一个新的 Tab 页，然后粘贴即可访问 Chrome DevTools 来调试 Kraken 应用。

Windows 用户（悲剧，windows用户们等官方更新吧）

Kraken 目前暂时没有提供可运行在 Windows 平台的 CLI 程序，请使用安卓手机下载 Kraken Gallery 以体验 Kraken 在移动端的表现。

Flutter环境安装

参考：https://flutterchina.club/setup-macos/

用 Vue 开发 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 上顺利运行起来。

由于 Kraken 没有 HTML，所以我们的 root 节点必须是 document.body。因此，开发者需要在入口文件中，将 mount 的入参改为 document.body。

// 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>

状态管理

一个复杂的可交互动态应用往往需要状态管理，以管理数据以及 UI 状态。

在 Vue 应用中，开发者同样可以在 data 中管理组件/应用的状态。

示例：

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

当然，这样的方式会导致状态分散到各个组件中，不同组件之间需要通过通信的方式来保证数据的传递以及同步。当所开发的应用变大后，复杂度也会明显提高，并不利于开发者在大型应用中做状态管理。对于复杂的大型应用，我们更推荐使用 Vue 官方提供的 Vuex来管理应用的状态。

在 Flutter 应用中集成 Kraken

在这里，我们设定环境中已经完全安装 Kraken 指定的 Flutter 版本，并且 flutter doctor 检测全部通过。

使用下面的命令创建一个新的 Flutter App

flutter create myapp
cd myapp

连接 Android 或者 iOS 手机，确保使用 flutter devices 可以看到已经连接的设备：

flutter devices1 connected devices:
HWI TL00 (mobile) • 77P5T18126000120 • android-arm64 • Android 9 (API 28)

打开 pubspec.yaml 文件，然后在 dependencies 下面添加 kraken 的依赖。

dependencies:
  kraken: '>= 0.0.1' # 会安装最新的 kraken 依赖

然后执行下面的命令自动安装依赖：

flutter pub get

在国内可能会出现安装失败的情况，如果安装失败，可以参考链接内容使用国内镜像：https://flutter.cn/community/china

打开 lib/main.dart，然后粘贴如下代码：

import 'package:flutter/material.dart';import 'package:kraken/kraken.dart';
void main() {  runApp(MyApp());}
class MyApp extends StatelessWidget {  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    Kraken kraken = Kraken(bundleURL: 'https://raw.githubusercontent.com/openkraken/kraken/master/kraken/example/assets/bundle.js');
    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,        visualDensity: VisualDensity.adaptivePlatformDensity,      ),      home: kraken    );  }}

然后再执行 flutter run 就可以运行了。