簡介： Kraken 是由淘系技術部前端架構團隊開發的一個基於 Flutter 的動態化框架，本文將帶大家瞭解和認識 Kraken，分享 Kraken 的一些設計思想以及 Flutter 和 Web 技術對接的實踐。
什麼是 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/dwKGoW
Demo：
kraken https://g.alicdn.com/kraken/kraken-demos/animation/build/kraken/index.js使用瀏覽器開啟 Web 版本：
https://g.alicdn.com/kraken/kraken-demos/animation/build/web/index.html
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)
Demo：
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 可以做到長列表快速滾動不白屏。
長列表滾動示例
Demo：
kraken https://g.alicdn.com/kraken/kraken-demos/long-list/build/kraken/index.js使用瀏覽器開啟 Web 版本：
https://g.alicdn.com/kraken/kraken-demos/long-list/build/web/index.html
詳情：https://mp.weixin.qq.com/s/57CprMfvTtIeq6AdgcDdcw
3 比瀏覽器更快的佈局邏輯
為了達到更快的渲染鏈路，我們摒棄了樣式繼承等一些不高效的渲染特性，使得在 Kraken 中不需要頻繁的重排重繪以及層層回溯查詢樣式，所以理論上 Kraken 能夠做到比瀏覽器更快的渲染速度。
4 更多原生能力的支援
除了標準的 Web 元件、API，Kraken 根據實際業務場景定製了一些高階能力，比如 Camera 標籤、AnimationPlayer(Flare) 動畫標籤等等。未來我們也會持續定製和擴充套件這些高階能力，滿足日益豐富的互動場景。
Flare 動畫的示例
Demo：
kraken https://gw.alicdn.com/bao/uploaded/TB1ym1pzHH1gK0jSZFwXXc7aXXa.js
更多與 Web 對比的示例
1 Granule (離子運動)
Kraken 與 Web 效果一致且同時達到 60 FPS。
Granule 示例
Demo：
kraken https://g.alicdn.com/kraken/kraken-demos/granule/build/kraken/index.js使用瀏覽器開啟 Web 版本：
https://g.alicdn.com/kraken/kraken-demos/granule/build/web/index.html
Granule@Web
2 Hello-Rax (Rax 官方示例應用)
Hello-Rax 示例
Demo：
kraken https://g.alicdn.com/kraken/kraken-demos/hello-rax/build/kraken/index.js使用瀏覽器開啟 Web 版本：
https://g.alicdn.com/kraken/kraken-demos/granule/build/web/index.html
3 富文字示例
富文字示例
Demo：
kraken https://g.alicdn.com/kraken/kraken-demos/richtext/build/kraken/index.js使用瀏覽器開啟 Web 版本：
https://g.alicdn.com/kraken/kraken-demos/richtext/build/web/index.html
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 端落地的場景。