【彭耀宗】快應用框架在 IoT 場景中的落地.pdf

《【彭耀宗】快應用框架在 IoT 場景中的落地.pdf》由會員分享，可在線閱讀，更多相關《【彭耀宗】快應用框架在 IoT 場景中的落地.pdf（33頁珍藏版）》請在三個皮匠報告上搜索。

1、快快應應用用框框架架在在 I IO OT T 場場景景中中的的落落地地彭彭耀耀宗宗小米集團 高級軟件研發工程師2021年加入小米從事 VELA 快應用框架研發彭彭耀耀宗宗0 01 1X Xi ia ao ommi i V Ve el la a 快快應應用用框框架架簡簡介介安安全全性性差差傳統 IOT 的 Flat Address Mode 允許應用訪問整個地址空間，缺乏隔離性和安全性，難以對應用的行為做限制。缺缺少少模模塊塊化化機機制制整體以系統固件的形式發布，應用更新需要 OTA升級整個固件，無法實現應用獨立分發和更新。開開發發難難度度高高傳統 C 開發需要針對不同的芯片廠商配置不同的編譯器

2、和開發環境。整體開發流程復雜繁瑣，難以觸達三方開發者。傳傳統統 I IO OT T 開開發發的的局局限限性性提提供供應應用用容容器器嵌入式業務場景需要應用容器提供安全性和隔離性，解決應用分發和應用兼容性問題。豐豐富富的的生生態態依托現有的快應用標準和繁榮前端開發生態，便于開發者接入和整個應用生態的構建。高高效效開開發發相較于傳統的 IOT 場景中以 C 為主的開發方式，框架提供的前端開發體驗具有無與倫比的效率優勢。前前端端框框架架落落地地 I IO OT T 的的技技術術價價值值嵌入式 IOT 領域需要應用容器技術來克服其固有的局限，前端技術在這個方向大有可為。X Xi ia ao ommi

3、i V Ve el la a 快快應應用用框框架架架架構構架架構構說說明明 JS 運行時解析應用邏輯。C+層維護 VDOM 樹，實現渲染。自研的嵌入式渲染引擎，支持高效的 UI 渲染，矢量字體繪制和豐富的動效。數據和 UI 實現響應式綁定。C+層向 JS 層暴露設備特性API。各各種種 I IO OT T 設設備備應應用用J JS SR Ru un nt ti imme eMVVM生命周期Interface路由插件J JS S E En ng gi in ne eA Ap pp p C Co on nt ta ai in ne er rBasic事件機制VDOM TreeFeaturesMod

4、ules.Widget GUI WrapperWidget TreeLayout Tree動畫引擎矢量字體圖形加速引擎l li ib bU UV V A As sy yn nc c I IO O L LI Ib br ra ar ry yX Xi ia ao ommi i V Ve el la a O OS SV Ve el la a 快快應應用用框框架架渲渲染染實實現現響響應應式式渲渲染染流流程程 使用自研的 toolkit 編譯器將用戶的應用源碼轉換成可供框架直接加載的格式。運行時通過 JS 引擎執行 JS 代碼來驅動邏輯，JS 通過 Native 注入的接口操作并生成 VDOM 樹。VD

5、OM 樹信息最終會傳遞到渲染器并生成對應的Widget Tree，完成最終渲染。0 02 2快快應應用用框框架架落落地地實實踐踐落落地地產產品品X Xi ia ao ommi i WWa at tc ch h S S1 1 P Pr ro o小小米米首首款款自自研研手手表表，搭搭載載自自研研的的R RT TO OS S系系統統Xiaomi Vela OS 系統，由 Vela 快應用框架提供三方應用運行能力，整機采用 480*480分辨率屏幕。內內存存占占用用高高嵌入式領域內存受限，快應用內存占用較高內內存存泄泄露露嚴嚴重重IOT 領域對內存泄露極端敏感，JS 容易出現泄露應應用用卡卡頓頓相較于

