ArchSummit北京2016 《乱花渐欲迷人眼：移动技术架构的选择》 杨武
2020-03-01 71浏览
- 1.乱花渐欲迷⼈人眼 - 移动技术架构的选择 杨武 上海海改变科技有限公司总经理理
- 2.移动技术架构的选择 个⼈人介绍 杨武(品雪) ■ 2006 开始关注移动端开发 (WinCE/Mobile) ■ 2007 iPhone 1.0, iCosta ■ 2008 Android 1.5, iCosta ■ 2010 RockPlayer (Android) ■ 2011 上海海改变科技有限公司 ■ RockPlayer (iOS/Android) ■ AirSlides (iOS) ■ keyOne (iOS/Android) 杨武
- 3.移动技术架构的选择 ⼤大 纲 1. ⼀一个真实的故事 2. 开始精益创业 3. 选⽤用什什么技术来做呢？ 4. 有⽤用户反馈了了 5. 开始⾯面向融资编程 杨武
- 4.移动技术架构的选择 ⼀一个真实的故事 有个朋友要创业了了 ■ ⾮非技术背景的创始⼈人 ■ 顺利利的天使轮融资 ■ Mobile 优先的策略略 ✓iOS/Android 都要有 杨武
- 5.移动技术架构的选择 ⼀一个真实在故事 我的第⼀一个建议 ■ 直接做微信公众号 ■ 巨⼤大的安装基数 ■ 传播⽅方便便 ■ ⾃自动跨平台 杨武
- 6.移动技术架构的选择 ⼀一个真实在故事 我的第⼀一个建议 ■ 直接做微信公众号 ■ 巨⼤大的安装基数 ■ 传播⽅方便便 ■ ⾃自动跨平台 还是希望有⼀一个 App 杨武
- 7.移动技术架构的选择 ⼀一个真实在故事 听说 HTML5 正热 ■ ⼀一次开发，到处运⾏行行 ■ 只需要⼀一套 HTML/JavaScript 的⼈人⻢马 ■ 可以打包成 App 杨武
- 8.移动技术架构的选择 ⼀一个真实在故事 听说 HTML5 正热 ✓ 快速组建技术团队 ■ ⼀一次开发，到处运⾏行行 ✓ 紧锣密⿎鼓的开发 ■ 只需要⼀一套 HTML/JavaScript 的⼈人⻢马 ✓ 顺利利上线 ■ 可以打包成 App ✓ 业务成⻓长 杨武
- 9.移动技术架构的选择 ⼀一个真实在故事 听说 HTML5 正热 ✓ 快速组建技术团队 ■ ⼀一次开发，到处运⾏行行 ✓ 紧锣密⿎鼓的开发 ■ 只需要⼀一套 HTML/JavaScript 的⼈人⻢马 ✓ 顺利利上线 ■ 可以打包成 App ✓ 业务成⻓长 ✎ 出问题了了…… 杨武
- 10.移动技术架构的选择 ⼀一个真实在故事 果断换原⽣生技术 ■ 给⻜飞驰的汽⻋车换轮⼦子 (违法切勿模仿)http://www.arabnews.com/saudi-arabia/news/857611杨武
- 11.移动技术架构的选择 ⼀一个真实在故事 果断换原⽣生技术 ■ 给⻜飞驰的汽⻋车换轮⼦子 (违法切勿模仿)http://www.arabnews.com/saudi-arabia/news/857611✓ 快速组建技术团队 ✓ 紧锣密⿎鼓的开发 ✓ 分析 ✓ 设计 ✓ 编码，测试 杨武
- 12.移动技术架构的选择 杨武 ⼀一个真实在故事 果断换原⽣生技术 ■ 给⻜飞驰的汽⻋车换轮⼦子 ✓ 快速组建技术团队 ✓ 紧锣密⿎鼓的开发 (违法切勿模仿)http://www.arabnews.com/saudi-arabia/news/857611✓ 分析 ✓ 设计 ✓ 编码，测试 ✓ ⼀一次⼜又⼀一次的延期 ✓ 没⼈人说得清何时候能发布
- 13.移动技术架构的选择 ⼀一个真实在故事 改进研发⼯工作⽅方法 ■ 挖个⾼高⼿手带队 ■ 启⽤用任务看板 ■ 任务分解到天 积压任务 设计中 设计完成 可以开发了了 开发中 开发完成 可以测试了了 测试中 杨武
- 14.移动技术架构的选择 ⼀一个真实在故事 改进研发⼯工作⽅方法 ■ 挖个⾼高⼿手带队 ■ 启⽤用任务看板 ■ 任务分解到天 积压任务 设计中 设计完成 可以开发了了 开发中 开发完成 可以测试了了 测试中 ✓ 故事还在继续 ✓ 故事还在重复 杨武
- 15.移动技术架构的选择 这⾥里里边有多少是技术架构选择的锅？ 杨武
- 16.移动技术架构的选择 这⾥里里边有多少是技术架构选择的锅？ 任何主流技术⾜足以启动业务 杨武
- 17.移动技术架构的选择 这⾥里里边有多少是技术架构选择的锅？ 任何主流技术⾜足以启动业务 团队Hold不不住，什什么技术都有坑 杨武
- 18.移动技术架构的选择 这⾥里里边有多少是技术架构选择的锅？ 任何主流技术⾜足以启动业务 团队Hold不不住，什什么技术都有坑 没有良好的⼯工程⽅方法，拼的是⼈人⽜牛运⽓气好 杨武
- 19.移动技术架构的选择 如何选择技术框架 避开常⻅见陷阱 ■ 迷信跨平台，追求⼀一劳永逸 ■ 追求完美 ■ 不不⾃自知团队能⼒力力 ■ 考虑沉没成本 学 练 避免盲⽬目决策 ■ 了了解⾃自身特点 ■ 了了解同业技术栈 ■ 理理解备选技术⽅方案 ⽤用 杨武
- 20.移动技术架构的选择 如何选择技术框架 避开常⻅见陷阱 ■ 迷信跨平台，追求⼀一劳永逸 ■ 追求完美 ■ 不不⾃自知团队能⼒力力 ■ 考虑沉没成本 学 练 避免盲⽬目决策 ■ 了了解⾃自身特点 ■ 了了解同业技术栈 ■ 理理解备选技术⽅方案 ⽤用 谨慎对待简历驱动的开发 杨武
- 21.移动技术架构的选择 ⼀一个价值百万的点⼦子 ⼤大学课堂点名应⽤用 从 10% 市场占有率规模计， 系统需要承载15万教师使⽤用，每天处理理250万*2次的点名记录。 杨武
- 22.移动技术架构的选择 开发MVP验证市场 讲个故事(User Story) 杨武
- 23.移动技术架构的选择 开发MVP验证市场 讲个故事(User Story) 杨武
- 24.移动技术架构的选择 开发MVP验证市场 讲个故事(User Story) 杨武
- 25.移动技术架构的选择 开发MVP验证市场 讲个故事(User Story) 分析设计 杨武
- 26.移动技术架构的选择 开发MVP验证市场 讲个故事(User Story) 分析设计 张三 张三 杨武
- 27.移动技术架构的选择 开发MVP验证市场 讲个故事(User Story) 分析设计 张三 ……好了了，要动⼿手写移动客户端了了 张三 杨武
- 28.移动技术架构的选择 选⽤用什什么技术来做呢？ 杨武
- 29.移动技术架构的选择 杨武 移动端技术选型 项⽬目特点 同业技术栈 ■ 课堂使⽤用要避免⼲干扰 ■ stackshare.io ■ 辅助⼯工具要尽量量少占⽤用时间 ■ 课程表A：Web+Android+iOS 可选⽅方案 Swift/Java ๏ ๏ ๏ ๏ ๏ ๏ JavaScript e tiv eb W eb W ive ⽤用 应 ⽣生 原 a tN ac id br Re Hy ss ive ns re o sp og Pr Re ⽤用 应 信 微 Ap p
- 30.移动技术架构的选择 微信应⽤用 形态 ■ 订阅号：折叠，⽇日1次；媒体 ■ 服务号：顶层，⽉月4次；客服、售后 ■ 企业号：顶层，可聚合；办公 ■ ⼩小应⽤用 ：强化了了 UI 表现与交互能⼒力力 特点 ■ 传播优势 ■ 浏览器器+微信双重限制 ■ ⼊入⼝口深 杨武
- 31.移动技术架构的选择 微信应⽤用 形态 ■ 订阅号：折叠，⽇日1次；媒体 ■ 服务号：顶层，⽉月4次；客服、售后 ■ 企业号：顶层，可聚合；办公 ■ ⼩小应⽤用 ：强化了了 UI 表现与交互能⼒力力 特点 ■ 传播优势 ■ 浏览器器+微信双重限制 ■ ⼊入⼝口深 杨武
- 32.移动技术架构的选择 杨武 微信应⽤用 形态 ■ 订阅号：折叠，⽇日1次；媒体 ■ 服务号：顶层，⽉月4次；客服、售后 ■ 企业号：顶层，可聚合；办公 ■ ⼩小应⽤用 ：强化了了 UI 表现与交互能⼒力力 特点 ■ 传播优势 ■ 浏览器器+微信双重限制 ■ ⼊入⼝口深 当我推荐做微信时， 其实是在说不不要做开发
- 33.移动技术架构的选择 Responsive Web 框架 ■http://getbootstrap.com/■https://html5boilerplate.com功能实现 ■ UI 库 ■ 程序架构 特点 ■ 省事⼉儿，⽹网站味明显 ■ 重信息，轻度交互 ■ 卡⽚片式界⾯面最省⼼心 杨武
- 34.移动技术架构的选择 Responsive Web 框架 ■http://getbootstrap.com/■https://html5boilerplate.com功能实现 ■ UI 库 ■ 程序架构 特点 ■ 省事⼉儿，⽹网站味明显 ■ 重信息，轻度交互 ■ 卡⽚片式界⾯面最省⼼心 杨武
- 35.移动技术架构的选择 Progressive Web Application 规范 ■ https+manifesthttps://www.w3.org/TR/appmanifest/■ service worker 功能实现https://www.w3.org/TR/service-workers/■ UI 库/程序架构 ■ iOS &non-chrome:manifest polyfillhttps://github.com/boyofgreen/ManUp.js特点 ■ 像应⽤用：桌⾯面图标，全屏运⾏行行，本地后台能⼒力力 ■ 是⽹网站：不不⽤用对付各家应⽤用商店 杨武
- 36.移动技术架构的选择 Progressive Web Application 规范 ■ https+manifesthttps://www.w3.org/TR/appmanifest/■ service worker 功能实现https://www.w3.org/TR/service-workers/■ UI 库/程序架构 ■ iOS &non-chrome:manifest polyfillhttps://github.com/boyofgreen/ManUp.js特点 ■ 像应⽤用：桌⾯面图标，全屏运⾏行行，本地后台能⼒力力 ■ 是⽹网站：不不⽤用对付各家应⽤用商店 杨武
- 37.移动技术架构的选择 Hybrid 原理理 ■ 原⽣生壳 + WebView ■ 原⽣生壳 + WebView + 内嵌 node.js 桌⾯面应⽤用框架中流⾏行行 框架 ■ PhoneGap/Cordova ■ Ionic, Meteor … 特点 ■ 是应⽤用 ■ 像写⽹网站 …… 杨武
- 38.移动技术架构的选择 杨武
- 39.移动技术架构的选择 杨武
- 40.移动技术架构的选择 杨武
- 41.移动技术架构的选择 杨武
- 42.移动技术架构的选择 杨武
- 43.UI 与逻辑的架构⼀一览 移动技术架构的选择 Logic App Data Presentation 杨武
- 44.UI 与逻辑的架构⼀一览 App Data 移动技术架构的选择 GUI Logic UI States UI Logic Business Logic Presentation 杨武
- 45.UI 与逻辑的架构⼀一览 Data App 移动技术架构的选择 GUI Logic UI States UI Logic Presentation Business Logic M-V-C Model Controller View M-V-P Model Presenter M-V-VM Model View Model two way data binding View View data binding Functional Reactive Programming (FRP) stream Reactive Functional Pure Reduxhttp://todomvc.com杨武
- 46.移动技术架构的选择 杨武ReactNative:ReactJS to Native React Native 原⽣生壳 ■ 原⽣生 UI 组件 -桥接- JavaScript VM ■ 描述式：jsx, virtual-dom, css-layout ■ React 编程范式 Worker Threads ■ JavaScript VM 原理理 Native Stub Native UI bridge Platform API 特点 cache ■ 原⽣生应⽤用 ■ ⽤用 JavaScript 写 ■ 跨移动平台时技术栈相对单纯 fetch scripts on server
- 47.移动技术架构的选择 杨武ReactNative:ReactJS to Native React Native 原⽣生壳 ■ 原⽣生 UI 组件 -桥接- JavaScript VM ■ 描述式：jsx, virtual-dom, css-layout ■ React 编程范式 Worker Threads ■ JavaScript VM 原理理 Native Stub Native UI bridge Platform API 特点 cache ■ 原⽣生应⽤用 ■ ⽤用 JavaScript 写 ■ 跨移动平台时技术栈相对单纯 fetch scripts on server
- 48.移动技术架构的选择 原⽣生应⽤用 特点 ■ ⾼高性能，新特性 ■ iOS/Android 要各做⼀一遍 ■ ⼀一套设计通⽤用 vs. 原⽣生设计语⾔言 杨武
- 49.移动技术架构的选择 原⽣生应⽤用 特点 ■ ⾼高性能，新特性 ■ iOS/Android 要各做⼀一遍 ■ ⼀一套设计通⽤用 vs. 原⽣生设计语⾔言 杨武
- 50.移动技术架构的选择 原⽣生应⽤用 特点 ■ ⾼高性能，新特性 ■ iOS/Android 要各做⼀一遍 ■ ⼀一套设计通⽤用 vs. 原⽣生设计语⾔言 Native Hybrid RN 杨武
- 51.移动技术架构的选择 有⽤用户反馈了了 快速响应 ■ 修改 ■ Beta 与灰度 ■ 升级与热修复 最常⻅见⾮非功能反馈 ■ 有点慢：启动时间⻓长、操作卡 ■ 不不稳定：闪退、不不更更新 Native Hybrid RN 杨武
- 52.移动技术架构的选择 ⾯面向融资编程 兼顾客户价值与资本热点 ■ VR ？牵强 ■ ⼈人⼯工智能：语⾳音识别，⼈人脸识别 ■ ⼤大数据 ■ ⼴广告、商品销售 挑战 ■ 设备访问、服务集成 ■ 部分信息需要频繁更更新 Native Hybrid RN 杨武
- 53.总结 移动技术架构的选择 PC web + mobile web + iOS + Android 才是最好的 微信 NO YES App对业务很 关键 PWA YES Hybrid 考虑⽤用户在 电脑上操作 NO 已有⽹网站 有很强的前端 NO YES 交互复杂性 平台特性依赖 YES React NO Native 杨武
- 54.
