让你的闲置游起来 Flutter & Dart 全栈开发 三端⼀一体化编程的新⽅方式 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 陈新新 阿⾥里里巴巴 - 闲⻥鱼 • 腾讯、YY、阿⾥里里巴巴 • 20年年程序员 • 多端⼀一体化、⾳音视频通信、P2P⽹网络、区块链 • 多语⾔言 C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 领域服务 - HSF Provider 接⼊入⽹网关 负载均衡 商品 缓存 Switch 开关 Eagle-eye 统计告警 搜索 消息 ⻥鱼塘 配置 ⽤用户 MDB LDB Dart Server HSF HTTP Server Tair Switch Eagle-eye Hot Reload Zone Isolate Router C++扩展 或 Service 胶⽔水层多变 领域层少改 接⼝口服务 - 业务逻辑 闲⻥鱼 - 让你的闲置游起来 RT 单机QPS 系统资源 运⾏行行时⻓长 Dart Server ⽣生产环境情况 达到⽣生产稳定性，性能满⾜足“胶⽔水层”需求 闲⻥鱼详情⻚页所有流量量由Dart Server服务 闲⻥鱼 - 让你的闲置游起来 能否做到像写客户端⼀一样写服务端？ 怎么快速找到后端服务，服务简单调⽤用？ 尽量量少考虑运维的问题。

hanguokai@gmail.com 韩国恺 @hanguokai 韩国恺 开发者9Y+ 技术爱好者 学习 上网 动漫、电影 健身 Google fans 与 Dart 的缘分 1. Web的演化 2. 语言篇 a. 语言的发展 b. Dart 介绍 3. 技术篇 a. Web Components b. Polymer 库 大纲 Web应用的优点 ● 无需安装 ● 增量式开发 ● 能力的扩展来自新技术：如 WebRTC 和 Web Components。 2. 开发方式会有不同流派，但基础技术的支撑很 重要，如编程语言。 1. Web的演化 2. 语言篇 a. 语言的发展 b. Dart 介绍 3. 技术篇（Web Components） 大纲 Web语言的发展 1995~2013 JavaScript 1995，18年前 Brendan Eich JavaScript bar() { if (!true) { var foo = 'inside'; } console.log(foo); } in JavaScript 输出： undefined in Dart 输出： 'top-level' CoffeeScript 2009，4年前 Jeremy Ashkenas CoffeeScript 受 Ruby 和 Python 影响较多

•Top3热门个人直播App •Tens of millions MAU 关于Flutter •Google推出的跨平台开发框架 •创建高性能，高稳定性，高帧率的 Android/iOS应用 •使用Dart语言开发 Flutter特性 跨平台 高性能 热重载 提升研发效 率 Flutter的应用 框架对比 Native 性 能 跨平台 Flutter RN web Hybrid •IDE直接集成Flutter产出模式 •快速方便集成 无法同步Dart代码 无法启动调试 Android IOS 工程化开发模式Ⅱ • Flutter工程集成NOW工程模式 • 修改NOW工程结构 • 将Dart代码与Native代码一起存放GIT • 修改编译脚本 • 支持断点调试 无法跨终端同步及维护Dart代码 工程化开发模式Ⅲ • Gradle/CocoaPods依赖管理 Gradle/CocoaPods依赖管理 • 跨终端团队协作远程构建产出模式 • Dart代码独立GIT • 远程构建平台配置终端推送地址 • 构建完成自动推送更新 QCI 远程构建平台 Android Git iOS Git 工程化开发模式Ⅲ 1. 拉取Dart分支 2. 拉取Android /iOS分支 3. QCI设置分支及对应版本号 4. 开发提交代码 5. 启动构建同步至分支 开发步骤： 工程化开发模式总结

Web页面 2017 React Native 201 5 Write Once, Run Anywhere WeeX 201 6 Flutter • Google • Dart -> iOS + Android + Web Flutter简介 1 快速开发 富有表现力和灵活的UI 原生性能 初识Flutter Flutter是谷歌的移动UI框架，可以快速在iOS FlutterActivity FlutterController FlutterActivity GPU、IO、UI Dart VM 实践框架及页面栈管理 2 混合栈管理 - 方案 Native FlutterController GPU、IO、UI Dart VM Native页 Flutter页 Flutter页 Flutter页 实践框架及页面栈管理 2 混合栈管理 For Web 4 Flutter For Web 4 发展 Flutter在今年GDD大会正式发布stable 1.9，同时宣布Flutter For Web仓库正式合入Flutter主仓库 Dart编译JavaScript 移除平台模块 匹配Web特性 Flutter For Web 4 发展 Flutter For Web 4 项目改造 Alert Toast Dialog Refresh

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 不支持动态下发 Bundle 不支持类 JSX，可读性差 前端视角里的 Flutter 使用 Flutter 的刚性诉求 具有动态性 可连接前端生态 Dart 生产模式 开发 Develop 部署 Deploy JIT Dart VM Dart AOT Runtime AOT Any application that can be written in JavaScript, will eventually be written in JavaScript. Jeff Atwood Co-founder of StackOverflow “ Flutter 增长迅速，但 Dart 关注平平 Kraken 关于 Flutter for Web 并不是完全鸡肋，适合其只适合非 C 端业务场景 中国可能是全球最关注 Flutter 的国家 我们的目标：能直接运行吗？

渲染：⾃自⼰己负责渲染 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 12 JIT：动态编译，Hot Reload AOT：静态编译,Native code 强类型，可以类型推断 提升开发效率！ 经过简单统计，写同⼀一个功能， 使⽤用Dart，可以减少50%的代码量量 强⼤大的异步编程能⼒力力 全栈语⾔言 UI Widget 所有UI元素都是widget组件 Stateless Widget Stateful Widget 状态 功能 Platform Channel Java Native Flutter Engine Dart 真的要学Flutter了了吗？还有没有坑？ Guangzhou 包太⼤大？ Android iOS Debug 22.28M 31M Release 3.46M 13.8M Flutter SDK Dart代码的构建产物 Native 代码 资源⽂文件 热更更新？ JIT 替换产物

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

性能问题(全部使用html5) 客户端是否有 更好的选择？ 为何选择 Flutter • 同样是 Google 发起的跨全平台高性能UI框架 • 基于 Skia 2D 渲染引擎 • 使用类似JS/TS的Dart 语言开发 • 支持代码编辑后热重载, Flutter 支持那些平台 iOS/Android/Web/Windows/Linux/macOS/Embedded 使用flutter 开发app意味着什么？