6、C，JS 執行效率差了不止一個數量級落落地地過過程程中中遇遇到到的的主主要要問問題題前端框架落地 IOT 也面臨著很多現實問題：優優化化方方案案啟用系統內存池，優化內存分配性能內存預分配，減少碎片字節碼改造，合并字符串擴展實現WeakRef支持，減少對 GC 的依賴針對應用場景提供不同 GC 策略VDOM 由 C+實現雙向數據綁定下沉到 C+系統能力盡可能由C實現提供static語法減少數據綁定數量編譯后的頁面描述二進制化需要尋求技術手段來提升 JS 執行效率，降低框架整體內存占用系系統統優優化化J JS S 引引擎擎優優化化框框架架優優化化應應用用優優化化內內存存泄泄漏漏問問題題JS 框架在

7、 IOT 設備上遇到了嚴重的內存泄漏問題，這個問題有多方面因素共同導致：嵌嵌入入式式環環境境由于 RTOS 系統缺少進程資源隔離，泄露的內存在進程結束后仍然無法釋放，直到重啟系統，泄露直接影響系統穩定性?？蚩蚣芗茉O設計計框架的 MVVM 設計導致了雙向數據綁定時存在大量的環引用，加重了 GC 壓力框架實現中存在內存釋放不及時的情況，較難解決。J JS S 語語言言特特性性JS 的某些語法特性極易放大內存泄露的范圍，內存泄露問題排查困難。JS 語義層面無法對內存進行精確控制，內存的釋放依賴GC，內存負載偏高。落落地地總總結結經經驗驗1.解決了傳統嵌入式開發中的痛點，提供了完善的應用容器。2.開發

8、效率較傳統C語言有質的提升，豐富了應用生態。3.驗證了前端框架落地IOT的可行性，證明經過充分優化后前端框架的性能可以滿足 嵌入式開發需求。反反思思1.MVVM框架在IOT上落地時帶來了很多性能問題，采用類react的更新方案效果可能更好。2.框架的內存安全（內存負載&內存泄露）問題在 IOT領域顯得較為突出，耗費了 大量的精力去優化。3.嵌入式JS引擎的運行時性能差，內存負載高，性能焦慮難以根治。0 03 3WWe eb bA As ss se emmb bl ly y展展望望什什么么是是 WWe eb bA As ss se emmb bl ly y采用沙箱隔離機制提供可控的資源訪問簡潔高

9、效的字節碼設計方便實現 JIT/AOT加快執行速度W3C 制定統一規范多種上層語言支持支持 Web 和非 Web 環境WWe eb bA As ss se emmb bl ly y安安全全高高效效可可移移植植性性WebAssembly 是一種可移植，體積小，加載快速且兼容 Web 的全新二進制格式。除了應用在瀏覽器上，IOT 和邊緣計算也是其熱門的應用場景。2 20 01 10 0Emscripten 作為個人項目開始開發2 20 01 13 3Asm.js 發布并成功將Unreal Engine 編譯為asm.js 運行在了瀏覽器2 20 01 11 1Emscripten發布2 20 01

10、 15 5FireFox，Chrome，Safari 和Edge 合作開發 WebAssembly并成立了相應的 W3C 工作組2 20 01 17 7四大主流瀏覽器相繼支持 WebAssembly2 20 01 19 9W3C 發布WebAssembly 1.0正式版WWe eb bA As ss se emmb bl ly y 誕誕生生時時間間線線為為什什么么 I IO OT T 場場景景需需要要 WWe eb bA As ss se emmb bl ly y安安全全沙沙盒盒高高性性能能多多語語言言WWe eb bA As ss se emmb bl ly y 現現存存問問題題WebAss

11、embly 技術還比較新，整個生態尚不夠成熟。目目前前主主要要支支持持靜靜態態語語言言，對對動動態態語語言言的的支支持持能能力力不不足足 GC Proposal 目前處于 Phase3，基本穩定但尚未被廣泛支持。開開發發工工具具尚尚未未完完善善 缺少內存分析工具 缺少性能分析工具缺缺失失一一部部分分關關鍵鍵能能力力缺缺少少模模塊塊化化機機制制，跨跨模模塊塊訪訪問問需需要要借借助助序序列列化化：Component Model Proposal 處于Phase1階段，極不穩定，短時間內無法成熟。缺缺少少通通用用異異常常處處理理機機制制：Exception Handling Proposal 也處于

