DATE: 2020/02/09
通过下面两篇文章整理:
摘要
底层级别
提供底层渲染引擎布局引擎、中层 DSL (Domain-specific Language)、上层框架。
性能高,渲染一致,跨系统平台,也能编译运行于浏览器;
需要学开发语言;
不支持小程序;
Web 技术
没有 DOM,没有 BOM,通过贴近前端生态技术,自研布局引擎处理 CSS,使用 JavaScript 写业务逻辑,使用流行的前端框架作为 DSL,各端分别使用各自的原生组件渲染;通过注册、调用模块来实现调用移动设备原生 API;
为了保持框架的通用性,内置的原生模块有限;
无渲染引擎,渲染一致性不高;
业务逻辑运行在 JavaScript Thread,与 Native 频繁通信,性能不高,容易掉帧卡顿。
- React Native,react-native-web
- Weex
编译型
以 JavaScript 作为基础选定一个 DSL 框架,以这个 DSL 框架为标准在各端分别编译为不同的代码,各端分别有一个运行时框架(容器)或兼容组件库保证代码正确运行。
遵循 React、Vue 语法规范,作为多端的上层应用语言,编译到不同平台,开发一次,到处运行,开发一次,到处调错。
- JD/Taro,React 语法
- Dcloudio/uni-app
- DiDi/chameleon,多态协议针对多端开发
- Tencent/wepy: 小程序组件化开发框架,多端支持不完善
- Meituan-Dianping/mpvue
taro
/(React Native,expo)、chameleon
/(Weex)、uni-app
/(Weex,nvue) 框架支持 APP 端。
跨 APP 端时兼容性较差,问题根源难以定位(运行时、编译时、组件库、依赖库);
chameleon
,有一套 SDK 配合多端协议与原生语言通信,多端支持度好;代码和测试用例非常规范。
结论 (TL;DR)
追求性能,跨平台、无中国特色小程序,Flutter
遵循 React 语法规范,taro
;
遵循 Vue 语法规范、组件多,uni-app
;
遵循 Vue 语法规范、架构设计合理、多端支持度好,chameleon
。