Alibaba Flutter open source Kraken first experience

1. Introduction to Kraken

After 3 years, Alibaba officially open sourced the Flutter-based Web rendering engine project [Beihai]. Everyone has been continuously exploring and practicing for cross-platform development. From the earliest H5 solution to the Hybrid solution, and later the Weex/React Native solution, to the Flutter, which is in full swing, you can see everyone in the cross-platform direction. Continuous efforts.

Flutter has become the new favorite of cross-terminal development in the past two years due to its streamlined rendering pipeline, efficient layout rendering capabilities, and self-drawing rendering characteristics. Students who are familiar with Flutter must know that Flutter is developed in Dart language and Widget. Although the Dart language is not very expensive for front-end students familiar with JavaScript, it is already very familiar with the state-driven development model of Widget. , But the overall contradiction between existing infrastructure and front-end ecology is unacceptable. For these reasons, many large domestic manufacturers are based on Flutter-based rendering solutions, and the upper layer is implemented based on W3C standards, so that very large front-end developers can directly use JavaScript to develop Flutter applications. I personally feel that it is similar to the Weex project, except that the underlying rendering uses Flutter's Skia.

2. Quick experience

Like other front-end frameworks, Kraken CLI scaffolding needs to be installed before using Kraken to develop.

macOS users

Kraken CLI is a desktop Kraken application for front-end developers. It provides debugging and preview capabilities. Use the following commands to install Kraken CLI.

$ npm install -g @openkraken/cli

After the installation is complete, you can use kraken --help to view the usage and parameters of Kraken, or you can use the following command to start a debugging application.

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

If you need to debug the application, you can open a new Tab page in Chrome and paste it to access Chrome DevTools to debug the Kraken application.

Windows

Kraken currently does not provide a CLI program that can run on the Windows platform. Please use your Android phone to download Kraken Gallery to experience the performance of Kraken on the mobile terminal.

Of course, if you are using an Android phone, you can also scan the QR code below to download Kraken Playground to experience the examples in each document.

Three, get started quickly

3.1 Create Kraken Application

Since the bottom layer of Kraken uses a Flutter-based self-drawing rendering scheme, and the upper layer is implemented based on the W3C standard, Kraken can embrace a huge front-end developer ecosystem. Whether you are a Vue developer, Rax developer or React developer, you can use it to develop a Kraken application.

Rax developer

If you are a Rax developer, you can use the Rax bundle we built to run a Kraken application to experience the performance of the Rax application under Kraken. The command is as follows.

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-rax.js

If you want to learn more about how to use the Rax to develop a Kraken application, it can be based on npm init rax to quickly command create a Rax for Kraken application .

Vue developers

If you are a Vue developer, you can use the Vue bundle we built to run a Kraken application to experience the performance of the Vue application under Kraken. The command is as follows.

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-vue.js

If you want to learn more about how to use Vue to develop a Kraken application, or how to transform an old project of Vue so that it can run on Kraken, you can visit use Vue to develop a Kraken application .

React developer

If you are a React developer, you can use the React bundle we built to run a Kraken application to experience the performance of the React application under Kraken, as shown below.

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-react.js

If you want to learn more about how to use React to develop a Kraken application, or how to transform an old React project so that it can run on Kraken, you can visit use React to develop a Kraken application .

Fourth, create a project

4.1 Use Vue to develop Kraken applications

Sample application

Kraken officially provides a sample application to show how a Vue application can run on Kraken. First, clone the code and enter the ./demos/hello-vue directory.

git clone https://github.com/openkraken/samples.git
cd ./demos/hello-vue

Then, install the dependencies and package them.

npm i
npm run build

Run the packaged bundle through Kraken Cli scaffolding.

kraken ./dist/js/app.js

Initialize the Vue project

Vue provides an official Vue CLI scaffolding. We can directly use Vue CLI to initialize a Vue project, and then do some engineering transformations on the project. After the transformation is completed, the Vue project can run smoothly on Kraken.

vue init webpack kraken-vue

Since Kraken does not have HTML, our root node must be document.body. Therefore, developers need to change the input parameter of mount to document.body in the entry file. Open the src/main.js file and replace it with the following code.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount(document.body);

Then, open the vue.config.js configuration file. Since there is no support for the Script tag, the bundle needs to be placed in a package.

module.exports = {
  chainWebpack: config => {
    config.optimization.delete('splitChunks');
  },
};

It should be noted that since Kraken currently only supports inline styles, 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>

Then, we modify the code of App.vue to implement a simple click-and-add operation, as shown below.

<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 Using React to develop Kraken applications

Sample application

Kraken officially provides a sample application to show how a React application can run on Kraken. First, clone the code and enter the ./demos/hello-react directory.

git clone https://github.com/openkraken/samples.git
cd ./demos/hello-react

Then, install the dependencies and package them.

npm i
npm run build

Finally, run the packaged bundle through Kraken Cli.

kraken ./build/static/js/bundle.js

Initialize the React project

First, we use the official Create React App scaffolding tool provided by React to initialize a React project. Then developers only need to make some engineering transformations to the project to make the React project run smoothly on Kraken.

Since Kraken does not have HTML, our root node must be document.body. Therefore, developers need to change the input parameter of ReactDOM.render to document.body in the entry file.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.body,
);

Since Kraken does not support Script tags, it is necessary to configure webpack so that the bundle is included in one package.

reference:
Flutter-based Web rendering engine "Beihai" officially open source
official website: https://openkraken.com