Kraken: 基于Flutter引擎的TypeScript UI框架在树莓派上的应⽤

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. Kraken: 基于Flutter引擎的TypeScript UI框架在树莓派上的应⽤用 徐远同 阿⾥里里巴巴⽆无线开发专家
4. ⾃自我介绍 华为 GCanvas+渲染 ⼤大前端
5. ⽬目录 一. 淘宝在非标硬件设备上的实践 二. Kraken(Flutter-Like)框架介绍 三. 渲染管线介绍 四. 总结和展望
6. 未来的样⼦子?
7. 挑战 ⾮非标Android设备 • • • • dpi = 1.5? width = 800? height = 600? 原⽣生组件可能变形 MALI-400 ⾼高动态性要求 • • • 随时可能变化的需求 有较复杂的动画,性能有⼀一定的要求 Native能⼒力力能扩展
8. 基于GCanvas的容器器渲染⽅方案 Business Business Code Javascript Binding Objects JS Runtime JS Engine JS Module Manager Render GCanvas 2D Context GCanvas WebGL Context Font Image Common Threading File System Network Input Platform Android iOS
9. JS Binding V8 /JSC var canvas = createCanvas(); var ctx2d = canvas.getContext('2d'); ctx2d.fillStyle = 'green'; ctx2d.fillRect(10, 10, 100, 100); JavaScript class JSContext2D : public JSRuntimeObject { public:'>public: void fillRect(const std::vector &args); }; class JSCanvas : public JSRuntimeObject { public:'>public: JSContext2D* getContext(std::string &type); }; C++
11. 事后梳理理 •场景固定 •能⼒力力固定 •硬件规格固定 图⽚片来⾃自:Bloomberg
12. 机遇 设备碎⽚片化 动态性⽋欠缺 开发效率低 操作系统 Hot Reload 某些⽅方案:35 pages = 1 P/4M 硬件规格 Hot Update
13. ⽬目标 建⽴立⼀一套运⾏行行在Linux上的⾯面向⼯工业的智能设备的渲染体系 具有动态性,Native和UI框架/业务均可实时更更新 ⾯面向前端开发,开发效率⾼高 渲染性能好于WebView
14. UI渲染引擎需要什什么 有⼀一套对包括Texture, Buffer, RenderTarget在内的渲染能⼒力力通⽤用抽象 有⼀一套基于命令对象的管线系统 有⼀一套良好设计的线程模型 有⼀一套合理理的缓存机制
15. Flutter Flutter Flutter Flutter Flutter 跨系统⼀一致性 性能和效率
16. why NOT Flutter
17. Why Not Flutter 4000+ pub Release版本是AOT,⽆无动态性 10W+ NPM packages 还有谁?
18. Kraken:基于Flutter引擎的TypeScript框架 基于Flutter渲染引擎 使⽤用TypeScript编写UI Framework API和Flutter保持⼀一致
19. Kraken架构 UI Framework Animation Raw Components Widgets Binding Objects JS Runtime JS Engine Render Common Platform Painting Image Skia Threading Android JS Module Manager Frame Management Text File System Network iOS Raster&Cache Layers Input Linux TypeScript
20. • 运⾏行行在树莓派上 • 模拟点餐的环境
21. 代码⻛风格 runApp( new Container({ color:'>color: new Color(0xffff0000), width:'>width: 100, height:'>height: 100, margin: 10, child: new Container({ color:'>color: new Color(0xff00ff00), width:'>width: 100, height:'>height: 100 }) }) );
22. Kraken的组件情况 • 实体类:Image / Text / RichText / Paragraph / Container(decoration) • 属性类:Padding / Expanded / Center / Transform / Opacity • 布局类:Stack / Row / Column / Flex / ScrollView • 交互类:Animation / GestureDetector
23. 从这⾥里里开始 runApp(Some Widget)
24. 从这⾥里里开始 runApp( new Container({ color:'>color: new Color(0xffff0000), width:'>width: 100, height:'>height: 100, margin: 10, child: new Container({ color:'>color: new Color(0xff00ff00), width:'>width: 100, height:'>height: 100 }) }) )
25. 渲染管线 C++ TypeScript 构建 布局 绘制 合成 光栅化 渲染 显示
26. 构建 Widget Tree RenderObjectTo WidgetAdapter Padding Container ConstrainedBox Container DecoratedBox Element Tree createElement create RenderObjectTo WidgetElement ComponentElement Eleme nt create Eleme create Eleme create Eleme mount nt nt nt build SingleChildRender ObjectElement SingleChildRender ObjectElement SingleChildRender ObjectElement ComponentElement build
27. 构建 Widget Tree Element Tree RenderObjectTo WidgetElement RenderObjectTo WidgetAdapter ComponentElement Padding SingleChildRender ObjectElement ConstrainedBox SingleChildRender ObjectElement DecoratedBox SingleChildRender ObjectElement ConstrainedBox ComponentElement DecoratedBox SingleChildRender ObjectElement LimitedBox SingleChildRender ObjectElement SingleChildRender ObjectElement
28. 构建 Widget Tree Element Tree RenderObject Tree RenderObjectTo WidgetElement RenderObjectTo WidgetAdapter Padding ComponentElement RenderView SingleChildRender ObjectElement RenderPadding ConstrainedBox SingleChildRender ObjectElement DecoratedBox SingleChildRender ObjectElement RenderConstrained Box createRenderObject ConstrainedBox ComponentElement DecoratedBox SingleChildRender ObjectElement LimitedBox SingleChildRender ObjectElement SingleChildRender ObjectElement RenderDecorated Box RenderConstrained Box RenderDecorated Box RenderLimited Box
29. 布局 「 RenderView width:'>width:'>width:'>width: window.width height:window.height left:'>left:0'>left:'>left:0 top:'>top:'>top:'>top: 0 是否为第⼀一帧 是 TypeScript 否 RenderPadding width:'>width:'>width:'>width: 100 height:100'>height:100 left:'>left: 0 top:'>top:'>top:'>top: 0 RenderConstraine dBox width:'>width:'>width:'>width: 100 height:100'>height:100 left:'>left: 0 top:'>top:'>top:'>top: 0 C++ SyncWaiter 等待下⼀一帧的VSync信号 Frame performLayout 」
30. 布局 (0, 0) X Child Parent height width Y Max Width = ? Min Width = ? Max Height = ? Min Height = ?
31. 绘制 RenderObject Tree RenderView RenderPadding RenderConstrained Box RenderDecorated Box RenderConstrained Box RenderDecorated Box RenderLimited Box paint
32. 绘制 paint(context: PaintingContext, offset: Offset): void
33. 绘制 startRecording endRecording
34. 合成 RenderObject Tree Layer Tree RenderView TransformLayer RenderPadding OffsetLayer RenderConstrained Box OffsetLayer RenderDecorated Box PictureLayer compositeFrame RenderConstrained Box OffsetLayer RenderDecorated Box PictureLayer RenderLimited Box OffsetLayer
35. 渲染管线 TypeScript 构建 布局 绘制 C++ 合成 光栅化 渲染 显示
36. 线程模型
37. 光栅化 UI LayerTree Raster GPU Frame Frame Frame
38. 光栅化 Layer LayerTree(c++) Tree(ts) TransformLayer transform TransformLayer OffsetLayer transform TransformLayer OffsetLayer translate preroll PictureLayer no cache TransformLayer OffsetLayer transform PictureLayer no cache TransformLayer OffsetLayer transform
39. 光栅化缓存 是否为复杂组件(上层指定) 是否可被缓存 未来是否会变化(上层指定) 绘制指令是否多于10个
40. 绘制 Layer Tree(c++) TransformLayer TransformLayer TransformLayer paint PictureLayer playback TransformLayer PictureLayer TransformLayer playback
41. 绘制 glClear glUseProgram Surface glDrawElements PIcture
42. 显示 Surface
43. 渲染管线 TypeScript 构建 布局 绘制 C++ 合成 光栅化 渲染 显示
44. ⾃自定义组件 paint(context:'>context: PaintingContext, offset:'>offset: Offset): void { if (this.child) { const { size } = this; const { width, height } = size; const path = new Path(); path.moveTo(0, 0); path.lineTo(width, 0); path.lineTo(width, height * 0.8); path.quadraticBezierTo(width * 0.75, height, width * 0.5, height * 0.8); path.quadraticBezierTo(width * 0.25, height * 0.6, width * 0, height * 0.8); path.close(); context.pushClipPath(true, offset, Rect.fromLTWH(0, 0, size.width, size.height), path, (context:'>context: PaintingContext, offset:'>offset: Offset) => { const canvas = context.canvas; const paint = new Paint(); paint.color = new Color(0xFFFFFFFF); super.paint(context, offset); canvas.drawRect(Rect.fromLTWH(0, 0, 30, 30).shift(offset), paint); }, {}); } }
45. TypeScript对⽐比Dart的语⾔言差异 Mixin的差异 不不⽀支持操作符重载 Future能⼒力力不不⼀一致 ……..
46. 展望 TypeScript的性能问题 ⼯工具链和开发体验 Web标准的引⼊入
49. THANKS THANKS! THANKS!