作者
凹凸实验室
责编
伍杏玲
最近前端界多端框架频出,各巨头公司纷纷造出各家的轮子,例如滴滴的Chameleon、美团的Mpvue、京东的Taro、DCloud的uni-app、腾讯的WePY。不少有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?我到底该选哪个呢?
作为Taro开发团队一员,笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。但宥于利益相关,本文的观点很可能是带有偏向性的,大家可以带着批判的眼光去看待,权当抛砖引玉。
那么,当我们在讨论多端框架时,我们在谈论什么:
多端
现在流行的多端框架可以分为三类:
1.全包型
这类框架最大的特点就是从底层的渲染引擎、布局引擎,到中层的DSL,再到上层的框架全部由自己开发,代表框架是Qt和Flutter。
优点:性能的上限高,各平台渲染结果一致。
缺点:需要完全重新学习DSL(QML/Dart),难以适配小程序。
这类框架是最原始也是最纯正的的多端开发框架,由于底层到上层每个环节都掌握在自己手里,也能最大可能地去保证开发和跨端体验一致。但它们的框架研发成本巨大,渲染引擎、布局引擎、DSL、上层框架每个部分都需要大量人力开发维护。
2.Web技术型
这类框架把Web技术(JavaScript、CSS)带到移动开发中,自研布局引擎处理CSS,使用JavaScript写业务逻辑,使用流行的前端框架作为DSL,各端分别使用各自的原生组件渲染。
代表框架是ReactNative和Weex。
优点:
开发迅速。复用前端生态。易于学习上手。缺点:
交互复杂时难以写出高性能的代码,这类框架的设计就必然导致JS和Native之间需要通信,类似于手势操作这样频繁地触发通信就很可能使得UI无法在16ms内及时绘制。ReactNative有一些声明式的组件可以避免这个问题,但声明式的写法很难满足复杂交互的需求。由于没有渲染引擎,使用各端的原生组件渲染,相同代码渲染的一致性没有第一种高。3.JavaScript编译型
这类框架有:Taro、WePY、uni-app、Mpvue、Chameleon。
它们的原理是:先以JavaScript作为基础选定一个DSL框架,以这个DSL框架为标准在各端分别编译为不同的代码,各端分别有一个运行时框架或兼容组件库保证代码正确运行。
优点:
为了小程序而生。对了,第一第二种框架除了可以跨系统平台之外,也都能编译运行在浏览器中。(Qt有QtforWebAssembly,Flutter有Hummingbird,ReactNative有React-Native-Web,Weex原生支持)在移动端一般会编译到ReactNative/Weex,所以它们也都拥有Web技术型框架的优点。这看起来很美好,但实际上ReactNative/Weex的缺点编译型框架也无法避免。除此之外,编译型框架的抽象也不是免费的:当Bug出现时,问题的根源可能出在运行时、编译时、组件库以及三者依赖的库等等各个方面。
在Taro开源的过程中,我们就遇到过Babel的Bug、ReactNative的Bug,JavaScript引擎的Bug,当然也少不了Taro的Bug。相信其它原理相同的框架也无法避免这一问题。
但这并不意味着这类为了小程序而设计的多端框架就都不堪大用。
现在各巨头超级App的小程序百花齐放,框架会为了抹平小程序做了许多工作,这些工作在大部分情况下是不需要开发者关心的。而且许多业务类型并不需要复杂的逻辑和交互,没那么容易触发到框架底层依赖的Bug。
那么当你的业务适合选择编译型框架时,在笔者看来首先要考虑的就是选择DSL的起点。因为有多端需求业务通常都希望能快速开发,一个能够快速适应团队开发节奏的DSL就至关重要。
不管是React还是Vue(或者类Vue)都有它们的优缺点,大家可以根据团队技术栈和偏好自行选择。
如果不管什么DSL都能接受,那就可以进入下一个环节:
生态
以下内容均以各框架现在已发布稳定版为标准进行讨论。
开发工具
就开发工具而言uni-app应该是一骑绝尘,它的文档内容最为翔实丰富,还自带了IDE图形化开发工具,鼠标点点点就能编译测试发布。
其它的框架都是使用CLI命令行工具,但值得注意的是Chameleon有独立的语法检查工具,Taro则单独写了ESLint规则和规则集。
在语法支持方面,Mpvue、uni-app、Taro、WePY均支持TypeScript,四者也都能通过typing实现编辑器自动补全。
除了API补全之外,得益于TypeScript对于JSX的良好支持,Taro也能对组件进行自动补全。
CSS方面,所有框架均支持SASS、LESS、Stylus,Taro则多一个CSSModules的支持。
所以这一轮比拼的结果应该是:
uni-appTaroChameleonWePY、Mpvue
多端支持度
只从支持端的数量来看,Taro和uni-app以六端略微领先(移动端、H5、