总体概述
现在比较流行的移动 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 | 上拉 & amp; 下拉刷新 | <Trigger> |
<完>
来源: https://www.cnblogs.com/windfic/p/10443342.html