12、 Phase3 階段，瀏覽器&運行時未廣泛實現，導致無法提供高級語言中的 try catch 能力。WWe eb bA As ss se emmb bl ly y 技技術術棧棧缺缺失失一一個個高高效效的的前前端端開開發發語語言言這這極極大大地地限限制制了了它它在在前前端端領領域域的的應應用用0 04 4I IO OT T 場場景景下下前前端端高高性性能能探探索索解解決決性性能能焦焦慮慮：“WWA AS SMM語語言言”考考量量易用性安全性高性能對于編程語言來說，易用性，高性能和安全性存在著根本性的矛盾，事實上無法同時滿足這三者，只能做出權衡?？蚣苣壳安捎肑S作為上層開發語言，如果我們希望進一步

13、提升運行效率，選擇一種合適的語言很重要，它應該有如下特點：符合前端開發習慣，便于對接前端生態 更好的理論性能，便于優化J JS SC CR RU US ST TG GO O?性性能能開開發發效效率率/易易用用性性基于WebAssembly，存在不同語言的選擇：C/C+/Rust:傳統的后端語言，高性能，開發效率較低。很難融入前端現有生態，切換成本很高。JS/GO:需要嵌入整個引擎運行時，通過“套娃”方式實現，效率進一步降低，性能需求無法滿足。最終需要在執行效率和開發效率之間做一個權衡，既能享受到WASM帶來的效率提升，又能較好地對接前端生態，保持前端開發效率和開發體驗。對對接接前前端端現現有有

14、生生態態TS 是前端領域內對 JS生態的有效補充，在前端領域應用廣泛直直接接編編譯譯到到 WWA AS SMM將 TS 的靜態類型信息轉譯到WASM，利用 WASM 的高性能AOT進行提速兼兼顧顧開開發發和和運運行行效效率率開發者鐘愛動態語言，IOT 需要執行效率，TS 可能會是一個平衡點尋尋找找合合適適的的WWA AS SMM語語言言下一代應用框架需要擁有更好的性能表現，我們一直在尋找前端領域的高性能解決方案。WebAssembly代表了前端領域對高性能的進一步追求，這是一個新的契機?？紤]到WASM生態現狀，希望能找到合適的語言來在開發效率和執行效率間達到平衡。將將T TS S引引入入WWA

15、 AS SMM生生態態，把把前前端端技技術術帶帶回回前前端端WWA AMMR R&T TS S2 2WWA AS SMMWWA AMMR R(wwa as smm-mmi ic cr ro o-r ru un nt ti imme e)由Intel開源，C實現的wasm運行時，尺寸小，高性能 設計目標是為嵌入式和云計算場景提供wasm運行環境 適配多種CPU架構，對Xiaomi Vela有適配 支持多種運行模式：JIT，AOT&Interpreter 支持了GC Proposal，支持V8 GC擴展t ts s2 2wwa as smm 由Intel發起，Xiaomi參與聯合開發，將types

16、cript編譯為wasm在WAMR上運行。使用了tsc作為編譯前端，將ts源碼解析成AST 基于AST做語法解析處理并對接 codegen，利用binaryen生成帶wasm gc的wasm字節碼 實現運行時庫提供ts規范中的動態性部分 目標是盡可能多地保持對typescript的語法兼容，但禁止過于動態的部分（避免帶入完整的js運行時帶來性能和尺寸問題）T TS S2 2WWA AS SMM編編譯譯流流程程語法分析語法處理語義處理后端生成WASMC/C+SourceScope Tree BuildImport/Export ResolveType ResolveVariable ScanNa

17、me ManglingStatement&Expression ProcessType TranslateGlobal Object ProcessBuild Object DescriptionBuild Statement&ExpressionVariable FlatternIR Building編譯前端主要工作由tsc實現支持不同生成后端 基于tsc AST進行語法和語義處理，最終得到基于內部TS IR的等價表示 后端生成部分和TS IR對接，支持不同的而生成后端：使用binaryen生成wasm字節碼 實現自定義parser生成C/C+源碼 后端生成代碼需要運行時的配合T TS S

