秋雨
首页
  • HTML
  • CSS
  • JavaScript
设计模式
webpack
  • 前端常识
  • ES
  • React
  • Redux
  • ReactRouter
  • 事件循环
  • 浏览器渲染流程
  • Vue项目性能优化
  • Vue
  • App
Github
首页
  • HTML
  • CSS
  • JavaScript
设计模式
webpack
  • 前端常识
  • ES
  • React
  • Redux
  • ReactRouter
  • 事件循环
  • 浏览器渲染流程
  • Vue项目性能优化
  • Vue
  • App
Github
  • APP
  • React-Native

App

对于前端来说 有三种流行开发技术,分别是WebApp、原生App、混合App

原生App

原生App:在Android、IOS等移动平台上利用官方提供的开发语言,开发类库,开发工具进行App开发,比图Android端采用kotlin或者是java语言进行编程开发,IOS端采用Object-C或者Swift语言进行编程开发。这些都是通过原生语言进行开发。

优势:

  1. 采用官方提供的语言开发,大到框架,小到每个界面,每个逻辑,每个控件都是由官方语言提供支持,采用最新的方法进行编写,编写出来的程序具备高的稳定性和流畅性。
  2. 原生应用由于利用官方提供的语言和工具进行开发能够直接操控硬件设备(扫一扫、多点触控、NFC、读取短信等),在应用性能上和交互体验上更好。
  3. 原生应用打多数数据都在本地所以省去缓冲加载调取数据的时间,响应速度快。

劣势:

  1. 原生应用可移植性差,一款原生APP,Android和IOS都要各自开发,同样的逻辑,界面要写两套。
  2. 耗费人力和资源巨大,开发成本高昂,且由于应用系统不管更新,框架技术不断迭代,需要不断跟进维护,后期维护成本高。

WebApp

利用Web技术进行的App开发,Web技术本身需要浏览器的支持才能展示和用户交互,因此主要用到的技术由HTML5、CSS3、JavaScript等前端技术构成。

优势:

  1. 支持设备范围广,可以跨平台,编写的代码可以同时在Android、IOS、Windows上运行。
  2. 开发成本低,周期短。
  3. 用户可以直接使用最新版本(自动更新,不需要用户手动更新)。

劣势:

  1. Web技术本身的限制,H5移动应用不能直接访问设备硬件(摄像头、麦克风等),所以在体验和性能上有很大的局限性。
  2. 对联网要求高,离线不能做任何操作。
  3. APP反应速度慢,页面切换流畅性较差(访问页面需要下载对象的HTML/CSS/JS)。

混合App

介于WebApp和原生App之间的App。

混合app(hybridapp)开发就是一部分采用原生开发,一部分采用web开发,如此一来就兼具app开发良好用户交互体验的优势和webapp开发跨平台开发的优势。在实际的开发场景中,像电商类app,由于商品详情页里的内容可能经常有所变动,如果采用原生app开发的形式,那么每修改页面就需要发布更新一次app,这样就会造成不太好的用户体验,所以通常为了保证用户体验良好且页面信息能随时改动,所以往往这类页面就会采用web开发。

优势:

  1. 开发效率高,节约时间,同一套代码Android和IOS都可以用。
  2. 更新和部署比较方便,每次升级版本只需要在服务器端升级即可,不需要上传到App Store进行审核。
  3. 代码维护方便、版本迭代快、节约产品成本。
  4. 比web版实现功能多(扫码、蓝牙等)

劣势:

加载缓慢/网络要求高、混合APP数据需要从服务器调取、每个页面都需要重新下载,因此打开速度慢,网络占用高,缓冲时间长,容易让用户反感。

最后更新:
贡献者: qiuyulc
Next
React-Native