App常用开发模式【简介】
1.ReactNative
Facebook发现Hybrid App存在很多缺陷和不足,于是发起开源的一套新的App开发方案RN。使用JSX语言写原生界面,js通过JSBridge调用原生API渲染UI交互通信。
- 优点:效率体验接近Native App,发布和开发成本低于Native App
- 缺点:学习有一定成本,且文档较少,免不了踩坑
- 举个栗子:Facebook、Youtube、Discord、QQ、百度等等
- 与传统跨平台开发不同,它的目标不是一次编写到处执行,而是一次学习多处开发(一次学习跨平台开发)不同平台上编写基于React的代码
- 其中,Android版本代码和iOS版本代码是有差别的,但是由于都是js驱动的开发,相同语法的,所以会编写iOS的同时也会编写Android。
- 相比传统跨平台大大提高了性能-既拥有Native的用户体验,又保留React的开打效率。
- 原理仍然是依赖原生暴露的借口-通过JSBridge技术,所以仍然会存在原生代码。
- ReactJs和React Native 的原理是相同的,都是由js实现的虚拟dom 来驱动界面view层渲染。只不过ReactJs驱动html dom 渲染;React Native 是驱动Android/ios原生组件渲染。其实在React Native 推出之前,就已经存在这种使用js 驱动app原生组件的技术了,比如Native Script。
2. Weex
阿里巴巴开发团队在RN的成功案例上,重新设计出的一套开发模式,站在了巨人肩膀上并有淘宝团队项目做养料,广受关注,2016年4月正式开源,并在v2.0版本官方支持Vue.js,与RN分庭抗礼。
- 优点:单页开发模式效率极高,热更新发包体积小,并且跨平台性更强
- 缺点:刚刚起步,文档欠缺;社区没有RN活跃,功能尚不健全,暂不适合完全使用Weex开发App
- 举个栗子:淘宝、天猫、阿里云、优酷、闲鱼、饿了么等
- weex 最底层的原理是和React-Native相同的,就是将JS代码渲染成原生组件
- 只不过在业务代码层面,Weex和React-Naive 有差别:
- 最新版Weex是基于Vue的语法,然后写出来的就是一些特定的H5语法,然后底层引擎再分贝根据web和原生,分别将代码解析成html dom 或者原生组件,所以感觉起来跟写web插件一样。
- 而React-Native 则是直接通过JS写原代码,所以对外表现层上,weex只要遵循一定规则就可以一套代码完全跨平台,React-Native 则针对不同平台写不同的代码,虽然大部分代码可以复用
- 维护层面上,Weex主要由阿里人员维护,社区方面目前还有点不足,而Reac-Native 目前社区已经比较成熟,期待未来两者各自的发展。`
3.Native APP
Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。一般使用的开发语言为Java、C++、Objective-C。
- 优点:性能和体验都是最好的
- 缺点:开发和发布成本高
- 举个栗子:网易管家App (Tab1,Tab2)
- 应用技术:Swift,OC,Java
4.Web App
移动端的网站,常被称为H5应用,说白了就是特定运行在移动端浏览器上的网站应用。一般泛指 SPA(Single Page Application)模式开发出的网站,与MPA(Multi-page Application)对应。
- 优点:开发和发布成本最低
- 缺点:性能和体验不能讲是最差的,但也受到浏览器处理能力的限制,多次下载同 样会占用用户一定的流量
- 举个栗子:网易管家APP(Tab3)
- 应用技术:ReactJS,RegularJS,VueJS等等
Hybrid App
混合模式移动应用,介于Web App、Native App这两者之间的App开发技术,兼具“Native App良好交互体验的优势”和“Web App跨平台开发的优势”(百度百科解释)
主要的原理是,由Native通过JSBridge等方法提供统一的API,然后用Html+Css实现界面,JS来写逻辑,调用API,最终的页面在Webview中显示,这种模式下,Android、iOS的API一般有一致性,Hybrid App所以有跨平台效果。
- 优点:开发和发布都比较方便,效率介于Native App、Web App之间
- 缺点:学习范围较广,需要原生配合
- 举个栗子:FanReact,我爱我家App,东方航空App,富国基金-富国钱包App
- 应用技术:PhoneGap,AppCan,Wex5,APICloud等