Native App

  • 使用原生语言开发的应用;
  • 性能和体验都是最好,但开发和发布成本最高;
  • 常用的开发技术:Swift,OC, Java;

Web App

  • 移动端的网站,常被称为H5应用,即运行在移动端浏览器的网站应用,一般泛指SPA模式开发的网站,与MPA对应,代表:微信公众号里的H5应用(微信公众号的H5又可以调用Native API,也可以认为是Hybrid App);
  • 开发和发布成本最低,但性能最差;
  • 常用的开发技术:VueJS、ReactJS等;

Hybrid App

  • 混合模式移动应用,介于WebApp、Native App两者之间的App开发技术;
  • 原理:JS写逻辑且可以通过JSBridge调用Native的API,用HTML+CSS编写界面,并由webview渲染界面;
  • 渲染方式:webview渲染;
  • JSBridge统一封装了IOS和Android的API,因此Hybrid App具有跨平台效果;
  • JS逻辑的执行由webview内置的JS引擎决定,调用Native API是通过JSBridge来实现;
  • 开发和发布成本介于Native App 和 WebApp之间。
  • 热更新:支持
  • 常用开发技术:PhoneGap、ApiCloud、MUI、Wex5、AppCan等;

React Native App

  • RN是Facebook开发并开源的一款UI框架,以解决Hybrid存在的缺陷与不足;
  • 原理:JS写逻辑且运行在JS引擎中,底层自动把JS代码解析成对应平台(ios、安卓)的原生API,调用Native的API绘制原生UI,即原生渲染界面,这是与Hybird App最大的不同,因此性能好于Hybrid App。
  • 渲染方式:原生渲染;
  • JS引擎为:ios为JSCore,andorid为v8,最新版rn开始在andorid上搞自己的js引擎Hermes
  • 界面:由JSX语言写界面
  • 布局:Flexbox;
  • 基于的开发技术:ReactJS
  • 热更新:支持;
  • 思想:learn once, write anywhere; 注:不敢说write once,因为RN要针对ios和安卓各写一套代码;

Weex App

  • 与React Native App类似,由阿里开发并开源一款UI框架;
  • 原理:跟RN类似;
  • 渲染方式:原生渲染
  • 跟RN最大不同:Weex写一套代码即可运行在IOS和安卓中,RN要写两套代码,IOS一套,安卓一套;
  • JS引擎为:ios为JSCore,andorid为v8
  • 界面:由Vue编写界面;
  • 布局:Flexbox;
  • 基于的开发技术:VueJS;
  • 热更新:支持;
  • 思想:write once, run anywhere;

注:

  1. 微信小程序类似于RN/Weex开发方式,也分为逻辑层和视图层;
  2. 微信小程序的页面属于混合渲染,什么是混合渲染?看后文总结;

Flutter APP

  • 由Google开发并开源的一套UI框架,使用dart语言;逻辑和界面使用Flutter Engine;
  • Flutter使用Engine来绘制Widget(Flutter的显示单元),即Widget渲染界面,Dart代码都是通过AOT(Ahead Of Time)编译为平台的原生代码,所以Flutter可以直接与平台通信,不需要JS引擎的桥接
  • Widget是不可变的,仅支持一帧,并且在每一帧上不会直接更新,要更新而必须使用Widget的状态。无状态和有状态widget的核心特性是相同的,每一帧他们都会重新构建,有一个State对象,它可以跨帧存储状态数据并恢复它。
  • 渲染方式:Widget渲染界面
  • 性能:Flutter APP是除了Native APP以外性能最好的;
  • 热更新:不支持;

Uni-App

  • DCloud公司开发的一款基于vue.js的跨端的框架;

  • 渲染方式:**混合渲染、weex原生渲染、webview渲染。**小程序和app-vue页面属于混合渲染,app-nvue页面全部是weex原生渲染。H5全部为webview渲染;

  • uni-app里的App端原生插件,这类插件使用IOS或者Android原生语言编写,封装成插件,供其他开发者使用js来调用;

  • 原生插件分为原生组件component和原生模块module;

  • 原生组件component只能在App-nvue页面中使用;

  • uni-app插件市场的大部分原生插件大部分属于原生模块module;

  • uni-app开发app性能足够好,用官方原话说是:点击跳转原文

当然,uni-app的app引擎并没有吊炸天。App平台,所有跨平台工具都还比不过原生,这是客观事实。只是,如果uni-app不能满足你的需求,你没有必要去用其他跨平台工具,直接上原生吧。

  • 笔者认为使用uni-app开发最大的好处就是省成本和不错的生态:
  1. 成本,包括学习成本、开发成本,时间成本,招人成本等;
  2. 生态,包括开发者数量,社区活跃度,文档是否齐全等;

总结

目前主流的3大渲染引擎有:webview、React Native/weex、Flutter,复杂程度依次降低、渲染性能依次上升

混合渲染: 主体为webview渲染,部分元素为原生渲染,比如导航栏、tabbar、video、map使用了原生控件
例如:微信小程序,uniapp发布的app-vue页面都属于混合渲染;

混合渲染虽然提升了性能,但也带来了其他问题,点击查看

Flutter的逻辑层和视图层统一,运行在同一套dart虚拟机下。

rn和weex使用原生渲染,性能高于webview,但是同为原生渲染,rn和weex怎么会慢于flutter呢?其实并不是原生渲染慢,而是js和原生通信慢

rn和weex分为js引擎和原生渲染层两个运行环境,当js引擎联网获取数据后,通知原生视图层更新界面时,有一个跨环境的通信折损。同样,但用户在屏幕上操作原生视图层时,要给js引擎发送通知,也会产生通信折损。

