Web的未来 新技术和新语言带来的改变 hanguokai@gmail.com 韩国恺 @hanguokai 韩国恺 开发者9Y+ 技术爱好者 学习 上网 动漫、电影 健身 Google fans 与 Dart 的缘分 1. Web的演化 2. 语言篇 a. 语言的发展 b. Dart 介绍 3. 技术篇 a. Web Components b. Polymer 前端功能越来越多：CS→BS→CS ● 大型应用维护和协作难 ● 性能弱，启动速度慢 ● 工具支持弱 ● 仔细选择技术方案和开发规范 Web 开发中还有许多问题有待解决... 未来的方向？ Chrome OS 和 Chromebook Chrome OS 基于浏览器和云端环境的 OS Chromebook 搭载 Chrome OS 的笔记本 今天的讲义也是用 Google doc 做的 平台访问：USB、蓝牙、Socket、Native Client 离线应用 利用离线技术将资源存在本地。如 Google Drive，飞机上也可用继续查看和编辑今天的这个 讲义。 云+端——同步无处不在 我的设备：3个笔记本、1个台式机、iPhone 和 Android平板 云+端——同步无处不在 Google Apps Script GAS 运行在云端的 JavaScript，打通所有 Google

基于go和flutter的实时通信/视频直播解决方案 段维伟 湖北捷智云技术有限公司 创始人 目 录 背景 01 技术简介 02 客户端 03 服务端 04 开源社区 05 Q&A 06 背景 第一部分 即将讲述的内容 • WebRTC 实时通讯 • Flutter 跨平台UI 开发框架 • 基于Flutter UI 框架的WebRTC 插件 flutter-webrtc + Obj-C/Swift • Android 使用libwebrtc.aar + java • Windows 使用libwebrtc.dll + C++ 实际开发中会遇到的困难 • 下载和编译Google WebRTC框架（防火墙，编译环境） • 原生SDK开发(每平台人力投入) • UI 的一致性，更新迭代（类似SDK需按平台维护） • 性能问题(全部使用html5) 客户端是否有 com/leewardbound • Orlando Co https://github.com/OrlandoCo • CloudWebRTC https://github.com/cloudwebrtc pion 和 ion 社区的所有代码均为MIT授权， 相关github 地址如下: https://github.com/pion/ion https://github.com/flutter-webrtc https://github

两端⼀一致的开发⽅方式，MD和iOS⻛风格 闲⻥鱼 - 让你的闲置游起来 Flutter 快速开发 - Hot Reload 闲⻥鱼 - 让你的闲置游起来 Flutter在闲⻥鱼应⽤用过程 基础调研 Google⽀支持 混合开发 详情⻚页 发布⻚页 更更多业务 内部版本 Alpha Beta Preview1 Preview2 闲⻥鱼 - 让你的闲置游起来 接近Native效果的UI和交互体验 Native组件 Native和Flutter混合开发 混合栈 闲⻥鱼 - 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理 外接纹理理播放视频 图⽚片缓存优化 ⽆无反射JSON序列列化 私有PUB库、阿⾥里里⽣生态适配 闲⻥鱼 - 让你的闲置游起来 Flutter和Native性能简单⽐比较 统计基准⽤用户数：千万级 1% < 0.01% 闲⻥鱼 - 让你的闲置游起来 Flutter两端统⼀一开发，探索进⼀一步提⾼高效率的⽅方法…… 接⼝口协议定义 服务接⼝口实现 ⼀一个⼈人开发三端？ 闲⻥鱼 - 让你的闲置游起来 不不⼀一样的开发和思维⽅方式 部署运维让⼈人觉得很复杂 会增加很多⼯工作量量 客户端写后端服务的疑虑 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来

Model Presenter View 消息中心 注册 监听 发消息 网络(长短链接) 自定义 拦截/整合 模块间 模块内 现有业务框架的问题与挑战 数据和UI一致性较差 数据本身的变化可控性较差 模块内和模块间代码风格不一致 响应式 tieba_redux 现代 redux Redux的优势与问题 组织代码 n 组件:函数式，class n 数据:props，state 松耦合调用方式 n 生态成熟，适用复杂场景 n 带有编码规范的框架 n 满足拦截类开发需求 Ø 网络访问添加通用参数 Ø 打印action序列和State，加速问题定位 Ø 改变跳转，热修复 Redux 模块化 tieba_redux n 概念上的『和』与『分』 n 分之后的代码组织与运行 n 细粒度模块化的编码需求 tieba_redux GlobalRedux Tasks Actions Rule 多个 全局 静态 拦截页面跳转； 添加通用参数；打日志 SHOW CODE Main函数调用注册函数 根据pubspec文件修改 触发pubget动态生成 注册和分发执行 Register (类型和优先级) Global Store NextDisp Rule1-N NextDisp Task1-N NextDisp Listener1-N 模块 Store NextDisp

我的Github： https://github.com/koudle 我的掘⾦金金主⻚页： https://juejin.im/user/5b5587a05188251abb46b797 作者 欢迎关注和Star 谢谢！ 移动端跨平台开发的各种⽅方案 Guangzhou ⽅方案1： H5 WebView Hybrid WebView+Native React Native JavaScript+Native c#：同时⽀支持JIT和AOT Xamarin：虽然性能好了了⼀一些，但是跨 平台的UI⽀支持不不好，⽆无法实现复杂的 UI布局。 编译流/虚拟机流 ⽅方案3 ⾃自⼰己负责渲染 Unity：虽然渲染性能很强⼤大，但渲染 机制为实时刷新，耗电量量太⼤大，在 APP⾥里里都是局部刷新；⽽而且安装包也 很⼤大 游戏引擎 最终⽅方案 渲染：⾃自⼰己负责渲染 dart：同时⽀支持JIT和AOT，性能⾼高 我的Github： https://github.com/koudle 我的掘⾦金金主⻚页： https://juejin.im/user/5b5587a05188251abb46b797 作者 欢迎关注和Star 谢谢！ Proprietary + Confidential THANKS Guangzhou ⼩小德 @Tencent

RN、Weex 自绘UI+原生 调用系统API渲染 好 高 默认不支持 Flutter Flutter简介 • Google 开源的 UI 工具包 • 非常精美丰富的组件库 • 支持移动、Web、桌面和嵌入式平台 • UI统一、高性能 Flutter简介 Dart语言简介 - 变量声明 Dart语言简介 - 函数声明 Dart语言简介 - 函数声明 Dart语言简介 - 类声明 上手试试？ StatelessWidget & StatefulWidget • Text • Button • Image • Switch & Checkbox • TextField 布局组件 • 线性布局（Row和Column） • 弹性布局（Flex） • 流式布局（Wrap、Flow） • 层叠布局（Stack） • 对齐与相对定位（Align） 容器组件 • 填充（Padding） • 尺寸

Flutter • Google • Dart -> iOS + Android + Web Flutter简介 1 快速开发 富有表现力和灵活的UI 原生性能 初识Flutter Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面 Flutter简介 1 原生性能 生态与模式 C/C++ 引擎操作OpenGL、GPU直接渲染 平台一致性