"零"學習成本：使用 Web 標準開發動態化 Flutter 應用

簡介： 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 端落地的場景。