"零"學習成本：使用 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：
基于 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：
使用瀏覽器打開 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：
使用瀏覽器打開 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：
使用瀏覽器打開 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：
使用瀏覽器打開 Web 版本：https://g.alicdn.com/kraken/kraken-demos/long-list/build/web/index.html
3 比瀏覽器更快的布局邏輯
為了達到更快的渲染鏈路，我們摒棄了樣式繼承等一些不高效的渲染特性，使得在 Kraken 中不需要頻繁的重排重繪以及層層回溯查找樣式，所以理論上 Kraken 能夠做到比瀏覽器更快的渲染速度。
4 更多原生能力的支持
除了標準的 Web 組件、API，Kraken 根據實際業務場景定制了一些高級能力，比如 Camera 標簽、AnimationPlayer(Flare) 動畫標簽等等。未來我們也會持續定制和擴展這些高級能力，滿足日益豐富的交互場景。
Flare 動畫的示例
Demo：
?? 
更多與 Web 對比的示例
1 Granule (離子運動)
Kraken 與 Web 效果一致且同時達到 60 FPS。
Granule 示例
Demo：
使用瀏覽器打開 Web 版本：https://g.alicdn.com/kraken/kraken-demos/granule/build/web/index.html
?? 
Granule@Web
2 Hello-Rax (Rax 官方示例應用)
Hello-Rax 示例
Demo：
使用瀏覽器打開 Web 版本：https://g.alicdn.com/kraken/kraken-demos/granule/build/web/index.html
?? 
3 富文本示例
富文本示例
Demo：
使用瀏覽器打開 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 端落地的場景。
【本文為51CTO專欄作者“阿里巴巴官方技術”原創稿件，轉載請聯系原作者】
