I've heard that Ali department is developing wheels and preparing to integrate Flutter to reduce the threshold of using Flutter. Now Kraken (Beihai) has been officially released. Officials say it has been put into use in many projects, but there are still many pits on github. If you are longing for Flutter but haven't been introduced for various reasons, you might as well start and learn early. Unfortunately, currently only macOs user experience is supported;
Official website: https://openkraken.com
Github: https://github.com/openkraken/kraken
What is Kraken
Kraken is a high-performance rendering engine based on W3C standard. The bottom layer of Kraken is rendered based on fluent, and the consistency of multiple ends is guaranteed through its self drawing rendering characteristics. The upper layer is implemented based on W3C standard and has a very large front-end developer ecosystem.
Kraken cli installation
Mac OS user
Kraken CLI is a desktop application for front-end developers, providing debugging and preview capabilities.
Install the Kraken CLI using the following command:
$ npm install -g @openkraken/cli
After the installation, you will get a global command line of kraken. You can use kraken --help to view the usage and parameters.
You can start a debugging application with the following command:
# kraken [localfile|URL] $ kraken https://raw.githubusercontent.com/openkraken/kraken/master/kraken/example/assets/bundle.js
If you want to debug, you can open a new Tab page in Chrome and paste it to access Chrome DevTools to debug Kraken application.
windows users (tragedy, windows users and other official updates)
Kraken currently does not provide a CLI program that can run on the Windows platform. Please download it from an Android phone Kraken Gallery To experience Kraken's performance on the mobile terminal.
Flutter environment installation
reference resources: https://flutterchina.club/setup-macos/
Developing Kraken application with Vue
Example application
We provide a Example application To show how a Vue application runs on Kraken.
First, clone the code and enter/ Demos / Hello Vue directory.
git clone https://github.com/openkraken/samples.git cd ./demos/hello-vue
Install and package dependencies.
npm i npm run build
adopt Kraken Cli Run the packaged bundle.
kraken ./dist/js/app.js
Initialize a Vue project
Vue provides an official Vue CLI , we can use it directly Vue CLI To initialize a Vue project, and then make some engineering modifications to the project to make the Vue project run smoothly on Kraken.
Since Kraken does not have HTML, our root node must be document body. Therefore, the developer needs to change the input parameter of mount to document. In the entry file body.
// src/main.jsimport { createApp } from 'vue';import App from './App.vue';
createApp(App).mount(document.body);
Configure Vue config. JS, because there is no Script tag support, you need to type the bundle in a package.
module.exports = {
chainWebpack: config => {
config.optimization.delete('splitChunks');
},
};
In addition, it should be noted that at present, Kraken only supports inline styles, so we recommend using the following methods to write CSS styles.
<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>
State management
A complex interactive dynamic application often needs state management to manage data and UI state.
In Vue applications, developers can also manage the status of components / applications in data.
Example:
<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>
Of course, such a way will lead to the dispersion of states into various components. Different components need to communicate to ensure the transmission and synchronization of data. When the developed application becomes larger, the complexity will also be significantly improved, which is not conducive to developers to do state management in large applications. For complex large-scale applications, we prefer to use Vue official Vuex To manage the status of the application.
Integrating Kraken in the Flutter application
Here, we set the environment to be fully installed The version of the shuttle specified by Kraken , and the detection of the shuttle doctor is all passed.
Use the following command to create a new shuttle app
flutter create myapp cd myapp
Connect an Android or iOS mobile phone and make sure that the connected devices can be seen by using fluent devices:
flutter devices1 connected devices: HWI TL00 (mobile) • 77P5T18126000120 • android-arm64 • Android 9 (API 28)
Open pubspec Yaml file, and then add kraken's dependencies under dependencies.
dependencies: kraken: '>= 0.0.1' # The latest kraken dependencies will be installed
Then execute the following command to automatically install dependencies:
flutter pub get
The installation may fail in China. If the installation fails, you can refer to the link to use the domestic image: https://flutter.cn/community/china
Open lib / main Dart, and then paste the following code:
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 ); }}
Then the flight can be executed.