浅谈前端移动开发

分析比对前端移动开发的几种形式，主要以ionic和react native为主。

Transcript

2. 陈 斌 职 位 公 司 Beansmile 简 介 … Web前端开发
5. 移动开发的分类
6. 1 Native App Hybrid App 2 3 Web App React Native 4
7. 1 Native App
8. 1 Native App 什么是 ？
9. Native APP 指的是原⽣生应⽤用程序，⼀一般依托于操作系统，有很强的交互. 技术：Objective-C Java
10. Native App开发的优点
11. 1. 提供最佳的⽤用户体验 2. 拥有系统级别的通知或提醒 3. 可以访问本地资源（通讯录，相册） 4. 针对不同平台提供不同体验 Native App开发的优点
12. Native App开发的缺点
13. 1. 开发成本⾼高（不同平台有不同的开发语⾔言和界⾯面适配） 2. 维护成本⾼高（例如⼀一款App已更新⾄至V5版本，但仍有⽤用户在使⽤用V3 V4版本，开发⼈人员仍需维护之前的版本） 3. 更新流程慢（根据不同平台，提交–审核–上线 等等，需要经过的流程较复杂） Native App开发的缺点
14. 2 Web App
15. 2 什么是 ？ Web App
16. Web App ⼀一般指采⽤用HTML5写出的App， 不需要下载安装，⽣生存在浏览器中的应⽤用， 说的简单点就是⼀一个触屏版的⺴⽹网站。
17. Web App 开发的优点
18. 1. 开发成本低,主要使⽤用web开发技术 2. 更新快，更新⽆无需通知⽤用户，⽆无需⼿手动升级 3. 能够跨多个平台和终端 Web App 开发的优点
19. Web App 开发的缺点
20. 1. ⽆无法获取系统级别的通知，提醒，动效等等 2. 浏览的体验短期内还⽆无法超越原⽣生应⽤用 3. 临时性的⼊入⼝口 Web App 开发的缺点
21. 3 Hybrid App
22. 3 什么是 ？ Hybrid App
23. Hybrid APP指的是半原⽣生半Web的混合类App; 它虽然看上去是⼀一个Native App,⾥里⾯面访问的是⼀一个Web View; 也就是我们常说的混合型移动应⽤用.
24. Hybird App 开发的优点
25. 1. 开发时可以不采⽤用原⽣生语⾔言，但是却拥有 原⽣生应⽤用的特性 3. 具有跨平台性 Hybrid App 开发的优点 2. 有利于Web开发技术⼈人员快速地构建应⽤用
26. Hybird App 开发的缺点
27. 1. ⽤用户体验不如本地应⽤用 Hybird App 开发的缺点 2. 深度定制的难度⼤大
28. 4 React Native
29. 4 什么是 ？ React Native
30. “React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.” React Native 使你能够使⽤用基于 JavaScript 和 React ⼀一致的 开发体验，在本地平台上构建世界⼀一流的应⽤用程序体验
31. React Native开发的优点
32. React Native开发的优点 2. 拥有原⽣生的⽤用户体验 1. 提供了原⽣生的控件⽀支持 相对于Hybird应⽤用： 2. 可以通过更新远端JS，直接更新app 1. 拥有web的开发效率 相对于Native应⽤用：
33. 1. 对开发⼈人员要求较⾼高，当官⽅方封装的控件、 api⽆无法满⾜足需求时 ，就必然需要懂⼀一些 native开发的⼈人去扩展 React Native开发的缺点 2. …
34. Native App Hybird App Web App React Native
35. Native App Web App Hybird App
36. Native App Web App Hybird App
37. Native App Web App Hybird App React Native
40. 接下来主要介绍Hybrid和React Native
41. React Native
42. Github上的活跃度 20316 22342 React Native
43. 开发思维 开发思维 React Native ! HTML，CSS，Angular，Cordova ! 单⻚页⾯面应⽤用程序(Single page application) ! 模拟原⽣生组件 ! Hybird app ! Flex，JSX ，css-layout，ReactJS ! Web Component ! 直接调⽤用React native封装过的原⽣生组件 ! React Native ! Write once, Run Anywhere ! LearnOnce,WriteAnywhere.
44. 开发环境 React Native 1. npm install -g cordova ionic 2. ionic start myApp blank 3. ionic start myApp blank 4. cd myapp 5. ionic platform add ios 6. ionic build ios 7. ionic emulate ios 1. npm install -g react-native-cli 2. react-native init HelloWorld 3. cd HelloWorld 4. react-native start 5. open HelloWorld.xcodeproj 6. cmd + R
45. ionic基本实现思路 Angular + Cordova ⼀一套前端ui控件库 + Cordova获取设备访问 及不同平台的打包能⼒力 借助Angular的MVC模式 帮我们很快地开发单⻚页应⽤用 Angular封装的⼀一套ui组件 => Hybrid App
46. React Native基本实现思路 Native 组件 调⽤用 React Native （Components）
47. React Native基本实现思路 JavaScript Objective-C 调⽤用JS 返回JSON 1. OC层调⽤用JS，加载JS源数据 JavaScriptCore 2. 利⽤用JavascriptCore搭建起OCBridge
 作为和JS层通讯的⼯工具 3. JS运⾏行在JavaScriptCore，通过bridge⾥里的配置表
 把模块⽅方法转为模块ID和⽅方法ID传给OC 4. OC通过bridge的模块配置表找到对应的⽅方法去执⾏行， 并返回JSON数据给Native渲染
48. 实现⼀一个Tabs效果
50. 实现⼀一个Tabs效果
51. ionic实现代码展⽰示
63. 63 63
68. React Native实现代码展⽰示
83. 案例展⽰示
84. Ionic app http://showcase.ionicframework.com/
85. React Native https://facebook.github.io/react-native/showcase.html
86. Native ⼈人机交互体验 + Web 开发效率和发布能⼒力 总结
87. ! 技术服务于产品，产品服务于⼈人 ! ⽤用什么技术不重要，重要的是适合项⺫⽬目形态
88. 招聘信息
89. 团队介绍
91. Email：leon@beansmile.com
92. Thanks
93. 由于惯性思维，总想着往它⾝身上贴个「Web」或者 「Native」或者「Hybrid」的标签， 可是贴上去扯下来，并没有⼀一个适合的标签。 事实上，React Native重新定义了⼀一种新的模式