App常用开发模式【简介】


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等