使用-React-構(gòu)建-Flutter-應(yīng)用課件

1、使用 React 構(gòu)建 Flutter 應(yīng)用探索新一代渲染技術(shù) Kraken2011 - 2013年WebQQQQ手機(jī) QQ2014年 - 現(xiàn)在淘寶交易線產(chǎn)品淘寶中后臺(tái)產(chǎn)品淘系無線架構(gòu)、中后臺(tái)架構(gòu)/yuanyan元彥淘系前端團(tuán)隊(duì)天貓未來店 GCanvas C+ EngineGPUOpenGL ES / VulkanKreken 原型技術(shù)原理GCanvas JS APIKraken 原型版本優(yōu)劣研發(fā)效率低適用場景有限簡單直接嵌入式主板GPUSkiaOpenGL ES / VulkanLayout XMLLayer TreeRenderObject TreeWidget TreeJava / Ko

2、tlinReact.jsRax.js / Vue.jsVDOMDartNative View Tree (OEM)Layout TreeDOM TreeJSVDOMLayer TreeLayer Tree渲染技術(shù)探索DartJavaScriptJavaScriptJavaScriptWORE WORE LORE (Learn One Run Everywhere)WORE (Write Once Run Everywhere)Good Performance Good Performance Good Performance Its OK JIT (Develop) / AOT (Deploy

3、)JITJITJITAmazing Ecosystem Its OK Good Ecosystem Good Ecosystem Built-in Features Built-in Features Built-in Features Built-in Features (14) (10) (9) (13)為什么 FlutterWebFlutterFlutter 是 Web 之外的另一個(gè)真跨端渲染技術(shù)通過 platform channels 調(diào)用平臺(tái)能力支持 Hot Reload不支持 Flex Layout 布局比肩原生的性能調(diào)試工具完善脫離前端 JS 生態(tài)不支持動(dòng)態(tài)下發(fā) Bundle不支

4、持類 JSX，可讀性差前端視角里的 Flutter使用 Flutter 的剛性訴求具有動(dòng)態(tài)性可連接前端生態(tài)Dart 生產(chǎn)模式開發(fā) Develop部署 DeployJITDart VMDart AOT RuntimeAOTAny application that can be written in JavaScript, will eventually be written in JavaScript.Jeff AtwoodCo-founder of StackOverflow“Flutter 增長迅速，但 Dart 關(guān)注平平Kraken關(guān)于 Flutter for Web并不是完全雞肋，適合其

5、只適合非 C 端業(yè)務(wù)場景中國可能是全球最關(guān)注 Flutter 的國家我們的目標(biāo)：能直接運(yùn)行嗎？DemoReduxMobxRxjsLodashUnderscoreMomentgraphqlImmutablejsRamdaValidator.jsNpmYarnbabelwebpackRollupeslintjestmocha YesLessSassStylusTypeScript背后原理Kraken Dart FrameworkKraken BridgeReactReact FrontendLinuxAndroidiOSFlutter Engine(C+) CompositionFrame Sch

6、edulingKrakenJavaScriptRuntimeKraken Object ModelBridge BindingText LayoutKraken ProtocolCommunicationJSCallDartDartCallJSKranken API (C+)V8JS EngineJS Engine AbstractFlutter BackendKraken Bridge ProtocolPlatformsKraken Bridge ProtocolJSCDocument Object ModelKraken JavaScript RuntimeRoot ElementElem

7、entDocumentElement“Hello”Text Node“World”Text NodeElementElement“!”Text NodeDocument Object Modelconst body = document.body;const div = document.createElement(div);body.appendChild(div);const text = document.createTextNode(hello);div.appendChild(text);Kraken Bridge ProtocolcreateElement(div)body.app

8、endChild(div)insertAdjacentNode, -1, beforeend, id: 0 , type: DIV id: 0 , type: DIVKraken Bridge_kraken_js_to_dart_(“ ”)JSON.stringify“ ”jsonDecodeinsertAdjacentNode, -1, beforeend, id: 0 , type: DIV Flutter BackendKraken Dart FrameworkFlutterKraken BridgeRenderingAnimationPaintingFoundationGestures

9、Flutter EngineKraken Web ElementKraken Bridge ProtocolKraken Dart FrameworkpdivaimgspanWeb ElementsKraken JavaScript RuntimeKraken Object ModelTimer: setTimeout/clearTimeoutInterval: setInterval/clearIntervalScreen: height, width, Location: href, host, search, Window: open, close, fetchWebSocketChro

10、me Developer ToolsKraken 持續(xù)演進(jìn)Kraken BridgeReact FrontendFlutter BackendKrakenJavaScriptRuntimeKraken Object ModelBridge BindingKraken ProtocolCommunicationJSCallDartDartCallJSKranken API (C+)V8JS EngineJS Engine AbstractBackendKraken Bridge ProtocolKraken Bridge ProtocolJSCDocument Object ModelVue F

11、rontendAngular FrontendFrontend不僅僅是 ReactKraken with Cloud為什么上云？Google StadiaPlayStation Now云游戲Microsoft xCloud云化體驗(yàn)免下載即開即玩無需購買高性能設(shè)備云計(jì)算共享所有能云化的應(yīng)用最終都將云化“EventsWebRTC/QUICDecoding （H.265）WebSocket Render EngineEncoding (H.265)Streaming PlayerStreaming CapturerLow latency capture with zero-copy GPU pipeline to encoderHardware-specific encoding libraries implemented directly on LinuxHard