preface

Kraken is a high-performance rendering engine based on W3C standards. The underlying rendering of Kraken is based on Flutter, which ensures multi-endpoint consistency through its self-drawing rendering feature. The upper layer is implemented based on W3C standards and has a very large front-end developer ecosystem.

Website: openkraken.com

Github:github.com/openkraken/…

Beihai, a Web rendering engine based on Flutter, is officially open source

background

The rapid development of Internet business is inseparable from cross-platform technology, and the most mature cross-platform technology is the familiar browser, which has become one of the hot containers due to its inherent cross-platform ability, open standards and strong ecosystem. Browsers don’t do well on mobile because they’re not designed for performance and have a heavy history, compatibility, and slow vendor updates. Although networking and hardware advances have brought substantial performance dividends, increasingly complex businesses can always take advantage of existing performance.

In the past, there have been a lot of exploration and practice of cross-platform solutions, and new technical solutions have been developed with the tide of history. From the earliest H5 solution to Hybrid solution, and the later Weex/React Native solution, now the Flutter is in full swing.

Flutter has become one of the new favorites of the past two years due to its streamlined rendering pipeline, efficient layout rendering capabilities, and its ability to render itself. Before Flutter, React Native (Weex) was the mainstream solution. The underlying solution called the Native View. Because of this, it is difficult to guarantee complete multi-endpoint consistency, because the native View itself has some limitations, limited capabilities can not meet all the needs of developers, so it is a stretch to implement W3C standards. Flutter, on the other hand, does its own rendering based on the underlying Skia, which ensures a good level of multi-endpoint consistency. Those of you who are familiar with Flutter know that Flutter is developed in Dart language and widgets, although Dart language is not very expensive for those of you who are familiar with JavaScript. I am familiar with the state-driven development model of widgets, but the overall conflict with the existing infrastructure and front-end ecosystem is unacceptable. Furthermore, dynamic capabilities are simply needed for Internet businesses, and Flutter for Web is not ideal at present.

After all, the first step in introducing a new technology is to address the cost of introducing the new technology. So we are actively exploring a cross-platform solution that connects up to the front-end ecosystem and uses native rendering down.

The result is Kraken, a high-performance cross-terminal rendering engine based on W3C standards.

features

Web Standards Development

Kraken provides rendering capabilities based on W3C standards, tags, CSS capabilities, and apis that are common in browsers, allowing you to build native applications using a front-end ecosystem.

Cross-platform consistency

The self-drawing rendering technology based on Flutter is no longer platform-dependent, providing a completely consistent UI across platforms, including desktop (macOS, Linux, Windows) and mobile (iOS, Android)

The original performance

Compile Kraken into machine code using AOT build technology, providing more native performance; Synchronous rasterization, support infinite list smooth scrolling and no white screen.

A strong front-end developer ecosystem

Thanks to development based on W3C standards, front-end developers on Kraken have access to the vast front-end ecosystem they are now familiar with.

First of all, in terms of the choice of development framework, whether developers are using Rax or Vue, React or Angular, Kraken is guaranteed to render well. Kraken does not limit the frameworks used by upper-level developers.

Third, the front-end has a very prosperous ecology. The massive NPM packages in the community can be directly used in Kraken projects. A large number of mature modules ensure the efficiency of business development.In addition, a variety of tools that developers normally use on their development projects can be used directly on Kraken projects without any additional familiarity or learning costs.

Create a Kraken app and try it out

MacOS user

$ npm install -g @openkraken/cli
Copy the code

Windows users

Currently, Kraken does not provide CLI programs that can run on Windows platform. Please download Kraken Gallery on Android phones to experience Kraken’s performance on mobile terminals.

Kraken doesn’t limit the frameworks used by upper-level developers. Whether you’re a Vue developer, Rax developer, or React developer, you can develop a Kraken application using the frameworks you’re most familiar with.

  • Rax: kraken kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-r…
  • Vue: kraken kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-v…
  • React: kraken kraken.oss-cn-hangzhou.aliyuncs.com/demo/demo-r…

I saw someone operating on Zhihu, so I tried it myself

Personal hands-on experience

Environment to prepare

Building Kraken requires specific tools to be installed, and the development environment is ready to be installed differently for each platform, and it’s not always easy.

Development and debugging

  • Kraken’s development environment is a development environment for Flutter applications. It is not easy to get started with Flutter if you are not familiar with it.
  • Additional Flutter plug-ins need to be installed
  • Before you can run Kraken, you also need to build the JS Bridge code locally

Framework development

The root node must be document.bod

Since Kraken has no HTML, our root node must be document.body. Therefore, the developer needs to change the entry 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,
);
Copy the code
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount(document.body);
Copy the code
Kraken only supports inline styles
const styles = {
  App: {
    textAlign: 'center',},AppHeader: {
    backgroundColor: '#282c34'.minHeight: '100vh'.display: 'flex'.flexDirection: 'column'.alignItems: 'center'.justifyContent: 'center'.fontSize: '32px'.color: 'white',}};function App() {
  return (
    <div style={styles.App}>
      <div style={styles.AppHeader}>Demo</div>
    </div>
  );
}

export default App;
Copy the code
<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>
Copy the code

Client, native

No practical operation, interested in their own operation to see.

Community collaboration mechanism

The Kraken team hopes to build the underlying capabilities and ecology of Kraken together with many developers in the community through a good community collaboration mechanism.

The Kraken team expects to participate in kraken feature iterations and issue discussions in a collaborative manner. At the same time, a technical committee (TSC) composed of a group of collaborators determines the technical direction, releases, and customizations of standards.

The Kraken team hopes that through a fair and collaborative mechanism, the community of developers can better participate in the evolution of Web standards container technology, so that everyone’s voice can be heard, and together promote the development of Kraken and the industry.

For more details on the collaboration mechanism, go to Github.

Kraken’s vision of the future

— Originally from the community

In the past, when we did front-end performance optimizations, it was very difficult to optimize further down to the browser level. The emergence of Kraken provides front-end engineers with new opportunities and challenges. It provides front-end engineers with an opportunity to redefine the capabilities of browsers, with a great imagination:

  • The ability to surpass the Web is comparable to the performance and experience of Native.
  • Implementing standards faster than browser vendors, defining issues at the forefront of standards, and advancing the industry with the ability to push back standards through implementation.
  • You can see the optimization and experience of the entire render link from the top down, optimizing performance and defining some new rendering capabilities through a full-link approach.
  • At present, the increasingly complex front-end applications have led to the swelling of JS bundles. Developers can also abstract reuse of common capabilities and sink them to the container level. Reuse of rendering and common capabilities no longer depends on NPM, but can do more things by sinking common capabilities.
  • There is also an opportunity to explore the next generation of rendering technologies for the future through the combination of “cloud + end”.
  • Explore more possibilities based on Kraken……