原型技术原理 GCanvas JS API Kraken 原型版本优劣 研发效率低 适用场景有限 简单直接 嵌入式主板 GPU Skia OpenGL ES / Vulkan Layout XML Layer Tree RenderObject Tree Widget Tree Java / Kotlin React.js Rax.js / Vue.js VDOM Dart Native View Tree (OEM) Layout Tree DOM Tree JS VDOM Layer Tree Layer Tree 渲染技术探索 Dart JavaScript JavaScript JavaScript WORE ??? ?? WORE ??? LORE ?? (Learn One Run Everywhere) WORE ???? (Write 之外的另一个真跨端渲染技术 ? ? ? 通过 platform channels 调用平台能力 支持 Hot Reload 不支持 Flex Layout 布局 比肩原生的性能 调试工具完善 脱离前端 JS 生态 不支持动态下发 Bundle 不支持类 JSX，可读性差 前端视角里的 Flutter 使用 Flutter 的刚性诉求 具有动态性 可连接前端生态 Dart 生产模式 开发 Develop

JavaScript 的发展 多范式：函数式、OO、命令式 1995 年诞生于 Netscape 1998 年成为 ECMA 标准 2006 年 jQuery 发布 2009 年 Node.js：JavaScript 延伸到 Server 端 近两年：AMD、CommonJS 模块化标准 当前：正在制定 ECMAScript 6 标准 JavaScript 并不完美 JavaScript CoffeeScript等编译器就是 JS 实现的，可以在线直接编译。 Dart 有所不同，dart2js 编译器 是 Dart 语言实现的，然后 dart2js 自己把自己编译成了 JS。 甚至这些非编译为 JavaScript 的语言： Go http://play.golang.org/ 但原理是将代码上传到服务器（沙盒中）执行，并返回输出 其它数十种编译到JS或JS的扩展语言 ● ClojureScript ClojureScript ● LiveScript ● RubyJS ● GWT ● Asm.js ● …… more languages search by “List of languages that compile to JS” 各种技术所做的改进 1. Web的演化 2. 语言篇 a. 语言的发展 b. Dart 介绍 3. 技术篇（Web Components） 大纲

用实现网页音/视频通话 • 低延迟直播系统(在线课堂) • 多人视频会议系统 • 高质量SIP/VOIP系统 • 视频监控系统 • 机器学习，视觉计算等 如何使用它 01. 副标题 • 在Web中使用JS API • 基于google libwebrtc实现原生客户端开发 (ios/android/c++) • 使用第三方堆栈实现兼容功能（Go） https://github.com/pion/webrtc 98 c=IN IP4 0.0.0.0 a=rtpmap:120 H264/90000 b=AS:1000 a=sendrecv 客户端 第三部分 WebRTC客户端开发 • Web端 标准JS +html 或通过google 官方提供的源码编 译出原生sdk • iOS/macOS 使用WebRTC.framework + Obj-C/Swift • Android 使用libwebrtc 性能问题(全部使用html5) 客户端是否有 更好的选择？ 为何选择 Flutter • 同样是 Google 发起的跨全平台高性能UI框架 • 基于 Skia 2D 渲染引擎 • 使用类似JS/TS的Dart 语言开发 • 支持代码编辑后热重载, Flutter 支持那些平台 iOS/Android/Web/Windows/Linux/macOS/Embedded 使用flutter

Web页面 • H5 + CSS3 + JS • 最成功的的跨平台 201 7 2014 Hybrid Apps • Native良好的用户交互体验 • Web跨平台开发 Write Once, Run Anywhere Flutter简介 跨平台 1 201 4 Web页面 2015 React Native • FaceBook • JS -> iOS + Android 1 201 4 Web页面 2016 React Native 201 5 201 7 Write Once, Run Anywhere WeeX • Alibaba • JS -> iOS + Android + Web Flutter简介 跨平台 1 201 8 201 4 Web页面 2017 React Native 201 5 Write 4 JavaScript扩展 Dart与JavaScript交互 index.html Flutter For Web 4 JavaScript扩展 Dart与JavaScript交互 js_helper.dart Flutter For Web 4 降级 Flutter UI Adapt CSSender Navigator MJFlutter … 异常处理 上线

开发语⾔言：JavaScript 开发语⾔言：JavaScript 为何可以跨平台？ H5、Hybrid：虽然UI⾃自⼰己渲染， 但是渲染性能太低，⽽而且JS运⾏行行 效率太低 RN：虽然是Native渲染，但多了了 布局解析的性能损耗，⽽而且JS运⾏行行 效率太低。 WEB流 ⽅方案2 转化为Native渲染 Mono AOT ARM CODE IL JIT Mono C# Debug 22.28M 31M Release 3.46M 13.8M Flutter SDK Dart代码的构建产物 Native 代码 资源⽂文件 热更更新？ JIT 替换产物 ⽣生成js …. Flutter 已经把热更更新作为 接下来的重要特性在开发 ⼩小德-koudle @Tencent 我的Github： https://github.com/koudle 我的掘⾦金金主⻚页：

DART 三端统一 • Dart_Native=>Dart_h5 • 支持从Dart语言到JS转换 • 可直接在浏览器中访问 • 转换效率低框架代码过多 WEB iOS Android DART Dart2JS 三端统一 WEB iOS Android DART Dart2JS • Dart Widget • Property => css • 精简框架代码 关于我们