1、使用 React 构建 Flutter 应用探索新一代渲染技术探索新一代渲染技术 Kraken Kraken 2011-20132011-2013年年 WebQQ QQ 手机 QQ 20142014年年-现在现在 淘宝交易线产品 淘宝中后台产品 淘系无线架构、中后台架构https:/ GCanvas C+EngineGPUOpenGL ES/VulkanKreken 原型技术原理GCanvas JS APIKraken 原型版本优劣研发效率低研发效率低适用场景有限适用场景有限简单直接简单直接嵌入式主板GPUSkiaOpenGL ES/VulkanLayout XMLLayer TreeRend
2、erObject TreeWidget TreeJava/KotlinReact.jsRax.js/Vue.jsVDOMDartNative View Tree(OEM)Layout TreeDOM TreeJSVDOMLayer TreeLayer Tree渲染技术探索DartDartJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptJavaScriptWORE WORE WORE WORE LORE LORE(Learn One Run Everywhere)(Learn One Run Everywhere)WORE WORE(Write
3、 Once Run Everywhere)(Write Once Run Everywhere)Good Performance Good Performance Good Performance Good Performance Good Performance Good Performance Its OK Its OK JIT(Develop)/AOT(Deploy)JIT(Develop)/AOT(Deploy)JITJITJITJITJITJITAmazing Ecosystem Amazing Ecosystem Its OK Its OK Good Ecosystem Good
4、Ecosystem Good Ecosystem Good Ecosystem Built-in Features Built-in Features Built-in Features Built-in Features Built-in Features Built-in Features Built-in Features Built-in Features (14)(14)(10)(10)(9)(9)(13)(13)为什么 FlutterWebWebFlutterFlutterFlutter Flutter 是是 Web Web 之外的另一个之外的另一个真跨端渲染技术真跨端渲染技术通过
5、 platform channels 调用平台能力支持 Hot Reload不支持 Flex Layout 布局比肩原生的性能调试工具完善脱离前端 JS 生态不支持动态下发 Bundle不支持类 JSX，可读性差前端视角里的 Flutter使用 Flutter 的刚性诉求具有动态性具有动态性可连接前端生态可连接前端生态Dart 生产模式开发开发 Develop Develop部署部署 Deploy DeployJITDart VMDart AOT RuntimeAOTAny application that can be written in Any application that can
6、be written in JavaScript,will eventually be written JavaScript,will eventually be written in in JavaScriptJavaScript.Jeff AtwoodJeff AtwoodCo-founder of StackOverflowCo-founder of StackOverflow“FlutterFlutter 增长迅速，但增长迅速，但 DartDart 关注平平关注平平Kraken关于 Flutter for Web并不是完全鸡肋，并不是完全鸡肋，适合其只适合非适合其只适合非 C C 端业
7、务场景端业务场景中国中国可能可能是全球最关注是全球最关注 Flutter Flutter 的国家的国家我们的目标：能直接运行吗？DemoReduxReduxMobxMobxRxjsRxjsLodashLodashUnderscoreUnderscoreMomentMomentgraphqlgraphqlImmutablejsImmutablejsRamdaRamdaValidator.jsValidator.jsNpmNpmYarnYarnbabelbabelwebpackwebpackRollupRollupeslinteslintjestjestmochamocha YesLessLess
8、SassSassStylusStylusTypeScriptTypeScript背后原理Kraken Dart FrameworkKraken BridgeKraken BridgeReactReact FrontendReact FrontendLinuxAndroidiOSFlutter Engine(C+)CompositionFrame SchedulingKrakenJavaScriptRuntimeKraken Object ModelBridge BindingText LayoutKraken ProtocolCommunicationJSCallDartDartCallJSK
9、ranken API(C+)V8JS EngineJS Engine AbstractFlutter BackendFlutter BackendKraken Bridge ProtocolPlatformsPlatformsKraken Bridge ProtocolJSCDocument Object ModelKraken JavaScript RuntimeKraken JavaScript RuntimeRoot ElementRoot ElementElementElementDocumentDocumentElementElement“Hello”“Hello”Text Node
10、Text Node“World”“World”Text NodeText NodeElementElementElementElement“!”“!”Text NodeText NodeDocument Object ModelDocument Object Modelconst body=document.body;const body=document.body;const div=document.createElement(div);const div=document.createElement(div);body.appendChild(div);body.appendChild(
11、div);const text=document.createTextNode(hello);const text=document.createTextNode(hello);div.appendChild(text);div.appendChild(text);Kraken Bridge ProtocolKraken Bridge ProtocolcreateElement(div)body.appendChild(div)insertAdjacentNode,-1,beforeend,id:0,type:DIV id:0,type:DIVKraken BridgeKraken Bridg
12、e_kraken_js_to_dart_(“”)JSON.stringify“”jsonDecodejsonDecodeinsertAdjacentNode,-1,beforeend,id:0,type:DIV Flutter BackendFlutter BackendKraken Dart Kraken Dart FrameworkFrameworkFlutterFlutterKraken BridgeKraken BridgeRenderingAnimationPaintingFoundationGesturesFlutter EngineKraken Web ElementKraken
13、 Bridge ProtocolKraken Dart FrameworkKraken Dart FrameworkpdivaimgspanWeb ElementsKraken JavaScript RuntimeKraken JavaScript RuntimeKraken Object ModelKraken Object ModelTimer:setTimeout/clearTimeoutInterval:setInterval/clearIntervalScreen:height,width,Location:href,host,search,Window:open,close,fet
14、chWebSocketChrome Developer ToolsKraken 持续演进Kraken BridgeKraken BridgeReact FrontendFlutter BackendKrakenJavaScriptRuntimeKraken Object ModelBridge BindingKraken ProtocolCommunicationJSCallDartDartCallJSKranken API(C+)V8JS EngineJS Engine AbstractBackendBackendKraken Bridge ProtocolKraken Bridge Pro
15、tocolJSCDocument Object ModelVue FrontendAngular FrontendFrontendFrontend不仅仅是 ReactKraken with Cloud为什么上云？Google StadiaGoogle StadiaPlayStation NowPlayStation Now云游戏Microsoft xCloudMicrosoft xCloud云化体验免下载即开即玩免下载即开即玩无需购买高性能设备无需购买高性能设备云计算共享云计算共享所有能云化的应用最终都将云化所有能云化的应用最终都将云化“EventsWebRTC/QUICWebRTC/QUIC
16、Decoding（H.265）WebSocketWebSocket Render EngineEncoding(H.265)Streaming PlayerStreaming CapturerLow latency capture with zero-copy GPU pipeline to encoderHardware-specific encoding libraries implemented directly on LinuxHardware decoding on deviceZero-copy OpenGL rendering pipeline from decoderLow level frame timing and synchronization optimizationsFrame SyncingKraken 云渲染AgentAgentCloudCloud云云+端一体化是渲染技术的新趋势端一体化是渲染技术的新趋势“
