移动APP开发框架盘点
移动APP开发框架盘点
总体概述
现在比较流行的移动APP开发框架有以下六种:网页、混合、渐进、原生、桥接、自绘。前三种体验与Web的体验相似,后三种与原生APP的体验相似。这六种框架形式,都有自己适用的范围。无所谓好坏,适用就是好。
l 网页应用适用于传统网站APP化,比如淘宝、京东,有大量WEB页面嵌入到APP中。
l 混合应用适用于小成本应用开发,全部代码都基于Web,好处是开发快速、成本低。
l 渐进应用适用于高机会成本的场合,边下载边使用,能快速获取,快速体验。
l 原生应用适用于大型和高体验要求的应用,能做出让人满意的体验效果。
l 桥接应用适用于高速迭代的创意类应用,让体验与成本都处于可接受的范围。
l 自绘应用适用于游戏和有特殊效果的应用,最大的好处是没有平台约束和表达瓶颈。
一、网页WebApp
WebApp与传统Web的主要区别,在于前端框架,特别是V-DOM框架的应用。此类前端框架使得WebApp与NativeApp在机理上已经没有任何区别了。在众多的前端框架中, React、Vue和Angular是最有竞争力的选择。
React
V-Dom技术的开创者,主流框架中的NO.1。React的贡献都是开创性的,在它基础上,也有很多兼容框架,比如Anu,Nerv。用以解决React在性能或IE兼容性上的问题。
主流技术方案:
React + Redux + ReactRouter + Material-UI/AntD/Semantic-UI
Vue
由国人创建,在中国拥有大量使用者,也有很多配套的开源项目。它的是要特点是学习成本低,容易上手。
主流技术方案:
Vue + Vuex + Vue-Router + Vuetify/Quasar/vux/ Mint-UI
Angular
大而全型的框架,为大型项目所推崇,深度整合Typescript和Rxjs。
主流技术方案:
Angular + Typescript
二、原生NativeApp
由于操作系统的限制,原生应用只有那么几种。对于原生应用,架构是基础,框架是核心,加上海量的UI组件。
IOS
iOS开发已经从OC全面转向Swift,最新的架构VIPER基本上可以视为MMVPP。
主流技术方案:
VIPER + RxSwift + Moya + Alamofire + SwiftyJSON/ObjectMapper
Android
Android开发语言从Java更换为Kotlin。编译时依赖注入框架Dagger也成为不二法宝。
主流技术方案:
MVP + Dagger + RxKotlin + Retrofit + OkHttp + Kotson(Gson)
三、混合HybridApp
HybridApp的关键不在本身,而在WebApp。好的WebApp改为HybridApp很容易。所以混合应用框架实际是指WebApp的基础设施库,有Cordova(PhoneGap)就足够了。
Cordova
PhoneGap开源而来。
官方网站:
https://cordova.apache.org/
四、桥接BridgeApp
桥接应用的特点在于使用原生界面,但应用逻辑使用脚本语言编写,通用桥接来控制原生界面。这样达到使用脚本编写原生应用的目的,甚至可以网页与原生应用使用同一套代码,节省大量开发成本。但是操作手感比网页应用强不少。
ReactNative与Weex代表了两种不同的思路。ReactNative提供工具,将平台差异化开放出来(Learn Once, Write Anywhere);而Weex提供框架,将平台差异化屏蔽(Write Once, Run Everywhere)。所以ReactNative最大的痛点是使用难度大,必须熟悉所有平台;Weex则注定功能相对弱小,并且坑比较多。
React Native
React的大热,实际始于ReactNative的发布。
官方网站:
https://facebook.github.io/react-native/
Weex
小众的框架,能不能壮大,关键在于学习者是否能有效率地编写应用。所以很多人认为文档是决定一个开源框架生死的关键。其实有几个使用框架的开源应用,比文档还要关键。因为这些应用活着,间接地证明了框架还有生存的价值和能力,也能成为更好的文档教材。Weex号称有一堆知名的应用,但开源项目就乏善可陈了。
官方网站:
http://weex.apache.org/
Xamarin(C#)
Xamarin在IOS与Android中的实现方式不一致,在IOS中是AOT直接编译,在Android中是使用桥接技术。
官方网站:
http://xamarin.com/
RubyMotion(Ruby)
动态语言编写移动应用,对语言社区而言是能力问题,必须要证明语言的优越性和无所不能。但除开狂热爱好者,正确的做法是使用最有效率的平台和语言。Ruby的长处在于Web后端,所以编写APP并无多少继承性,编写效率也由于太过小众而存在掉坑的风险。有免费版本,但只支持最新的操作系统版本。
官方网站:
http://www.rubymotion.com/
Titanium
这个框架的核心就是使用JavaScript开发应用,与Web开发的在形式上区别很大。所以从根本上,这就是一种脚本语言框架,和RubyMotion如出一辙。
官方网站:
http://www.appcelerator.com/
五、自绘OwndrawApp
自绘一直以来都是游戏界面的势力范围,事实上除开Flutter,其它的框架都是偏游戏开发的。所以Flutter的横空出世,吸引了很大的关注,毕竟这是真正跨平台的唯一可行方案。
Flutter(Dart)
除了使用Dart语言有些争议外,Flutter是真正值得关注的跨平台方案,没有之一。最近它的目标平台除开iOS 和 Android,Flutter Desktop Embedding项目将Flutter引入到桌面操作系统,Hummingbird项目将 Flutter 应用引入浏览器。它利用 Dart 平台的特性不仅可以编译原生 ARM 代码,还可以编译JavaScript 。这使得 Flutter 代码可以在基于标准的 Web 上运行而无需任何更改。
官方网站:
https://flutter.dev/
CrossApp(C++)
CrossApp是基于Cocos2d-x引擎的,而Cocos2d-x是基于OpenGL的 。9秒社团是由手游社区发展而来的,由此可见CrossApp的背景,使用C++开发也有一些忠实拥趸。
官方网站:
https://crossapp.9miao.com/
Corona(Lua)
更适合做游戏,不适合做应用程序,主要是因为界面部分,官方提供的UI部分代码非常不好用,自己实现又很耗时耗力。
官方网站:
https://coronalabs.com/
Kivy(Python)
又一个动态语言开发框架,和游戏引擎结合起来使得它在特定领域还是很有市场的。而且它还跨windows平台,可以在windows下直接运行,可以真正实现跨平台运行。
官方网站:
https://kivy.org/
六、渐进ProgressiveApp
渐进有边下载边使用这一层意思,也有下载完成后不依赖网络这一层意思。从类型上来讲,有Google主导的PWA(ProgressiveWebApp),还有微信主导的小程序。相比PWA一统天下的野心,小程序明显是实用主义导向,能用就好,没有长远的布局。急于与微信竞争的百度、支付宝、中国九大手机厂商联盟的QuickApp也复制了这种风格。随着各种跨平台转译工具(如Taro)的兴起,各个小程序平台也随之变成了一个专有浏览器实现,变成了前端千框万架大战中的小小注脚了。
PWA
全称Progressive Web App,即渐进式网页应用。相对于国内厂商的私有平台,谷歌主导的PWA从一开始就瞄准下一代浏览器标准。与传统网页最大的不同,是引入了Service Worker了,相当于本地服务器,能在离线时替代网站服务器继续工作。除此之外,PWA大致就是一个SPA(single page web app),开放标准的继承性还是比较高的。不过由于各平台厂商(如微软,苹果)对PWA的态度不明,PWA的推广进展缓慢。
MiniProgram
微信小程序,由于微信的体量与使用频度,使得小程序可以承载足够的野心。不过从技术上讲,也就是个使用人数较多的浏览器实现。小程序和大量的跟随者,促使多端统一框架也发展起来了。
官方网站:
https://mp.weixin.qq.com/
Taro
React兼容的跨平台多端统一开发框架。一键生成可以在微信/百度/支付宝/字节跳动小程序、H5、React Native等端运行的代码。虽然多端统一框架看似可以在不同类型的平台运行,但它还是要依赖那些平台工具,还是寄居之上的小程序而已。
官方网站:
https://taro.aotu.io/
Nanachi
司徒正美开发的React兼容Anu框架的多端转译脚手架。但是对比Taro是一堆工具打包而成,nanachi仅是一个脚手架,未免寒酸。不包装一下?
官方网站:
https://rubylouvre.github.io/nanachi/
Chameleon
类Vue的跨平台多端统一开发框架。专门拜读了昨天出炉的《Chameleon原理详解:其它跨多端统一框架都是假的?》。它有神奇的多态组件,就是重新定义了一个组件声明框架;严格全面的检查,不会不让你的代码不能不跨平台;更多的适配代码,听说有后端统一接口,而且还有一个后台管理系统。好吧,祝您玩得愉快。
官方网站:
https://cmljs.org/
趋势分析
国内由于微信开放了小程序流量主的广告收入,引爆了小程序的热潮,进一步催生了多端转译框架。但是这些框架所做的事并不多,引擎还是React/Vue,做了一套各平台统一的UI组件而已。由于个性化的原因,UI组件是大家一直都想统一,而不能如愿的目标。Taro框架也只是推销了自己的一套UI组件而已。在我看来,还不如提供一套组件“标准”,允许并鼓励用户自己实现。
如果有一套能在React/Vue,ReactNative/Weex,甚至Android,iOS,Flutter上使用的“标准”组件,那么全平台大一统,Write Once, Run Everywhere这个目标才有可能实现吧。
问题:试求React-Native、Taro、Weex、Chameleon框架组件的“最大公约数”和“最小公倍数”。
抽象的“公约数”好求,结合实现的“最小公倍数”只能在实践中证明了。
框架 |
组件 |
组件名称 |
抽象类型 |
ReactNative |
View |
视图容器 |
<View> |
Text |
文本 |
<Text> |
|
Image |
图片 |
<Image> |
|
ImageBackground |
图片背景 |
<View> |
|
TextInput |
文本输入框 |
<Input> |
|
ScrollView |
滚动视图 |
<View> |
|
Button |
按钮 |
<Button> |
|
Picker |
选择器 |
<Picker> |
|
Slider |
范围值选择 |
<Slider> |
|
Switch |
开关组件 |
<Checkbox> |
|
FlatList |
简单列表 |
<List> |
|
SectionList |
分组列表 |
<List> |
|
DatePickerIOS |
日期/时间选择器 |
<DatePicker> |
|
MaskedViewIOS |
带蒙版的视图 |
<Modal> |
|
ProgressViewIOS |
进度条 |
<Progress> |
|
SegmentedControlIOS |
分段显示多个选项 |
<Tab> |
|
SafeAreaView |
非遮挡可视区域 |
<View> |
|
SnapshotViewIOS |
截屏视图 |
<View> |
|
DrawerLayoutAndroid |
抽屉导航 |
<View> |
|
ProgressBarAndroid |
进度条 |
<Progress> |
|
ToolbarAndroid |
工具栏 |
<Card> |
|
ActivityIndicator |
加载提示符 |
<Loading> |
|
KeyboardAvoidingView |
随键盘调整视图 |
<View> |
|
Modal |
模式视图 |
<Modal> |
|
RefreshControl |
下拉刷新 |
<Trigger> |
|
StatusBar |
状态栏 |
<Card> |
|
TouchableHighlight |
高亮触摸响应 |
<Trigger> |
|
TouchableOpacity |
透明度触摸响应 |
<Trigger> |
|
Taro |
View |
视图容器 |
<View> |
ScrollView |
可滚动视图 |
<View> |
|
Swiper |
滑块视图容器 |
< Swiper> |
|
MovableView |
可移动的视图容器 |
<View> |
|
CoverView |
覆盖在原生组件之上的文本视图 |
<View> |
|
Icon |
图标 |
<Text> |
|
Text |
文本 |
<Text> |
|
Progress |
进度条 |
<Progress> |
|
RichText |
富文本 |
<View> |
|
Button |
按钮 |
<Button> |
|
CheckboxGroup |
多项选择器 |
<View> |
|
Form |
表单 |
<View> |
|
Input |
文本输入框 |
<Input> |
|
Label |
表单标签 |
<Text> |
|
Picker |
普通选择器 |
<Picker> |
|
PickerView |
嵌入的滚动选择器 |
<View> |
|
Radio |
单项选择器 |
<Radio> |
|
Slider |
滑动选择器 |
<Slider> |
|
Switch |
开关选择器 |
<Checkbox> |
|
Textarea |
多行输入框 |
<Input> |
|
Navigator |
页面导航链接 |
<Card> |
|
Audio |
音频 |
<Audio> |
|
Image |
图片 |
<Image> |
|
Video |
视频 |
<Video> |
|
Camera |
系统相机 |
<Camera> |
|
LivePlayer |
实时音视频播放 |
<Service> |
|
LivePusher |
实时音视频录制 |
<Service> |
|
Map |
地图 |
<Map> |
|
Canvas |
画布 |
<Canvas> |
|
OpenData |
展示微信开放的数据 |
<Card> |
|
WebView |
网页承载容器 |
<Web> |
|
Weex |
a |
页面间的跳转 |
<A> |
div |
通用容器 |
<View> |
|
text |
文本 |
<Text> |
|
image |
图片 |
<Image> |
|
list |
垂直列表 |
<List> |
|
cell |
列表子组件 |
<View> |
|
loading |
容器上拉加载 |
<Trigger> |
|
Refresh |
容器下拉刷新 |
<Trigger> |
|
recycle-list |
复用列表容器 |
<List> |
|
scroller |
滚动的容器 |
<View> |
|
slider |
轮播图 |
< Swiper> |
|
indicator |
轮播图子组件 |
< Swiper> |
|
textarea |
多行文本输入 |
<Input> |
|
input |
输入 |
<Input> |
|
waterfall |
瀑布流布局容器 |
<View> |
|
video |
视频 |
<Video> |
|
web |
网页 |
<Web |
|
richtext |
富文本容器 |
<View> |
|
Chameleon |
view |
视图容器 |
<View> |
text |
文本容器 |
<Text> |
|
page |
基础页面容器 |
<View> |
|
block |
包装容器 |
<View> |
|
cell |
子列表项容器 |
<View> |
|
scroller |
可滚动视图区域 |
<View> |
|
list |
可滚动长列表 |
<List> |
|
container |
布局容器 |
<View> |
|
row |
flex布局行容器 |
<View> |
|
col |
flex布局列容器 |
<View> |
|
carousel |
轮播图 |
< Swiper> |
|
carousel-item |
轮播图子容器 |
< Swiper> |
|
button |
按钮 |
<Button> |
|
input |
输入框 |
<Input> |
|
textarea |
多行输入框 |
<Input> |
|
switch |
开关 |
<Checkbox> |
|
radio |
单选框 |
<Radio> |
|
checkbox |
复选框 |
<Checkbox> |
|
image |
图片 |
<Image> |
|
video |
视频播放器 |
<Video> |
|
c-animation |
动画组件 |
<Animation> |
|
c-toast |
提示框 |
<Toast> |
|
c-loading |
加载中 |
<Loading> |
|
c-dialog |
对话框 |
<Modal> |
|
c-popup |
蒙层 |
<Modal> |
|
c-tip |
提示 |
<Card> |
|
c-actionsheet |
操作列表 |
<List> |
|
c-tab |
标签页 |
<Tab> |
|
c-picker |
底部弹起的选择器 |
<Picker> |
|
c-picker-panel |
底部弹起的控制板 |
<Picker> |
|
c-picker-item |
滚动选择器 |
<Picker> |
|
c-checkbox-group |
复选框列表 |
<View> |
|
c-radio-group |
单选框列表 |
<View> |
|
c-refresh |
上拉&下拉刷新 |
<Trigger> |
<完>
移动APP开发框架盘点相关推荐
- 成为一名合格Android架构师,移动APP开发框架盘点,面试资料分享
缘起 经过近十年的发展,Android技术优化日新月异,如今Android 10.0 已经发布,Android系统性能也已经非常流畅,可以在体验上完全媲美iOS.到了各大厂商手里,改源码.自定义系统, ...
- 安卓前端开发!移动APP开发框架盘点,附带学习经验
关于Android的近况 大家都知道,今年移动开发不那么火热了,完全没有了前两年Android开发那种火热的势头,如此同时,AI热火朝天,很多言论都说Android不行了.其实不光是Android,i ...
- android必备软件!移动APP开发框架盘点,已拿到offer
开头 先说一下我大概的情况吧.渣本毕业,工作已经有快两年了,从高中就开始玩小破站.无论是学习还是日常放松都是在b站.大学主学的软件技术专业,所以,进大学校门那一刻起,去上海bilibili工作就在心里 ...
- 仅需6步,教你轻易撕掉app开发框架的神秘面纱(1):确定框架方案
遇到的问题 做游戏的时候用的是cocos2dx+lua,游戏开发自有它的一套框架机制.而现在公司主要项目要做android和iOS应用.本文主要介绍如何搭建简单易用的App框架. 如何解决 对 ...
- wex5 转换 html5,WeX5开发工具(html5 app开发框架)V3.9 开源版
WeX5开发工具(html5 app开发框架)是一套免费开源的wex5应用快速开发框架平台.非常不错的html5开发工具,用来开发安卓.苹果.web.微信服务号等等,采用Apache源码,所有的代码都 ...
- Html5必看:教你如何选择移动APP开发框架
如何选择移动APP开发框架一直是困扰很多新手的难题,今天杭州APP开发小编就和大家一起分享一下HTML5 移动app开发过程中框架该如何选择?当然我们得先从下面几个方面来评估一个框架的优越性,然后再做 ...
- 混合APP开发框架资料汇总
Ionic(ionicframework)一款接近原生的Html5移动App开发框架 会html css js就可以开发app,Ionic基于angualrjs框架是一个专注于开发移动wap以及app ...
- 咏南WEB APP开发框架
咏南WEB APP开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.bai ...
- Reapp - 下一代的 Hybrid App 开发框架
Reapp 与 React Native 有着惊人的相似之处,二者都使用 React 来创建应用程序用户界面的框架.然而,在底层机制上这两个框架之间却具有明显的哲学差异.React Native 将 ...
- 高性能html5的app,hybrid app走向轻混剖析wex5开源高性能html5 app开发框架.docx
hybrid app走向轻混剖析wex5开源高性能html5 app开发框架 Hybrid App走向"轻混",剖析WeX5开源高性能HTML5 App开发框架4月23日上午,HT ...
最新文章
- javascript如何实现功能的分析
- Python多阶段框架实现虚拟试衣间,超逼真!
- FPGA之道(2)FPGA应用方向
- cpp_extension dist must be a Distribution instance
- CVPR 2021 《Causal Attention for Vision-Language Tasks》论文笔记
- Windows系统程序设计之结构化异常处理
- output怎么用_如何用 C++ 写一个可编程软件渲染器?
- 游戏上线... 记录下...
- [渝粤教育] 苏州工艺美术职业技术学院 PPT美化设计 参考 资料
- 数据结构:(1)课程总览
- 互联⽹名词⼤全——商业模式篇
- weblogic 安装部署
- 趋势病毒软件卸载攻略
- linux五笔输入法制作_在linux下制作拼音五笔输入法
- Facebook正式改名 要砸600亿做这件事 改名转运能拯救这张“脸”吗?
- 关于打印机共享和连接问题
- 1.14 JavaScript5:常用DOM操作
- SQL Server Management Studio(SMSS)删除连接记录
- 直线插补c语言源程序,老哥们求助直线插补程序,带图我不会图啊
- 软件测试入职第一天应该做什么?