语言的发展 b. Dart 介绍 3. 技术篇 a. Web Components b. Polymer 库 大纲 Web应用的优点 ● 无需安装 ● 增量式开发 ● 自动升级 ● 跨平台 ● 天然的MVC（HTML+CSS+JavaScript） 当前的Web开发 ● Web 开发越来越复杂：项目大，团队成员多 ● 前端功能越来越多：CS→BS→CS ● 大型应用维护和协作难 Chrome App vs 桌面 App 技术上: ● 独立的窗口 ● 离线使用 ● 通知栏 ● App Launcher ● 数据云同步：chrome sync 内置支持 ● 平台访问：USB、蓝牙、Socket、Native Client 离线应用 利用离线技术将资源存在本地。如 Google Drive，飞机上也可用继续查看和编辑今天的这个 讲义。 云+端——同步无处不在 云服务 X-aaS 或 Web API ，直接使用服务，这些都非常 方便，但实现被隐藏了。 基础平台商提供现成的服务，开发者只需要懂软 件、懂系统，但不需要懂硬件了。 安全 HTTPS 无处不在 Sandbox 模型 技术发展方向 ● 演进中的各种新技术标准 ● 编程语言的多元化 Web 是平台，能在上面做什么归根结底是技术标 准和浏览器支持说了算。 技术可以被 hack 的方式玩出新花样，但能力本

谢谢！ 移动端跨平台开发的各种⽅方案 Guangzhou ⽅方案1： H5 WebView Hybrid WebView+Native React Native JavaScript+Native ⾃自⼰己负责渲染 WebView 跨平台的布局引擎： 转化为Native渲染 开发语⾔言：JavaScript 开发语⾔言：JavaScript 为何可以跨平台？ H5、Hybrid：虽然UI⾃自⼰己渲染， Xamarin：虽然性能好了了⼀一些，但是跨 平台的UI⽀支持不不好，⽆无法实现复杂的 UI布局。 编译流/虚拟机流 ⽅方案3 ⾃自⼰己负责渲染 Unity：虽然渲染性能很强⼤大，但渲染 机制为实时刷新，耗电量量太⼤大，在 APP⾥里里都是局部刷新；⽽而且安装包也 很⼤大 游戏引擎 最终⽅方案 渲染：⾃自⼰己负责渲染 dart：同时⽀支持JIT和AOT，性能⾼高 跨平台 性能 WebView Hybrid Native ReactNative Xamarin Flutter 跨平台 PC WEB Guangzhou 语⾔言 Dart语⾔言发布 2011.10 Dart1.0 2013.11 Dart2.0 2018.8 Dart2.1 2018.12 JIT：动态编译，Hot Reload AOT：静态编译,Native code 强类型，可以类型推断

个人动态 商业化 n 品牌大使 n 直播 n Banner n 原生广告 研发效率 用户体验 最快触达用户 Flutter的优势 跨平台开发 高效的开发体验 性能接近Native 1 2 3 Ø N倍平台产出 Ø 多端逻辑一致 效率 质量 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 施 性能&稳定性平台 FPS 页面打开速度 crash Bug管理 包大小分析 高可用 获取日志 远程调试 安全 接口防刷 插件平台 矩阵产品 贴吧 贴吧极速版 创新产品 公司其他产 品 业务模块 一键签到 吧资料 粉丝列表 … 系统层 Android iOS 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 第一步 当 我 跨 出 第 一 步 工程体系接入 n Flutter接入方式 n FlutterBox Flutter接入方式 源码 双端工程 Flutter环境 aar

Flutter简介 1 Flutter简介 跨平台 1 201 3 201 5 201 6 Web页面 • H5 + CSS3 + JS • 最成功的的跨平台 201 7 2014 Hybrid Apps • Native良好的用户交互体验 • Web跨平台开发 Write Once, Run Anywhere Flutter简介 跨平台 1 201 4 Web页面 Once, Run Anywhere Flutter简介 跨平台 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 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 Flutter简介 1 原生性能 生态与模式 C/C++ 引擎操作OpenGL、GPU直接渲染 平台一致性 Flutter简介 1 生态与模式 原生性能 实践框架及页面栈管理 2 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理 2 腾讯企鹅辅导 实践框架及页面栈管理

• 简介：移动跨平台方案及Flutter介绍 • 语言: Dart语言简介 • 基础：Flutter常用知识点 • 进阶：Flutter核心原理 • 资料：学习参考资料 移动跨平台方案 • H5+原生（Cordova、微信小程序） • JavaScript开发+原生渲染 （React Native、Weex、快应用） • 自绘UI+原生(Flutter) 移动跨平台方案 技术类型 开发效率 动态化 框架代表 H5+原生 WebView渲染 一般 高 支持 Cordova、Ionic JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染 好 高 默认不支持 Flutter Flutter简介 • Google 开源的 UI 工具包 • 非常精美丰富的组件库 • 支持移动、Web、桌面和嵌入式平台 • UI统一、高性能