这个通信折损,普遍存在于所有逻辑和视图分离的框架中,各家小程序因为也使用这个架构,所以也存在这个问题。

因为flutter只有一个dart引擎,所有没有来回通信参数的性能问题,所以性能比rn和weex跟高;

这个通信的折损特别表现在跟手势的js响应操作绘制帧动画,或者说js连续操作界面元素方面。场景如:界面可拖动的浮动球、可拖动的滑块等。

为了解决通信的折损,RN搞了lottie的动画库,weex搞了BindingX,微信小程序搞了wxs,百度小程序搞了Filter,阿里小程序搞了SJS,uniapp若使用weex渲染时使用BindingX,使用app-vue时使用renderjs或wxs,renderjs和wxs是一种运行在视图层的js,不和逻辑层通信。

主流的APP开发方式总结和对比相关推荐

  1. 目前主流的app开发方式

    移动应用开发三种方式比较 随着H5标准的发布以及推广,使得移动应用的开发也受到了很大影响,出于效率.成本等等的原因,移动应用的开发不在完全依赖于"原生".  今天就简单总结一下目前 ...

  2. 四大主流新闻App竞品分析

    详细内容扫二维码查看! 四大主流新闻App竞品分析 1.概述 (1)市场概况 产品用户体量:2016年Q2移动资讯分发市场用户规模达到5.8亿人,基本完成用户普及,用户增长趋势明显放缓.在活跃用户渗透 ...

  3. 四大Hybrid App移动开发平台对比

    [值得一用的Apps]四大Hybrid App移动开发平台对比 摘要:作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢?是选择学习原生开发,研究Java.Object-C.C#等语言,还是选择 ...

  4. android仿百度新闻,【Android】最新主流新闻app功能实现。仿网易,搜狐等新闻客户端实现展示...

    最新主流新闻app功能实现.仿网易,搜狐等新闻客户端 (原创作品,转载请说明出处)先给大家看一下效果图: 这个项目总体来说虽然不是特别难,但是确实非常常用的功能.是业余时间自己写的一个小项目. 以前我 ...

  5. HHDEBC与其他主流软件SQL格式化功能的对比

    SQL格式化(即SQL美化)是一项非常重要的功能.只有清晰的结构,才能让您更好的优化数据库查询或写入. HHDBCS的SQL格式化功能有着独特的处理方式,可运用于对复杂SQL语句的分析或者是程序代码优 ...

  6. 五种主流web报表工具的功能对比

    公司在做项目时,需要用到报表工具,经过我们对一系列市场上主流报表工具的考察.综合评定,以及到部分报表工具厂商实地考察.我们最终选择了更为专业,和适合我们开发的报表工具,以下是我们在前期选择报表工具时的 ...

  7. 2017深度学习最新报告及8大主流深度学习框架超详细对比(内含PPT)

    2017深度学习最新报告(PPT) ​ 深度学习领军人物 Yoshua Bengio 主导的蒙特利尔大学深度学习暑期学校目前"深度学习"部分的报告已经全部结束. 本年度作报告的学术 ...

  8. Testin评测七款主流社交App:国产微信完爆韩国LINE

    Testin评测七款主流社交App:国产微信完爆韩国LINE [Testin云测试]手机聊天社交应用,是手机端的基础应用,只要使用智能手机的用户,基本上都会安装聊天App.由于这些软件只消耗网络流量, ...

  9. APP 开发方式的优缺点有哪些?

    APP的主要开发方式有三种:原生开发,Web APP,混合开发. 三种APP开发方式各有优缺点,具体如下: 一.原生开发 原生app在基于安卓.ios系统上开发的,每一行代码,每一个功能模块都是原生程 ...

最新文章

  1. Visual Paradigm 教程[UML]:如何在SoaML中建模多方服务?
  2. 快速上手的Glide4.x教程
  3. 电脑硬件检测_【学无止境】电脑硬件维修测试学习资料(附送各类PC检修资源)...
  4. java厨房_JAVA环境搭建,厨房安装图文教程!
  5. DataBinding注意事项Error parsing XML: duplicate attribute以及如何在listview中使用DataBinding...
  6. 2019年7月全国程序员工资统计
  7. stats | 线性回归(一)——模型表达式和输出结果
  8. TCP/IP及内核参数优化调优(转)
  9. 基于MATLAB的夜间车牌识别处理
  10. rk3399_android7.1 USB Type-A的配置
  11. python中的pickle解析
  12. 【Ubuntu】ubuntu 16.04 设置root用户初始密码
  13. Nginx打包RPM(FPM工具)
  14. 新冠疫情历史数据可视化分析
  15. Spark RDD的Transformation操作
  16. dell 2u服务器型号,DELL服务器规格参数
  17. 三生三世十里桃花手游怎么用电脑玩 三生三世十里桃花模拟器教程
  18. Learn Emacs in 21 Days: day 3 学习笔记
  19. 用python从图片生成视频
  20. 02326操作系统2017年版-第一章 操作系统概论 知识要点

热门文章

  1. 两年车间技术员转型大数据开发,说说转型这点事儿
  2. 个人电脑上搭建OpenStack的实验室
  3. 实战天翼云云主机系统盘扩容
  4. android 内存和性能优化汇总
  5. Hopfield神经网络以及其python实现(一)
  6. 理解“same-site“ 和 “same-origin“
  7. 黑马程序员,黑马论坛-------单例模式的两种实现(恶汉+懒汉)
  8. android最新v7包下载,androidsupportv7
  9. 【计算机毕业设计】169工厂车间管理系统
  10. 思迈特软件Smartbi:如何快速打造数据大屏可视化展示系统