什麼是 Kraken?
Kraken 項目誕生于 2018 年底，當時團隊參與"未來店"的項目，需要提供一套電子貨架屏的解決方案，用于展示商品資訊、實時價格甚至是促銷資訊。Kraken 的目标是建立一套面向 IoT 的動态渲染解決方案，從最初的 GCanvas API 到使用 TS 實作完整的 Flutter Framework 再到目前的方案，技術方案上我們經曆了多次的的徹底重構，才實作了目前這一套相對滿意的方案——基于 Rax 和 Flutter 的動态化架構。
在今年的前端社群 Flutter 一直是個非常熱門的話題，在集團内部也已經有好幾個團隊吃上了螃蟹。作為一個熱門的跨端渲染架構，與現有主流方案（Weex/React Native）相比，它最大的差異是基于自繪特性很好的解決了多端一緻性的問題。同時 Flutter 還具有一個精簡的渲染管線，提供了高效的局部更新、布局及渲染算法，在長清單等場景下性能也絲毫不弱于 Android/iOS 原生渲染。
Tips：這是一篇 Kraken 的介紹文章，幫助你了解和認識 Kraken，是以這裡不會太多的講述實作原理和方案。
可使用以下指令安裝 Kraken Cli：
$ npm i @kraken-project/cli -g 基于 Flutter 的動态化架構
阿裡尤其是淘寶，作為一家以電商主導的公司，業務上對 App 内容動态化的需求由來已久。無論是業務的快速疊代，還是修複線上問題，隻有兩個基本思路：
- 縮短用戶端發版的周期
- 通過雲端下發的方式實作業務邏輯的動态更新
而 App 版本的釋出本身鍊路比較長，有時還會受到一些不可抗力因素的制約，就算上架了使用者側的更新率又是一個問題，是以通過動态化進行内容的更新幾乎成了 App 的剛需。
Flutter 官方并沒有提供動态化的解決方案。社群中也有不少 Flutter 動态化探索的先驅，方案也是五花八門，Kraken 使用了一套 JS Engine 抽象層來解決邏輯動态下發執行的問題。Dart 與 JS 處于兩個獨立的上下文，好在 JS 引擎有成熟的與 C++ 通信的方案，Kraken 借助 Dart FFI (Foreign Function Interface) 實作了 JS 與 Dart 之間的高效雙向通信，與傳統方案相比路徑更短，傳輸效率更高，而且不需要對 Flutter Engine 進行定制改造。
"零"學習成本
1 W3C 标準規範 (标簽/樣式/DOM)
萬物基于網際網路，而 W3C 标準是網際網路中最重要的标準。為了解放開發者，Kraken 直接使用 W3C 标準規範進行開發，這樣可以讓業務同學"零"學習成本就可以上手 Kraken 的開發，同時使用 Web 技術開發的應用也能很容易地遷移到 Kraken 上。
TodoMVC 的例子
Demo：
kraken https://g.alicdn.com/kraken/kraken-demos/todomvc/build/kraken/index.js 使用浏覽器打開 Web 版本：
https://g.alicdn.com/kraken/kraken-demos/todomvc/build/web/index.html
TodoMVC@Kraken
TodoMVC@Web
2 對接前端生态: 100W+ npm 包
受益于世界上最活躍的開發者群體——Web 開發者，以及龐大的前端生态體系，Kraken 允許開發者使用社群中已有的 100W+ npm 包來幫助業務提升開發效率，以下面一個視訊為例，示例應用複刻了 anime.js 這個社群 JS 動畫引擎的官方示例，運作在 Kraken 中的效果與浏覽器完全一緻。
Animation 的例子 (使用 anime.js)
原版示例：
https://codepen.io/juliangarnier/pen/dwKGoWkraken https://g.alicdn.com/kraken/kraken-demos/animation/build/kraken/index.js Animation@Kraken
Animation@Web
同時在阿裡内部，Rax 是無線開發的首選架構，Kraken + Rax 的組合也使得業務的開發效率更上一層樓。
3 成熟的前端配套開發工具
工欲善其事，必先利其器。高效的開發除了需要熟練的開發者外，還需要合适的開發工具。同樣受益于擁抱 W3C 标準，Kraken 項目的開發與前端項目的開發完全一緻，你可以使用 VSCode、WebStrom 進行代碼的編寫，使用代碼提示和 ESLint 規則檢測來保證代碼品質，使用 jest 等單元測試工具來，使用 webpack 進行代碼的打包等等。
在集團内部，Rax 為開發者準備好了所有的開發套件。
4 友好的調試環境 (Devtools 斷點調試)
調試方面，Kraken 支援了實時的 JS 斷點調試，支援 sourceMap 友善快速定位源碼位置。支援自動熱重載 HMR，調試上除了暫未實作節點樹調試外，與浏覽器的開發體驗是完全一緻的。接下來我們也将盡快補充支援 Element 盒模型高亮和節點樹調試的能力。
超越 Web 的體驗
作為一個實作了 W3C 标準的渲染引擎，被拿來與浏覽器相比較是合乎常理的。不可否認的是目前主流浏覽器，在渲染性能上并不差，但是由于曆史包袱，它的互動體驗被人所诟病。互動體驗的問題主要展現在不受控互動、異步光栅化、厚重的布局邏輯等方面。
1 互動受控
受控的互動體驗其實是體驗的關鍵，在浏覽器中有很多備受前端開發者困擾的問題，如：
- 父層元素帶有的預設行為滾動引起的滾動穿透問題
- 無線 Web 頁面下 click 事件預設 300ms 延遲的問題
Kraken 就不存在這些影響體驗的問題，如下例子：
Draggable List 的示例 (使用 react-motion)
kraken https://g.alicdn.com/kraken/kraken-demos/dragable-list/build/kraken/index.js 使用浏覽器打開 Web 版本（注意需要切換到手機模拟器模式以啟用觸摸事件）：
https://g.alicdn.com/kraken/kraken-demos/dragable-list/build/web/index.html Draggable List@Kraken
Draggable List@Web
2 同步光栅化
在浏覽器中，光栅化是異步進行的，進行慣性滾動時，會出現白屏，這個是 WebView 始終無法避免的問題。而借助 Flutter 足夠高效的同步光栅化實作，Kraken 可以做到長清單快速滾動不白屏。
長清單滾動示例
kraken https://g.alicdn.com/kraken/kraken-demos/long-list/build/kraken/index.js 詳情：
https://mp.weixin.qq.com/s/57CprMfvTtIeq6AdgcDdcw3 比浏覽器更快的布局邏輯
為了達到更快的渲染鍊路，我們摒棄了樣式繼承等一些不高效的渲染特性，使得在 Kraken 中不需要頻繁的重排重繪以及層層回溯查找樣式，是以理論上 Kraken 能夠做到比浏覽器更快的渲染速度。
4 更多原生能力的支援
除了标準的 Web 元件、API，Kraken 根據實際業務場景定制了一些進階能力，比如 Camera 标簽、AnimationPlayer(Flare) 動畫标簽等等。未來我們也會持續定制和擴充這些進階能力，滿足日益豐富的互動場景。
Flare 動畫的示例
kraken https://gw.alicdn.com/bao/uploaded/TB1ym1pzHH1gK0jSZFwXXc7aXXa.js 更多與 Web 對比的示例
1 Granule (離子運動)
Kraken 與 Web 效果一緻且同時達到 60 FPS。
Granule 示例
kraken https://g.alicdn.com/kraken/kraken-demos/granule/build/kraken/index.js Granule@Web
2 Hello-Rax (Rax 官方示例應用)
Hello-Rax 示例
kraken https://g.alicdn.com/kraken/kraken-demos/hello-rax/build/kraken/index.js 3 富文本示例
富文本示例
kraken https://g.alicdn.com/kraken/kraken-demos/richtext/build/kraken/index.js RichText@Kraken
RichText@Web
更多功能
多引擎
目前最新的 0.3.0 版本中，我們同時支援了 V8 + JavaScriptCore 雙 JS 引擎的适配，由于 JSA 抽象層的存在，接入新的 JS 引擎也是非常容易的事情。
易調試
JSC 模式下，可以直接使用 macOS 自帶的 safari 調試能力對運作時代碼進行斷點調試；V8 下，我們提供了 Chrome DevTools 調試的能力；讓你的業務開發體驗更上一層樓。
多平台适配
憑借 Flutter 自身優秀的跨平台能力，Kraken 适配了 Android、iOS、macOS、Linux... ，真正做到一次開發，多端運作。
下一步
穩定的渲染引擎是我們的第一步，為了将基礎打紮實，我們已經提供了近千個浏覽器渲染能力的測試用例，并在持續增長中。
接下來，我們會在智能硬體的場景下持續投入，包括與 IoT 團隊合作探索線上線下互動的大屏業務場景等等。Kraken 會提供一系列标準化的 API，滿足智能硬體場景的能力需求。
當然，借着 Flutter 在移動端裝置上的東風，我們也在探索 Kraken C 端落地的場景。
原文連結：
點選這裡