(9) ? (13) 为什么 ❤️ Flutter Web Flutter Flutter 是 Web 之外的另一个真跨端渲染技术 ? ? ? 通过 platform channels 调用平台能力 支持 Hot Reload 不支持 Flex Layout 布局 比肩原生的性能 调试工具完善 脱离前端 JS 生态 不支持动态下发 Bundle 不支持类 JSX，可读性差 前端视角里的 Kraken with Cloud 为什么上云？ Google Stadia PlayStation Now 云游戏 Microsoft xCloud 云化体验 免下载即开即玩 无需购买高性能设备 云计算共享 所有能云化的应用最终都将云化 “ Events WebRTC/QUIC Decoding （H.265） WebSocket Render Engine Encoding (H level frame timing and synchronization optimizations Frame Syncing Kraken 云渲染 Agent Cloud 云 + 端一体化是渲染技术的新趋势 “

目 录 背景 01 技术简介 02 客户端 03 服务端 04 开源社区 05 Q&A 06 背景 第一部分 即将讲述的内容 • WebRTC 实时通讯 • Flutter 跨平台UI 开发框架 • 基于Flutter UI 框架的WebRTC 插件 flutter-webrtc • Go 语言的WebRTC 协议栈 pion/webrtc • 基于pion/webrtc 实时通讯应用爆发 • 疫情影响，全世界都在使用远程教育，远程办公 • 云游戏，机器人，VR，直播等 • 如何用最容易的方案实现实时通讯 • 漂亮的app，最好全部(mobile, web, desktop)平台都支持. • 最容易使用的后端技术 真实世界的需求点 用开源方案实现需求 WebRTC + Flutter + Go 技术简介 第二部分 WebRTC 是什么 01. • 由 原生SDK开发(每平台人力投入) • UI 的一致性，更新迭代（类似SDK需按平台维护） • 性能问题(全部使用html5) 客户端是否有 更好的选择？ 为何选择 Flutter • 同样是 Google 发起的跨全平台高性能UI框架 • 基于 Skia 2D 渲染引擎 • 使用类似JS/TS的Dart 语言开发 • 支持代码编辑后热重载, Flutter 支持那些平台 iOS/A

uNOW直播中Flutter的工程实践 u技术思考 关于NOW直播 •腾讯出品的个人直播平台 •2016年初上线 •Top3热门个人直播App •Tens of millions MAU 关于Flutter •Google推出的跨平台开发框架 •创建高性能，高稳定性，高帧率的 Android/iOS应用 •使用Dart语言开发 Flutter特性 跨平台 高性能 热重载 提升研发效 率 Flutter的应用 Flutter的应用 框架对比 Native 性 能 跨平台 Flutter RN web Hybrid 小程序 weex 框架应用 Web RN(运营需求多的) Native Flutter（性能要求高的） 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 无法跨终端同步及维护Dart代码 工程化开发模式Ⅲ • Gradle/CocoaPods依赖管理 • 跨终端团队协作远程构建产出模式 • Dart代码独立GIT • 远程构建平台配置终端推送地址 • 构建完成自动推送更新 QCI 远程构建平台 Android Git iOS Git 工程化开发模式Ⅲ 1. 拉取Dart分支 2. 拉取Android /iOS分支 3. QCI设置分支及对应版本号

闲⻥鱼 - 让你的闲置游起来 Flutter & Dart 全栈开发 三端⼀一体化编程的新⽅方式 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 陈新新 阿⾥里里巴巴 - 闲⻥鱼 • 腾讯、YY、阿⾥里里巴巴 • 20年年程序员 • 多端⼀一体化、⾳音视频通信、P2P⽹网络、区块链 • 多语⾔言 C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理 外接纹理理播放视频 图⽚片缓存优化 ⽆无反射JSON序列列化 私有PUB库、阿⾥里里⽣生态适配 闲⻥鱼 - 让你的闲置游起来 Flutter和Native性能简单⽐比较 Flutter Native 45 FPS 30 FPS 113.2% 数据模型 Client & Server 前后端⼀一致 视图 Fixed Widget 三端⼀一体化新开发模式 视图 Dynamic Widget 业务逻辑 Client | Server 分拆实现 闲⻥鱼 - 让你的闲置游起来 三端⼀一体化的协议定义 客户端实现 ⽣生成协议 Dart Server 填充协议 写好客户端逻辑后，直接从代码⽣生成协议