Categories
程式開發

基於Flutter引擎的TypeScript UI框架在樹莓派上的應用丨GMTC


5G時代即將來臨,IoT是5G時代一個重要的場景之一。應該以什麼姿態和角色去迎接新的技術變革,是每個端開發需要思考的問題。

淘寶技術是新零售的踐行者之一。我們曾在線下零售,工廠製造中嘗試過包括WebView、Hybrid、純Native在內的多種技術方案,以求在渲染性能、動態性和開發效率中取得平衡,但效果差強人意。因此,淘寶渲染技術團隊在Flutter的Native引擎基礎上,建立了一套基於TypeScript的,擁有2D/WebGL/WebGPU能力的可編程自定義的UI渲染管線。

本次分享將會以渲染技術團隊在IoT零售中的實踐作為起點,詳細介紹新的UI渲染管線的原理和實現,包括自定義渲染管線關鍵實施步驟、引擎中實現的核心技術、跨平台移植的一些細節等內容。希望對關注渲染技術的端側與會者帶來思路上的拓展和幫助。

演講提綱:

1、IoT時代前端面臨的問題

  • 5G時代概述
  • 嵌入式設備的開發現狀,以及正在發生的變化
  • 面臨的問題
    開發成本和效率問題
    技術引發的動態性問題
    WebView方案因性能帶來的成本和體驗問題

2、炙手可熱的Flutter

  • 簡介
  • 原理簡介
  • 生態問題

3、”G”項目介紹

  • 目標定位:使用TypeScript,且擁有Canvas/WebGL/WebGPU能力,可高度定制渲染管線,擁有完整工具鏈的跨端跨平台高性能渲染解決方案
  • 技術特點:Flutter引擎+TypeScript+GCanvas
  • 框架簡介
  • 渲染管線整體流程概述(TypeScript的部分是自定義渲染管線,其餘部分歸為引擎)

4、自定義渲染管線詳解

  • 樹的創建
  • 佈局和測量運算
  • 繪製
  • 渲染
  • 視圖緩存
  • 輸入輸出
  • 狀態更新

5、引擎詳解

  • 跨平台概述
  • 線程模型
  • Skia能力概述

6、工具鏈簡介

  • 如何實現全鏈路Debugger

7、GCanvas和2D/WebGL/WebGPU能力

8、展望和總結

  • TypeScript Runtime
  • CSS怎麼支持

聽眾收益:

1、可以了解IoT時代端側開發麵臨的具體問題

2、可以了解瀏覽器以及Flutter在內的類W3C渲染體系的完整工作鏈路和原理

3、為業內提供解決IoT渲染問題的新思路