18、R Ru un nt ti imme e實實現現獨獨立立的的原原生生T TS S運運行行時時WWA AMMR R E En ng gi in ne eT TS S R Ru un nt ti imme e L Li ib br ra ar ry yD Dy yn na ammi ic c T Ty yp pe e L Li ib br ra ar ry yWWA AS SMM G GC C A AP PI IT TS S s st ta an nd da ar rd d l li ib br ra ar ry yB Ba as si ic c J JS S R Ru un nt ti imme

19、 e T Ty yp pe e S Su up pp po or rt t TS wasm fileCompileRun 由WAMR提供嵌入式環境下的WASM運行環境 實現ts2wasm編譯器，將ts源碼編譯為wasm字節碼交由WAMR運行 在WAMR之上實現TS運行時庫，配合ts2wasm編譯器一起實現完整的TS語義支持 基于libdyntype API提供ts動態類型（主要是any）支持 提供WASM GC API，配合編譯器實現對靜態類型對象的訪問和操作 實現TS標準庫和內置對象支持，如Array，Map，String等 由于WASM規范的存在，后續可以較為容易地支持在瀏覽器上運行 由于

20、運行在WASM上，TS語義仍然受到一定限制，不支持eval等依賴解釋執行的特性T TS S運運行行時時對對象象表表示示為了在運行時支持TS的Structural Typing類型系統，采用Shape+Meta+Vtable 的方式來實現。Shape是描述一個對象的成員及順序的數據結構。決定shape的有兩個因素：1.成員的名稱2.成員的順序Meta，或元信息，描述一個Shape的成員內容和順序，是Shape靜態的部分?；谶@個信息，可以方便地在運行時實現反射。S Sh ha ap pe eMMe et ta aVtable用于表示Shape和對象的映射關系，可以在運行時修改。引入該概念是為了解

21、決TS結構化類型中的“變量位置無關”特性，方便做類型轉換。V Vt ta ab bl le eR Ru un nt ti imme e O Ob bj je ec ct t WWi it th h S St tr ru uc ct tu ur ra al l T Ty yp pi in ng T TS S運運行行時時對對象象示示例例interface A a:number;b:string;let o1=a:10,b:hello,c:true;let o2=x:10,b:hello,a:20;const a1:A=o1;const a2:A=o2;meta01Shape:A for o1vta

22、bleobj_dataa1vtablea:10b:“hello”o1c:truevtablex:10b:“hello”o2a:20vtableobj_dataa2meta21Shape:A for o2“a”“b”Meta:A表示meta信息，靜態信息，運行時不會修改，存儲在data段表示Vtable信息，也是靜態信息，但可以在運行時修改，該信息是運行時代碼執行的重要信息，允許在運行時創建/刪除。Object數據信息，每個對象獨有，可以在運行時創建/修改/刪除。顏色說明：利用Shape，Meta和Vtable的組合，可以高效地表示TS運行時對象，支持結構化類型系統，支持諸如Interface，

23、繼承，類型協變等TS特性。T TS S運運行行時時A An ny y的的實實現現在TS之中，并不是所有的東西都是靜態的，還包含動態的部分。從實現上講，我們只能將靜態部分依托類型信息編譯到WASM，動態的部分只能保持原樣，讓它以動態類型的形式存在。在TS中，any就是典型的動態類型場景，該如何實現支持？any實際上和非any的變量有不同的表示方式：非any的部分被編譯為wasm，由wasm gc托管。any被視為JS對象，由JS類型系統托管。TS運行時庫實現了一套JS類型系統來支持TS中的any語義。實現自動的boxing和unboxing來完成any和非any變量的賦值和轉換。wwa as s

