方便，但实现被隐藏了。 基础平台商提供现成的服务，开发者只需要懂软 件、懂系统，但不需要懂硬件了。 安全 HTTPS 无处不在 Sandbox 模型 技术发展方向 ● 演进中的各种新技术标准 ● 编程语言的多元化 Web 是平台，能在上面做什么归根结底是技术标 准和浏览器支持说了算。 技术可以被 hack 的方式玩出新花样，但能力本 身并没有改变。 技术发展方向 1. 能力的扩展来自新技术：如 WebRTC Netscape 1998 年成为 ECMA 标准 2006 年 jQuery 发布 2009 年 Node.js：JavaScript 延伸到 Server 端 近两年：AMD、CommonJS 模块化标准 当前：正在制定 ECMAScript 6 标准 JavaScript 并不完美 JavaScript 并不完美 ● 程序结构不明显 ● 并非为性能设计的语言 ● 缺少一些基础功能的支持 3. 执行效率高 4. 有机会成为 Android 内置的虚拟机，用来写手机 App 5. 可以用来写服务器后台程序 6. 可以写 Web 前端程序，在浏览器内运行 @蔡学镛 ● 结构化并且灵活的Web语言 ● 简单、有生产力 ● 适合从小型到大型的项目 ● 高性能、快速启动 ● 适合各种设备的Web环境 Dart 语言的目标 Dart 语言的组成 ● 语言规范 ● Dart

个人动态 商业化 n 品牌大使 n 直播 n Banner n 原生广告 研发效率 用户体验 最快触达用户 Flutter的优势 跨平台开发 高效的开发体验 性能接近Native 1 2 3 Ø N倍平台产出 Ø 多端逻辑一致 效率 质量 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 总结 先看一下全景 开发 工具链 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 施 性能&稳定性平台 FPS 页面打开速度 crash Bug管理 包大小分析 高可用 获取日志 远程调试 安全 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 第一步 当 我 跨 出 第 一 步 工程体系接入 n Flutter接入方式 n FlutterBox Flutter接入方式 源码 双端工程 Flutter环境 aar

闲⻥鱼 - 让你的闲置游起来 Flutter & Dart 全栈开发 三端⼀一体化编程的新⽅方式 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 陈新新 阿⾥里里巴巴 - 闲⻥鱼 • 腾讯、YY、阿⾥里里巴巴 • 20年年程序员 • 多端⼀一体化、⾳音视频通信、P2P⽹网络、区块链 • 多语⾔言 C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 Flutter 快速开发 - Hot Reload 闲⻥鱼 - 让你的闲置游起来 Flutter在闲⻥鱼应⽤用过程 基础调研 Google⽀支持 混合开发 详情⻚页 发布⻚页 更更多业务 内部版本 Alpha Beta Preview1 Preview2 闲⻥鱼 - 让你的闲置游起来 接近Native效果的UI和交互体验 多图列列表 评论盖楼 图⽂文 闲⻥鱼 - 让你的闲置游起来 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理 外接纹理理播放视频 图⽚片缓存优化 ⽆无反射JSON序列列化 私有PUB库、阿⾥里里⽣生态适配 闲⻥鱼 - 让你的闲置游起来 Flutter和Native性能简单⽐比较 Flutter Native 45 FPS 30 FPS 113.2%

淘系前端团队 天猫未来店 GCanvas C++ Engine GPU OpenGL ES / Vulkan Kreken 原型技术原理 GCanvas JS API Kraken 原型版本优劣 研发效率低 适用场景有限 简单直接 嵌入式主板 GPU Skia OpenGL ES / Vulkan Layout XML Layer Tree RenderObject Tree 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 云 + 端一体化是渲染技术的新趋势 “

构建完成自动推送更新 QCI 远程构建平台 Android Git iOS Git 工程化开发模式Ⅲ 1. 拉取Dart分支 2. 拉取Android /iOS分支 3. QCI设置分支及对应版本号 4. 开发提交代码 5. 启动构建同步至分支 开发步骤： 工程化开发模式总结 远程构建产出模式 Flutter工程集成IDE工程模式 IDE工程集成Flutter产出模式 适合个人独立开发 方便团队内部协作开发 方便开发调试 适合跨团队协作开发 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 版本迭代 Flutter NOW Version1.0 动态搜索页 Flutter NOW Version2.0 首页关注tab Flutter NOW Version3.0 房间页 2018 分享目录 uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 动态更新 •Android原生支持 •iOS Release版本不支持 •iOS系统无法在运行时将内存页 标记为可执行 Android构建产出 iOS构建产出 Dart Project Android终端 iOS终端 应用更新 动态更新 •下发JIT编译产出

Navigator MJFlutter … 异常处理 上线 Http Dart Bridge CSSender Flutter For Web Common CGI Storage … 自动化脚本 部署系统 发布 … Serve 上线 降级 Flutter For Web 4 降级 Flutter Engine Crash Flutter与Native交互异常 Flutter 降级 热更新 反馈 … 异常处理 上线 Http Dart Bridge CSSender Flutter For Web Common CGI Storage … 自动化脚本 部署系统 发布 … Serve 上线 Flutter For Web 4 动态更新 App init Dynamic Patching 页面标记 Flutter Flutter

H5+原生（Cordova、微信小程序） • JavaScript开发+原生渲染 （React Native、Weex、快应用） • 自绘UI+原生(Flutter) 移动跨平台方案 技术类型 UI渲染方式 性能 开发效率 动态化 框架代表 H5+原生 WebView渲染 一般 高 支持 Cordova、Ionic JavaScript+原生渲染 原生控件渲染 好 中 支持 RN、Weex 自绘UI+原生 调用系统API渲染