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

工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 先看一下全景 开发 工具链 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 施 性能&稳定性平台 FPS 页面打开速度 crash Bug管理 Bug管理 包大小分析 高可用 获取日志 远程调试 安全 接口防刷 插件平台 矩阵产品 贴吧 贴吧极速版 创新产品 公司其他产 品 业务模块 一键签到 吧资料 粉丝列表 … 系统层 Android iOS FlutterSDK 基础 框架 模块通信 状态管理 公共结构 通用UI 混合栈 网络 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 注册分发 业务框架小结 场 景 扩 展 收 益 一键生成多版本 多团队并行开发 加快问题定位 Hook跳转热修复 少选模块编译快 跨H5可行性 启动初始化 业务/服务/子系统 Tab容器化 生命周期 构建系统 tieba_redux Flutter Android插件之旅 接下来…… Flutter Android插件 n 插件设计与目标 n 问题与挑战 插件设计与目标 公共基础库

Service Mesh 服务集合 缓存 ⽇日志模块 开关 监控数据采集 5 : 1 原则 胶⽔水层多变 领域层少改 接⼝口服务 - 业务逻辑 闲⻥鱼 - 让你的闲置游起来 RT 单机QPS 系统资源 运⾏行行时⻓长 Dart Server ⽣生产环境情况 达到⽣生产稳定性，性能满⾜足“胶⽔水层”需求 闲⻥鱼详情⻚页所有流量量由Dart Server服务 闲⻥鱼 - 让你的闲置游起来 部署时间：20分钟 -> 3秒 本地测试远程服务 ⽆无冲突调试 效率提⾼高 闲⻥鱼 - 让你的闲置游起来 异构系统的服务调⽤用 HTTP Restful Service Mesh C++ Extension ⼏几种途径 Java -> Dart ⼯工具：⽣生成接⼝口和数据模型的Dart代码 简化服务调⽤用⽅方式 XML JAVA 反射 Dart代码 服务注册及通信 索引 闲⻥鱼 - 让你的闲置游起来 ⽆无Dart基础 服务端开发同学 有Flutter基础 客户端开发同学 通过⽂文档和⼯工具，写Hello World基本不不需要指导 单线程异步开发模型 理理解后端服务需要过程 ⼀一⼩小时上⼿手，半天上线⼀一个业务新接⼝口 学习成本低 学习成本 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 数据模型 Client & Server

天然的MVC（HTML+CSS+JavaScript） 当前的Web开发 ● Web 开发越来越复杂：项目大，团队成员多 ● 前端功能越来越多：CS→BS→CS ● 大型应用维护和协作难 ● 性能弱，启动速度慢 ● 工具支持弱 ● 仔细选择技术方案和开发规范 Web 开发中还有许多问题有待解决... 未来的方向？ Chrome OS 和 Chromebook Chrome OS 基于浏览器和云端环境的 OS JavaScript，打通所有 Google 产品和服务，自动化处理业务。 云服务 X-aaS 或 Web API ，直接使用服务，这些都非常 方便，但实现被隐藏了。 基础平台商提供现成的服务，开发者只需要懂软 件、懂系统，但不需要懂硬件了。 安全 HTTPS 无处不在 Sandbox 模型 技术发展方向 ● 演进中的各种新技术标准 ● 编程语言的多元化 Web 是平台，能在上面做什么归根结底是技术标 准和浏览器支持说了算。 简单、有生产力 ● 适合从小型到大型的项目 ● 高性能、快速启动 ● 适合各种设备的Web环境 Dart 语言的目标 Dart 语言的组成 ● 语言规范 ● Dart VM ● 丰富的类库 ● 工具： ○ Dartium：Chrome + Dart VM ○ 包管理 Pub ○ Dart Editor ● Dart → JavaScript 编译器：dart2js Dart 两种运行模式

历时十年成为Web 实时通讯标准 • RTMP 直播协议的低延迟替代方案 WebRTC 可以做什么 02. 副标题 • 用实现网页音/视频通话 • 低延迟直播系统(在线课堂) • 多人视频会议系统 • 高质量SIP/VOIP系统 • 视频监控系统 • 机器学习，视觉计算等 如何使用它 01. 副标题 • 在Web中使用JS API • 基于google libwebrtc实现原生客户端开发 Communication. https://github.com/pion Pion 介子 纯Go语言的WebRTC 全家桶 作者: Sean DuBois ION 离子之光 分布式实时通讯系统 https://github.com/pion/ion • 基于pion/webrtc 开发 pion/ion-sfu • 分布式架构 • 基于grpc over NATS mq • 使用redis 转换RTC流成直播流推送到CDN ION客户端支持 • Ion-sdk-js 网页端SDK • Ion-sdk-flutter 全平台flutter SDK • Ion-sdk-go 用于开发推流工具，压力测试，avp 节点开发 • Ion-app-web • Ion-app-flutter ion-app-web • 基于 React.js + ant-design • 多人视频 •

Web 之外的另一个真跨端渲染技术 ? ? ? 通过 platform channels 调用平台能力 支持 Hot Reload 不支持 Flex Layout 布局 比肩原生的性能 调试工具完善 脱离前端 JS 生态 不支持动态下发 Bundle 不支持类 JSX，可读性差 前端视角里的 Flutter 使用 Flutter 的刚性诉求 具有动态性 可连接前端生态 Dart

2018.4 2018.11 2019.2 Flutter 独立 APP 保密 & 2019.5 Flutter实现的页面 动态页 三级页面 关注页 首页 房间 核心页面 系统框架 MessageChannel Native Dart Channel Report Log … DartChannel DartReport RichText … Refresh NetImage uNOW直播与Flutter uNOW直播中Flutter的开发模式 uNOW直播中Flutter的工程实践 u技术思考 动态更新 •Android原生支持 •iOS Release版本不支持 •iOS系统无法在运行时将内存页 标记为可执行 Android构建产出 iOS构建产出 Dart Project Android终端 iOS终端 应用更新 动态更新 •下发JIT编译产出 •牺牲性能

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