小措施多端框架全面测评

小措施多端框架到底应该选哪个？

最近前端届多端框架频出，信托许多有代码多端运行需求的开拓者城市发生一些迷惑：这些框架都有什么优弱点？到底应该用哪个？

作为 Taro 开拓团队一员，笔者想在本文只管站在一个客观合理的角度去评价各个框架的选型和洽坏。但宥于好处相干，本文的概念很也许是带有方向性的，各人可以带着批驳的目光去对待，权当抛砖引玉。

那么，当我们在接头多端框架时，我们在评论什么：

多端

笔者觉得，此刻风行的多端框架可以大抵分为三类：

1. 全包型

这类框架最大的特点就是从底层的渲染引擎、机关引擎，到中层的 DSL，再到上层的框架所有由本身开拓，代表框架是 Qt 和 Flutter。这类框架利益很是明明：机能（的上限）高；各平台渲染功效同等。弱点也很是明明：必要完全从头进修 DSL（QML/Dart），以及难以适配中国特色的端：小措施。

这类框架是最原始也是最纯正的的多端开拓框架，因为底层到上层每个环节都把握在本技艺里，也能最大也许地去担保开拓和跨端体验同等。但它们的框架研发本钱庞大，渲染引擎、机关引擎、DSL、上层框架每个部门都必要大量人力开拓维护。

2. Web 技能型

这类框架把 Web 技能（JavaScript，CSS）带到移动开拓中，自研机关引擎处理赏罚 CSS，行使 JavaScript 写营业逻辑，行使风行的前端框架作为 DSL，各端别离行使各自的原生组件渲染。代表框架是 React Native 和 Weex，这样做的利益有：

1. 开拓敏捷
2. 复用前端生态
3. 易于进修上手，不管前端后端移动端，多几几何城市一点 JS、CSS

弱点有：

1. 交互伟大时难以写出高机能的代码，这类框架的计划就肯定导致 JS 和 Native 之间必要通讯，相同于手势操纵这样频仍地触发通讯就很也许使得 UI 无法在 16ms 内实时绘制。React Native 有一些声明式的组件可以停止这个题目，但声明式的写法很难满意伟大交互的需求。
2. 因为没有渲染引擎，行使各端的原生组件渲染，沟通代码渲染的同等性没有第一种高。

3. JavaScript 编译型

这类框架就是我们这篇文章的主角们：Taro、WePY 、uni-app 、 mpvue 、 chameleon，它们的道理也都大同小异：先以 JavaScript 作为基本选定一个 DSL 框架，以这个 DSL 框架为尺度在各端别离编译为差异的代码，各端别离有一个运行时框架或兼容组件库担保代码正确运行。

这类框架最大利益和缔造的最大缘故起因就是小措施，由于第一第二种框架着实除了可以跨体系平台之外，也都能编译运行在赏识器中。(Qt 有 Qt for WebAssembly, Flutter 有 Hummingbird，React Native 有 react-native-web, Weex 原生支持)

其它一个利益是在移动端一样平常会编译到 React Native/Weex，以是它们也都拥有 Web 技能型框架的利益。这看起来很柔美，但现实上 React Native/Weex 的弱点编译型框架也无法停止。除此之外，编译型框架的抽象也不是免费的：当 bug 呈现时，题目的来源也许出在运行时、编译时、组件库以及三者依靠的库等等各个方面。在 Taro 开源的进程中，我们就碰着过 Babel 的 bug，React Native 的 bug，JavaScript 引擎的 bug，虽然也少不了 Taro 自己的 bug。信托其余道理沟通的框架也无法停止这一题目。

但这并不料味着这类为了小措施而计划的多端框架就都不堪大用。起首此刻各巨头超等 App 的小措施百花齐放，框架会为了抹平小措施做了很多事变，这些事变在大部门环境下是不必要开拓者体谅的。其次是很多营业范例并不必要伟大的逻辑和交互，没那么轻易触发到框架底层依靠的 bug。

那么当你的营业得当选择编译型框架时，在笔者看来起主要思量的就是选择 DSL 的出发点。由于有多端需求营业凡是都但愿能快速开拓，一个可以或许快速顺应团队开拓节拍的 DSL 就至关重要。不管是 React 照旧 Vue（可能类 Vue）都有它们的优弱点，各人可以按照团队技能栈和偏好自行选择。

假如不管什么 DSL 都能接管，那就可以进入下一个环节：

以下内容均以各框架此刻（2019 年 3 月 11日）已宣布不变版为尺度举办接头。

开拓器材

就开拓器材而言 uni-app 应该是一骑绝尘，它的文档内容最为翔实富厚，还自带了 IDE 图形化开拓器材，，鼠标点点点就能编译测试宣布。

其余的框架都是行使 CLI 呼吁行器材，但值得留意的是 chameleon 有独立的语法搜查器材，Taro 则单独写了 ESLint 法则和法则集。

在语法支持方面，mpvue、uni-app、Taro 、WePY 均支持 TypeScript，四者也都能通过 typing 实现编辑器自动补全。除了 API 补全之外，得益于 TypeScript 对付 JSX 的精采支持，Taro 也能对组件举办自动补全。

CSS 方面，全部框架均支持 SASS、LESS、Stylus，Taro 则多一个 CSS Modules 的支持。

以是这一轮比拼的功效应该是：

uni-app > Taro > chameleon > WePY、mpvue

多端支持度

只从支持端的数目来看，Taro 和 uni-app 以六端略微领先（移动端、H5、微信小措施、百度小措施、付出宝小措施、头条小措施），chameleon 少了头条小措施紧随厥后。

但值得一提的是 chameleon 有一套自研多态协议，编写多端代码的体验会好很多，可以说是一个能戳到多端开拓痛点的成果。uni-app 则有一套独立的前提编译语法，这套语法能同时浸染于 js、样式和模板文件。Taro 可以在营业逻辑中按照情形变量行使前提编译，也可以直接行使前提编译文件（相同 React Native 的方法）。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!