"零"學(xué)習(xí)成本：使用 Web 標(biāo)準(zhǔn)開(kāi)發(fā)動(dòng)態(tài)化 Flutter 應(yīng)用
Kraken 是由淘系技術(shù)部前端架構(gòu)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)基于 Flutter 的動(dòng)態(tài)化框架，本文將帶大家了解和認(rèn)識(shí) Kraken，分享 Kraken 的一些設(shè)計(jì)思想以及 Flutter 和 Web 技術(shù)對(duì)接的實(shí)踐。
什么是 Kraken?
Kraken 項(xiàng)目誕生于 2018 年底，當(dāng)時(shí)團(tuán)隊(duì)參與"未來(lái)店"的項(xiàng)目，需要提供一套電子貨架屏的解決方案，用于展示商品信息、實(shí)時(shí)價(jià)格甚至是促銷(xiāo)信息。Kraken 的目標(biāo)是建立一套面向 IoT 的動(dòng)態(tài)渲染解決方案，從最初的 GCanvas API 到使用 TS 實(shí)現(xiàn)完整的 Flutter Framework 再到目前的方案，技術(shù)方案上我們經(jīng)歷了多次的的徹底重構(gòu)，才實(shí)現(xiàn)了目前這一套相對(duì)滿(mǎn)意的方案——基于 Rax 和 Flutter 的動(dòng)態(tài)化框架。
在今年的前端社區(qū) Flutter 一直是個(gè)非常熱門(mén)的話(huà)題，在集團(tuán)內(nèi)部也已經(jīng)有好幾個(gè)團(tuán)隊(duì)吃上了螃蟹。作為一個(gè)熱門(mén)的跨端渲染框架，與現(xiàn)有主流方案(Weex/React Native)相比，它最大的差異是基于自繪特性很好的解決了多端一致性的問(wèn)題。同時(shí) Flutter 還具有一個(gè)精簡(jiǎn)的渲染管線(xiàn)，提供了高效的局部更新、布局及渲染算法，在長(zhǎng)列表等場(chǎng)景下性能也絲毫不弱于 Android/iOS 原生渲染。
Tips：這是一篇 Kraken 的介紹文章，幫助你了解和認(rèn)識(shí) Kraken，所以這里不會(huì)太多的講述實(shí)現(xiàn)原理和方案。
可使用以下命令安裝 Kraken Cli：
基于 Flutter 的動(dòng)態(tài)化框架
阿里尤其是淘寶，作為一家以電商主導(dǎo)的公司，業(yè)務(wù)上對(duì) App 內(nèi)容動(dòng)態(tài)化的需求由來(lái)已久。無(wú)論是業(yè)務(wù)的快速迭代，還是修復(fù)線(xiàn)上問(wèn)題，只有兩個(gè)基本思路：
- 縮短客戶(hù)端發(fā)版的周期
- 通過(guò)云端下發(fā)的方式實(shí)現(xiàn)業(yè)務(wù)邏輯的動(dòng)態(tài)更新
而 App 版本的發(fā)布本身鏈路比較長(zhǎng)，有時(shí)還會(huì)受到一些不可抗力因素的制約，就算上架了用戶(hù)側(cè)的更新率又是一個(gè)問(wèn)題，所以通過(guò)動(dòng)態(tài)化進(jìn)行內(nèi)容的更新幾乎成了 App 的剛需。
Flutter 官方并沒(méi)有提供動(dòng)態(tài)化的解決方案。社區(qū)中也有不少 Flutter 動(dòng)態(tài)化探索的先驅(qū)，方案也是五花八門(mén)，Kraken 使用了一套 JS Engine 抽象層來(lái)解決邏輯動(dòng)態(tài)下發(fā)執(zhí)行的問(wèn)題。Dart 與 JS 處于兩個(gè)獨(dú)立的上下文，好在 JS 引擎有成熟的與 C++ 通信的方案，Kraken 借助 Dart FFI (Foreign Function Interface) 實(shí)現(xiàn)了 JS 與 Dart 之間的高效雙向通信，與傳統(tǒng)方案相比路徑更短，傳輸效率更高，而且不需要對(duì) Flutter Engine 進(jìn)行定制改造。
"零"學(xué)習(xí)成本
1 W3C 標(biāo)準(zhǔn)規(guī)范 (標(biāo)簽/樣式/DOM)
萬(wàn)物基于互聯(lián)網(wǎng)，而 W3C 標(biāo)準(zhǔn)是互聯(lián)網(wǎng)中最重要的標(biāo)準(zhǔn)。為了解放開(kāi)發(fā)者，Kraken 直接使用 W3C 標(biāo)準(zhǔn)規(guī)范進(jìn)行開(kāi)發(fā)，這樣可以讓業(yè)務(wù)同學(xué)"零"學(xué)習(xí)成本就可以上手 Kraken 的開(kāi)發(fā)，同時(shí)使用 Web 技術(shù)開(kāi)發(fā)的應(yīng)用也能很容易地遷移到 Kraken 上。
TodoMVC 的例子
Demo：
使用瀏覽器打開(kāi) Web 版本：https://g.alicdn.com/kraken/kraken-demos/todomvc/build/web/index.html
?? 
TodoMVC@Kraken
?? 
TodoMVC@Web
2 對(duì)接前端生態(tài): 100W+ npm 包
受益于世界上最活躍的開(kāi)發(fā)者群體——Web 開(kāi)發(fā)者，以及龐大的前端生態(tài)體系，Kraken 允許開(kāi)發(fā)者使用社區(qū)中已有的 100W+ npm 包來(lái)幫助業(yè)務(wù)提升開(kāi)發(fā)效率，以下面一個(gè)視頻為例，示例應(yīng)用復(fù)刻了 anime.js 這個(gè)社區(qū) JS 動(dòng)畫(huà)引擎的官方示例，運(yùn)行在 Kraken 中的效果與瀏覽器完全一致。
Animation 的例子 (使用 anime.js)
原版示例：https://codepen.io/juliangarnier/pen/dwKGoW
Demo：
使用瀏覽器打開(kāi) Web 版本：https://g.alicdn.com/kraken/kraken-demos/animation/build/web/index.html
?? 
Animation@Kraken
?? 
?? 
Animation@Web
同時(shí)在阿里內(nèi)部，Rax 是無(wú)線(xiàn)開(kāi)發(fā)的首選框架，Kraken + Rax 的組合也使得業(yè)務(wù)的開(kāi)發(fā)效率更上一層樓。
3 成熟的前端配套開(kāi)發(fā)工具
工欲善其事，必先利其器。高效的開(kāi)發(fā)除了需要熟練的開(kāi)發(fā)者外，還需要合適的開(kāi)發(fā)工具。同樣受益于擁抱 W3C 標(biāo)準(zhǔn)，Kraken 項(xiàng)目的開(kāi)發(fā)與前端項(xiàng)目的開(kāi)發(fā)完全一致，你可以使用 VSCode、WebStrom 進(jìn)行代碼的編寫(xiě)，使用代碼提示和 ESLint 規(guī)則檢測(cè)來(lái)保證代碼質(zhì)量，使用 jest 等單元測(cè)試工具來(lái)，使用 webpack 進(jìn)行代碼的打包等等。
在集團(tuán)內(nèi)部，Rax 為開(kāi)發(fā)者準(zhǔn)備好了所有的開(kāi)發(fā)套件。
4 友好的調(diào)試環(huán)境 (Devtools 斷點(diǎn)調(diào)試)
調(diào)試方面，Kraken 支持了實(shí)時(shí)的 JS 斷點(diǎn)調(diào)試，支持 sourceMap 方便快速定位源碼位置。支持自動(dòng)熱重載 HMR，調(diào)試上除了暫未實(shí)現(xiàn)節(jié)點(diǎn)樹(shù)調(diào)試外，與瀏覽器的開(kāi)發(fā)體驗(yàn)是完全一致的。接下來(lái)我們也將盡快補(bǔ)充支持 Element 盒模型高亮和節(jié)點(diǎn)樹(shù)調(diào)試的能力。
?? 
超越 Web 的體驗(yàn)
作為一個(gè)實(shí)現(xiàn)了 W3C 標(biāo)準(zhǔn)的渲染引擎，被拿來(lái)與瀏覽器相比較是合乎常理的。不可否認(rèn)的是目前主流瀏覽器，在渲染性能上并不差，但是由于歷史包袱，它的交互體驗(yàn)被人所詬病。交互體驗(yàn)的問(wèn)題主要體現(xiàn)在不受控交互、異步光柵化、厚重的布局邏輯等方面。
1 交互受控
受控的交互體驗(yàn)其實(shí)是體驗(yàn)的關(guān)鍵，在瀏覽器中有很多備受前端開(kāi)發(fā)者困擾的問(wèn)題，如：
- 父層元素帶有的默認(rèn)行為滾動(dòng)引起的滾動(dòng)穿透問(wèn)題
- 無(wú)線(xiàn) Web 頁(yè)面下 click 事件默認(rèn) 300ms 延遲的問(wèn)題
Kraken 就不存在這些影響體驗(yàn)的問(wèn)題，如下例子：
Draggable List 的示例 (使用 react-motion)
Demo：
使用瀏覽器打開(kāi) Web 版本(注意需要切換到手機(jī)模擬器模式以啟用觸摸事件)：https://g.alicdn.com/kraken/kraken-demos/dragable-list/build/web/index.html
?? 
Draggable List@Kraken
?? 
Draggable List@Web
2 同步光柵化
在瀏覽器中，光柵化是異步進(jìn)行的，進(jìn)行慣性滾動(dòng)時(shí)，會(huì)出現(xiàn)白屏，這個(gè)是 WebView 始終無(wú)法避免的問(wèn)題。而借助 Flutter 足夠高效的同步光柵化實(shí)現(xiàn)，Kraken 可以做到長(zhǎng)列表快速滾動(dòng)不白屏。
長(zhǎng)列表滾動(dòng)示例
Demo：
使用瀏覽器打開(kāi) Web 版本：https://g.alicdn.com/kraken/kraken-demos/long-list/build/web/index.html
3 比瀏覽器更快的布局邏輯
為了達(dá)到更快的渲染鏈路，我們摒棄了樣式繼承等一些不高效的渲染特性，使得在 Kraken 中不需要頻繁的重排重繪以及層層回溯查找樣式，所以理論上 Kraken 能夠做到比瀏覽器更快的渲染速度。
4 更多原生能力的支持
除了標(biāo)準(zhǔn)的 Web 組件、API，Kraken 根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景定制了一些高級(jí)能力，比如 Camera 標(biāo)簽、AnimationPlayer(Flare) 動(dòng)畫(huà)標(biāo)簽等等。未來(lái)我們也會(huì)持續(xù)定制和擴(kuò)展這些高級(jí)能力，滿(mǎn)足日益豐富的交互場(chǎng)景。
Flare 動(dòng)畫(huà)的示例
Demo：
?? 
更多與 Web 對(duì)比的示例
1 Granule (離子運(yùn)動(dòng))
Kraken 與 Web 效果一致且同時(shí)達(dá)到 60 FPS。
Granule 示例
Demo：
使用瀏覽器打開(kāi) Web 版本：https://g.alicdn.com/kraken/kraken-demos/granule/build/web/index.html
?? 
Granule@Web
2 Hello-Rax (Rax 官方示例應(yīng)用)
Hello-Rax 示例
Demo：
使用瀏覽器打開(kāi) Web 版本：https://g.alicdn.com/kraken/kraken-demos/granule/build/web/index.html
?? 
3 富文本示例
富文本示例
Demo：
使用瀏覽器打開(kāi) Web 版本：https://g.alicdn.com/kraken/kraken-demos/richtext/build/web/index.html
?? 
RichText@Kraken
?? 
RichText@Web
更多功能
多引擎
目前最新的 0.3.0 版本中，我們同時(shí)支持了 V8 + JavaScriptCore 雙 JS 引擎的適配，由于 JSA 抽象層的存在，接入新的 JS 引擎也是非常容易的事情。
易調(diào)試
JSC 模式下，可以直接使用 macOS 自帶的 safari 調(diào)試能力對(duì)運(yùn)行時(shí)代碼進(jìn)行斷點(diǎn)調(diào)試;V8 下，我們提供了 Chrome DevTools 調(diào)試的能力;讓你的業(yè)務(wù)開(kāi)發(fā)體驗(yàn)更上一層樓。
多平臺(tái)適配
憑借 Flutter 自身優(yōu)秀的跨平臺(tái)能力，Kraken 適配了 Android、iOS、macOS、Linux... ，真正做到一次開(kāi)發(fā)，多端運(yùn)行。
下一步
穩(wěn)定的渲染引擎是我們的第一步，為了將基礎(chǔ)打扎實(shí)，我們已經(jīng)提供了近千個(gè)瀏覽器渲染能力的測(cè)試用例，并在持續(xù)增長(zhǎng)中。
接下來(lái)，我們會(huì)在智能硬件的場(chǎng)景下持續(xù)投入，包括與 IoT 團(tuán)隊(duì)合作探索線(xiàn)上線(xiàn)下互動(dòng)的大屏業(yè)務(wù)場(chǎng)景等等。Kraken 會(huì)提供一系列標(biāo)準(zhǔn)化的 API，滿(mǎn)足智能硬件場(chǎng)景的能力需求。
當(dāng)然，借著 Flutter 在移動(dòng)端設(shè)備上的東風(fēng)，我們也在探索 Kraken C 端落地的場(chǎng)景。
【本文為51CTO專(zhuān)欄作者“阿里巴巴官方技術(shù)”原創(chuàng)稿件，轉(zhuǎn)載請(qǐng)聯(lián)系原作者】