24、mm o op pe er ra at ti io on n s st ta ac ck kanyrefwwa as smm G GC C H He ea ap pp pt tr rwasm anyrefJ JS S G GC C H He ea ap pH He el ll lo oJSStringflagsWasm ST TS S2 2WWA AS SMM項項目目愿愿景景TS2WASM項目的愿景和核心目標如下：豐豐富富前前端端生生態態，解解決決WWe eb bA As ss se emmb bl ly y缺缺乏乏前前端端開開發發語語言言的的痛痛點點 目前構建到WASM的主要是靜態語言，如C

25、/C+/Rust，對前端語言缺乏足夠支持，將運行時編譯到WASM運行效率很低。TS2WASM對WASM技術在前端的推廣具有積極作用。反反哺哺WWA AS SMM生生態態，推推動動生生態態演演進進 WASM在最初階段主要考慮支持靜態語言并依附于JS生態之上提供功能，其規范本身對動態語言的支持是不足的。諸如GC，模塊化等動態語言和獨立生態急需的特性由于缺乏足夠的需求驅動，相關提案進展緩慢。WASM生態本身也需要一個有足夠分量的前端語言來聚焦需求，推進相關標準的演進。盡盡可可能能兼兼容容T TS S語語法法特特性性，在在提提供供一一致致的的編編程程體體驗驗的的前前提提下下帶帶來來可可觀觀的的提提升升

26、性性能能 將完整的TS搬上WASM是很困難的，這需要在WASM之上實現JS引擎來提供完整支持，但這樣做意義不大。盡可能高效地將TS靜態化的部分編譯為WASM，實現一個簡化版的JS引擎來提供動態性支持是更好的策略，代價是對TS語法做出部分限制。T TS S2 2WWA AS SMM F FA AQ Q項項目目目目前前進進度度如如何何？項目目前處于早期階段，對TS語法的支持還不完備。包括編譯器，TS運行時，標準庫，WAMR引擎支持功能都在積極開發中，尚無法應用于生產環境。我我對對項項目目感感興興趣趣，如如何何使使用用/做做貢貢獻獻？項目開源后歡迎廣大開發者試用/提PR。因項目處于早期階段，可能會遇

27、到比較多的問題，遇到問題請積極提issue，也歡迎對此項目感興趣的同學積極參與項目的社區治理和開發。項項目目是是否否開開源源？項目目前在走開源流程，近期會轉為開源社區治理，敬請關注。T TS S2 2WWA AS SMM相相對對T TS SC C有有何何限限制制？目前禁用的特性主要是處于性能考慮，目標是盡可能地兼容，具體的功能禁用列表尚未明確，可能會隨著功能的實現有所增加。T TS S2 2WWA AS SMM的的性性能能表表現現如如何何？引入WASM GC后，AOT模塊的改造還未完成，目前還沒有具體的性能數據?；谥暗臏y試結果，非GC模式時AOT模式相比C有20%性能差距。T TS S2

28、2WWA AS SMM不不支支持持在在瀏瀏覽覽器器上上運運行行嗎嗎？暫時是這樣，但瀏覽器也是目標平臺之一。在當前階段，由于TS2WASM依賴的WASM GC提案尚未得到瀏覽器廠商的廣泛支持，在瀏覽器上運行還存在問題。等WASM相關標準進一步推進且得到廣泛支持后，在瀏覽器上執行將不存在障礙。下下一一代代應應用用框框架架展展望望基于TS2WASM編譯器和WAMR運行時，可以對下一代高性能IOT應用框架進行一些探討和展望：靜靜態態化化T TS S運運行行時時借由ts2wasm和wamr提供完善的嵌入式環境下的高效語言運行時，支撐上層應用的高效執行，效率較JS技術棧有明顯提升（預期58倍）聲聲明明式式D DS SL L重新設計的框架DSL，舍棄之前模板編譯方案，提供聲明式語義，更加靈活且高效，提高對復雜界面的描述能力?；谛翫SL重新設計框架實現，實踐新的，可能更適合嵌入式領域的編程范式。完完善善的的工工具具支支持持基于新的運行時，積極參與周邊配套工具的開發，提供配套IDE，支持源碼調試，開發相應的內存和性能profile工具等，為開發者提供便捷的開發體驗，提升生產力。T TH HA AN NK KS S