移动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开源而来。

官方网站：

 

四、桥接bridgeapp

桥接应用的特点在于使用原生界面，但应用逻辑使用脚本语言编写，通用桥接来控制原生界面。这样达到使用脚本编写原生应用的目的，甚至可以网页与原生应用使用同一套代码，节省大量开发成本。但是操作手感比网页应用强不少。

reactnative与weex代表了两种不同的思路。reactnative提供工具，将平台差异化开放出来（learn once, write anywhere）；而weex提供框架，将平台差异化屏蔽（write once, run everywhere）。所以reactnative最大的痛点是使用难度大，必须熟悉所有平台；weex则注定功能相对弱小，并且坑比较多。

 

react native

react的大热，实际始于reactnative的发布。

官方网站：

 

weex

小众的框架，能不能壮大，关键在于学习者是否能有效率地编写应用。所以很多人认为文档是决定一个开源框架生死的关键。其实有几个使用框架的开源应用，比文档还要关键。因为这些应用活着，间接地证明了框架还有生存的价值和能力，也能成为更好的文档教材。weex号称有一堆知名的应用，但开源项目就乏善可陈了。

官方网站：

 

xamarin（c#）

xamarin在ios与android中的实现方式不一致，在ios中是aot直接编译，在android中是使用桥接技术。

官方网站：

 

rubymotion（ruby）

动态语言编写移动应用，对语言社区而言是能力问题，必须要证明语言的优越性和无所不能。但除开*爱好者，正确的做法是使用最有效率的平台和语言。ruby的长处在于web后端，所以编写app并无多少继承性，编写效率也由于太过小众而存在掉坑的风险。有免费版本，但只支持最新的操作系统版本。

官方网站：

 

titanium

这个框架的核心就是使用javascript开发应用，与web开发的在形式上区别很大。所以从根本上，这就是一种脚本语言框架，和rubymotion如出一辙。

官方网站：

 

五、自绘owndrawapp

自绘一直以来都是游戏界面的*范围，事实上除开flutter，其它的框架都是偏游戏开发的。所以flutter的横空出世，吸引了很大的关注，毕竟这是真正跨平台的唯一可行方案。

 

flutter（dart）

除了使用dart语言有些争议外，flutter是真正值得关注的跨平台方案，没有之一。最近它的目标平台除开ios 和 android，flutter desktop embedding项目将flutter引入到桌面操作系统，hummingbird项目将 flutter 应用引入浏览器。它利用 dart 平台的特性不仅可以编译原生 arm 代码，还可以编译javascript 。这使得 flutter 代码可以在基于标准的 web 上运行而无需任何更改。

官方网站：

 

crossapp（c++）

crossapp是基于cocos2d-x引擎的，而cocos2d-x是基于opengl的 。9秒社团是由手游社区发展而来的，由此可见crossapp的背景，使用c++开发也有一些忠实拥趸。

官方网站：

 

corona（lua）

更适合做游戏，不适合做应用程序，主要是因为界面部分，官方提供的ui部分代码非常不好用，自己实现又很耗时耗力。

官方网站：

 

kivy（python）

又一个动态语言开发框架，和游戏引擎结合起来使得它在特定领域还是很有市场的。而且它还跨windows平台，可以在windows下直接运行，可以真正实现跨平台运行。

官方网站：

 

六、渐进progressiveapp

渐进有边下载边使用这一层意思，也有下载完成后不依赖网络这一层意思。从类型上来讲，有google主导的pwa（progressivewebapp），还有微信主导的小程序。相比pwa一统天下的野心，小程序明显是实用主义导向，能用就好，没有长远的布局。急于与微信竞争的百度、支付宝、中国九大手机厂商联盟的quickapp也复制了这种风格。随着各种跨平台转译工具（如taro）的兴起，各个小程序平台也随之变成了一个专有浏览器实现，变成了前端千框万架大战中的小小注脚了。

 

pwa

全称progressive web app，即渐进式网页应用。相对于国内厂商的私有平台，谷歌主导的pwa从一开始就瞄准下一代浏览器标准。与传统网页最大的不同，是引入了service worker了，相当于本地服务器，能在离线时替代网站服务器继续工作。除此之外，pwa大致就是一个spa（single page web app），开放标准的继承性还是比较高的。不过由于各平台厂商（如微软，苹果）对pwa的态度不明，pwa的推广进展缓慢。

 

miniprogram

微信小程序，由于微信的体量与使用频度，使得小程序可以承载足够的野心。不过从技术上讲，也就是个使用人数较多的浏览器实现。小程序和大量的跟随者，促使多端统一框架也发展起来了。

官方网站：

 

taro

react兼容的跨平台多端统一开发框架。一键生成可以在微信/百度/支付宝/字节跳动小程序、h5、react native等端运行的代码。虽然多端统一框架看似可以在不同类型的平台运行，但它还是要依赖那些平台工具，还是寄居之上的小程序而已。

 

官方网站：

 

nanachi

司徒正美开发的react兼容anu框架的多端转译脚手架。但是对比taro是一堆工具打包而成，nanachi仅是一个脚手架，未免寒酸。不包装一下？

官方网站：

 

chameleon

类vue的跨平台多端统一开发框架。专门拜读了昨天出炉的《chameleon原理详解：其它跨多端统一框架都是假的？》。它有神奇的多态组件，就是重新定义了一个组件声明框架；严格全面的检查，不会不让你的代码不能不跨平台；更多的适配代码，听说有后端统一接口，而且还有一个后台管理系统。好吧，祝您玩得愉快。

 

官方网站：

 

趋势分析

国内由于微信开放了小程序流量主的广告收入，引爆了小程序的热潮，进一步催生了多端转译框架。但是这些框架所做的事并不多，引擎还是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>

 

<完>