延伸到 Server 端 近两年：AMD、CommonJS 模块化标准 当前：正在制定 ECMAScript 6 标准 JavaScript 并不完美 JavaScript 并不完美 ● 程序结构不明显 ● 并非为性能设计的语言 ● 缺少一些基础功能的支持 ● 缺少统一的基础特性，共享复用难 变量提升（hoisting） var foo = 'top-level'; function 3. 执行效率高 4. 有机会成为 Android 内置的虚拟机，用来写手机 App 5. 可以用来写服务器后台程序 6. 可以写 Web 前端程序，在浏览器内运行 @蔡学镛 ● 结构化并且灵活的Web语言 ● 简单、有生产力 ● 适合从小型到大型的项目 ● 高性能、快速启动 ● 适合各种设备的Web环境 Dart 语言的目标 Dart 语言的组成 ● 语言规范 ● map tree shaking minification Dart2js Tree-shaking ● 语言的设计影响性能 ● 使用snapshot启动速度快10倍 ● 运行时不能改变对象结构有利于VM优化 ● Dart VM 性能已超越 JavaScript V8 ● …… 高性能 性能测试 http://www.dartlang.org/performance/ Dart

矩阵产品 贴吧 贴吧极速版 创新产品 公司其他产 品 业务模块 一键签到 吧资料 粉丝列表 … 系统层 Android iOS FlutterSDK 基础 框架 模块通信 状态管理 公共结构 通用UI 混合栈 网络 图片 视频 日志 全局数 据同步 插件 FlutterWeb 目录 n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 现有业务框架的问题与挑战 数据和UI一致性较差 数据本身的变化可控性较差 模块内和模块间代码风格不一致 响应式 tieba_redux 现代 redux Redux的优势与问题 组织代码 n 组件:函数式，class n 数据:props，state n 纯函数 组织思想 n State变化可预期 n 面向action序列编程 n 松耦合调用方式 n 生态成熟，适用复杂场景 n 带有编码规范的框架

非常精美丰富的组件库 • 支持移动、Web、桌面和嵌入式平台 • UI统一、高性能 Flutter简介 Dart语言简介 - 变量声明 Dart语言简介 - 函数声明 Dart语言简介 - 函数声明 Dart语言简介 - 类声明 上手试试？ Flutter基础 • 组件 • 路由 • 资源管理 • 包管理 Flutter组件 • 基础组件 • 布局组件 • 容器组件 • • 功能类组件 基础组件 • StatelessWidget & StatefulWidget • Text • Button • Image • Switch & Checkbox • TextField 布局组件 • 线性布局（Row和Column） • 弹性布局（Flex） • 流式布局（Wrap、Flow） • 层叠布局（Stack） • 对齐与相对定位（Align） 对齐与相对定位（Align） 容器组件 • 填充（Padding） • 尺寸限制（ConstrainedBox、SizedBox、） • 移除子组件限制（UnconstrainedBox） • 装饰容器（DecoratedBox） • 变换（Transform） • 容器（Container） • 框架（Scaffold、TabBar、BottomNavigationBar） • 剪裁（Clip） 容器组件

•IDE直接集成Flutter产出模式 •快速方便集成 无法同步Dart代码 无法启动调试 Android IOS 工程化开发模式Ⅱ • Flutter工程集成NOW工程模式 • 修改NOW工程结构 • 将Dart代码与Native代码一起存放GIT • 修改编译脚本 • 支持断点调试 无法跨终端同步及维护Dart代码 工程化开发模式Ⅲ • Gradle/CocoaPods依赖管理 开发框架 ReBLoC框架： 控件使用InheritedWidget包装 1.减少树状结构的节点刷新。 2.避免setState泛滥 setState 通知 刷新界面 State need update 开发框架 ReBLoC框架： 控件使用InheritedWidget包装 1.减少树状结构的节点刷新。 2.避免setState泛滥 setState 通知 刷新界面 State

强类型，可以类型推断 提升开发效率！ 经过简单统计，写同⼀一个功能， 使⽤用Dart，可以减少50%的代码量量 强⼤大的异步编程能⼒力力 全栈语⾔言 UI Widget 所有UI元素都是widget组件 Stateless Widget Stateful Widget 状态 功能 Visual Layout Painting Intera ction Platform 代码写UI 组合Widget

Alpha Beta Preview1 Preview2 闲⻥鱼 - 让你的闲置游起来 接近Native效果的UI和交互体验 多图列列表 评论盖楼 图⽂文 闲⻥鱼 - 让你的闲置游起来 Native组件 Native和Flutter混合开发 混合栈 闲⻥鱼 - 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理