前言
Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter 进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C 标准实现，拥有非常庞大的前端开发者生态。raken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter 进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C 标准实现，拥有非常庞大的前端开发者生态。
Github：github.com/openkraken/…
背景
互联网业务如火如荼地发展离不开跨平台技术，而最成熟的跨平台技术就是大家熟悉的浏览器了，它与生俱来的跨平台能力、开放的标准以及强大的生态使它成为炙手可热的容器之一。而由于其本身不是为了性能而设计的，并且历史包袱重、兼容性、厂商更新慢等问题，浏览器在移动端的表现并不突出。尽管网络以及硬件的发展带来了足够多的性能红利，但是日益复杂的业务总能把已有的性能吃透。
过去也有很多对跨平台方案的探索与实践，新的技术方案也随着历史的浪潮不断地发展。从最早的 H5 方案到 Hybrid 方案，以及后来的 Weex/React Native 方案，到现在如火如荼的 Flutter。
毕竟，引入一项新技术的第一步是解决引入这项新技术的成本问题。所以我们积极探索一种向上对接前端生态，向下使用原生渲染的跨平台方案。
于是诞生了这款基于 W3C 标准的高性能跨终端渲染引擎——北海（Kraken）。
特色
Web 标准开发
跨平台一致
基于 Flutter 的自绘渲染技术，不再受到平台能力制约，提供跨平台完全一致的 UI，同时支持桌面端 (macOS、Linux、Windows) 和移动端 (iOS、Android)等
原生性能
强大的前端开发者生态
首先，在研发框架的选择上，无论开发者使用的是 Rax 或者 Vue ，还是 React 或者 Angular 的，都可以保证在 Kraken 上很好地完成渲染。Kraken 不限制上层开发者使用的框架。
再次，前端拥有非常繁荣的生态，社区海量的 NPM 包都可以在 Kraken 项目上直接使用，大量成熟的模块保证了业务开发的效率。
创建一个 Kraken 应用，体验一下
macOS 用户
$ npm install -g @openkraken/cli
Windows 用户
Kraken 目前暂时没有提供可运行在 Windows 平台的 CLI 程序，请使用安卓手机下载 Kraken Gallery 以体验 Kraken 在移动端的表现。
Kraken 不限制上层开发者使用的框架，无论你是 Vue 开发者、Rax 开发者还是 React 开发者，都可以使用你最熟悉的框架来开发一个 Kraken 应用。
- 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…
在知乎上看见有人操作了一下，自己也上手体验一下
个人上手体验
环境准备
构建 Kraken 需要安装特定的工具，开发环境准备每个平台的安装方式都不太一样，而且都不是很简单。
开发与调试
- Kraken 的开发环境是一个 Flutter 应用的开发环境，不熟悉Flutter上手不易。
- 需要额外安装 Flutter 插件
- 在运行 Kraken 之前，还需要在本地构建 JS Bridge 的代码
框架开发
root 节点必须是 document.bod
由于 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, );
// src/main.js import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount(document.body);
Kraken 只支持内联样式
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;
<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>
客户端、原生
暂无实操，有兴趣可以自己去操作看看。
社区协作机制
kraken 团队期望通过一种良好的社区协作机制，来与社区的众多开发者一起共建 Kraken 底层能力及生态。
kraken 团队期望通过协作者的方式来参与 Kraken 功能迭代以及 issue 讨论等工作。同时，通过由一部分协作者组成的技术委员会（TSC）来确定技术方向、发布以及定制标准等工作。
kraken 团队期望通过一种公平良好的协作机制，让社区的开发者能够更好地参与到对 Web 标准的容器技术的演进中去，让每个人的声音都能被听到，共同促进 Kraken 以及行业的发展。
查看更详细的协作机制可以查看原文移步github。
kraken 自我的未来展望
---原话来源于社区
以往我们在做前端性能优化的时候，往往优化到浏览器层面就优化不动了，很难向下进行进一步的优化。而 Kraken 的出现，给予了前端工程师新的机会与挑战，它提供了前端工程师一个重新定义浏览器的能力的机会，拥有非常大的想象空间：
- 超越 Web 的能力，比肩 Native 的性能与体验。
- 比浏览器厂商更快地实现标准，站在标准的前沿定义问题，通过实现的能力去反推标准，促进行业的发展。
- 可以自顶向下看整个渲染链路的优化及体验，通过全链路的手段去优化性能以及定义一些新的渲染能力。
- 目前日益复杂的前端应用导致 JS bundle 的已经显得越来越臃肿，开发者也可以把常用能力抽象复用并下沉到容器层面，渲染与公用能力的复用不再只依赖于 NPM，可以通过下沉通用能力来做更多事情。
- 通过“云+端”的结合，也有机会去探索面向未来的新一代渲染技术。
- 基于 Kraken，探索更多的可能性......
