微信小程序开发框架对比 - Taro vs Remax

·  阅读 6556
微信小程序开发框架对比 - Taro vs Remax

综述

近期由于公司要开发微信小程序,因此对目前流行的小程序开发框架做了一些预研工作。

首先,目前流行的小程序开发框架主要有:

  • Taro(京东,React系,Taro3大改版后也支持Vue/Vue3,主打多平台小程序适配,以及H5、RN,大而全,希望对标Vue系的Uniapp,但感觉坑会不少)

  • Uniapp(QCloud,Vue系,早先集成了MpVue,主打一套代码,多端部署,支持各种小程序平台、H5、IOS、Android等,适合某些固定的业务场景,听说外包用的很多,滑稽脸~ )

  • Remax(蚂蚁,React系,专注于使用 React 技术栈开发小程序,尤其微信小程序,支持和微信小程序进行混合开发,意味着它几乎完美继承原生小程序的能力,且可复用小程序社区。对其他小程序平台也有Remax one的跨端适配支持,小而精,未来可期~)

  • MpVue(美团,Vue系,2年未维护,如果希望使用Vue开发小程序,选Uniapp吧~)

  • Wepy(官方,让小程序支持组件化开发的框架,目前已被其他框架大大超越,欢迎进入到历史书中...)

  • 原生开发(官方,能力相比最初已大幅加强,但无法使用 Vue 和 React 的技术栈是一大硬伤,小程序开发工具的开发体验也和我们熟悉的 VSCode 有差距)

通过对各个框架的初步了解和资料查阅,以及结合团队对于扩展技术栈的需求,重点选择React系的 TaroRemax进行对比,通过使用这两个框架分别实现 TodoList 示例,来对比两者的区别。

一、总体设计理念

【引自Remax官网】 Taro 3.0 版本的实现原理与 Remax 大同小异,没有太大的区别。主要区别在于以下两个方面:

  • 跨平台设计,我们深知要打造一个面面俱到的多平台框架会有非常多的坑,与其挖一个大坑填不上,我们选择把有限的精力放在框架的核心功能上,并提供跨平台同构机制以及一个精简的跨平台实现(Remax One),让开发者可以根据自己的业务需求去做跨平台实现。
  • 专注 React,因为 React 是我们自己大量使用和熟悉的前端框架,Remax 会持续专注在 React 技术栈。

二、对比维度

  1. 开发体验(Remax > Taro)
  2. 组件&API能力(Remax > Taro)
  3. 插件支持-less(均支持)
  4. 第三方小程序组件库支持(Remax > Taro)、
  5. 运行性能-虚拟列表(Remax > Taro)
  6. 打包大小(Taro > Remax)
  7. 维护情况/社区(Taro > Remax)

其他维度:

  • 多端适配:支持的多端适配(H5、多小程序平台、ReactNative)
  • 自定义组件编写是否方便?
  • 配置Webpack能力?
  • 全局数据状态管理

1、开发体验

  • 创建项目:均可不安装全局包,使用一行命令即可新建项目
    • Taro: npx @tarojs/cli init myApp
    • Remax: npx create-remax-app my-app
  • 创建项目速度: Remax 明显快于Taro,1min vs 3-5min
    • 得益于Remax仅安装核心库,十分小巧
    • Remax的初始项目一共仅包含 reactremax 两个包,相比之下,Taro一共有十几个包;
  • 代码检查:Taro自带eslint,而remax无提示,不过有代码提示,基本也没差
  • 代码调试:remax
  • 编译报错:咋个都不提示呢。。。特别是Taro,不支持Web标签,会白屏,但也没报错
  • Web标签支持:Remax会自动帮你将<div>转成<View>,不过还是不建议写<div>

2、组件&API能力:

1、均支持和小程序原生组件/API混合开发

2、但实现思路稍有不同,Remax小而精,Taro大而全

3、因为实现思路不同,调用时的开发体验也不同。Remax更统一,而Taro需区分组件和api,以及区分使用的小程序平台,分别通过不同的包引入

4、总体上,Remax对微信原生小程序的支持度更高,因为原生小程序是官方维护,因此坑更少

  • Remax
    • Remax/wechat 是微信小程序的组件库,基本可以完整使用原生小程序的能力,包括组件和API:import { View, Text, Image, navigateTo } from 'remax/wechat';

    • Remax/one 是可以兼容所有小程序平台的组件库,目前仅支持少量组件跨端,如 <Button> <Input> <View> <Text>

    • Remax 对小程序 API 做了简单的 Promise 封装,所有 API 通过平台对应的文件导出。

    • Remax使用小程序的API也需要遵守一定的规范:

      • 1、首字母大写与驼峰式命名,如小程序中的 <open-data> 需要改为 <OpenData>
      • 2、<Block>组件不可用,但Taro支持,原因未知。
  • Taro
    • 开发规范:支持使用原生小程序的组件和API
    • 1、通过 @tarojs/components 引入组件,如 <View> <Text> <OpenData>
    • 2、通过 @tarojs/taro 引入API,如 navigateTo, canIUse
    • 3、首字母大写与驼峰式命名
    • 4、组件的事件传递都要以 on 开头:在微信小程序中 bind 开头这样的用法,都需要转成以 on 开头的形式,比如 bindInput 要写成 onInput,这个用起来会有点烦,不如remax来的直接...

3、插件支持(less):

  • Remax
    • 默认不支持
    • 需安装插件@remax/plugin-less,参见使用插件
  • Taro
    • 默认支持

4、第三方小程序组件库支持

  • Remax 你可以在 React 组件中直接使用小程序的自定义组件。包括支持原生 UI 组件库,如:weui, min-ali-ui等等。

  • Taro 未知

5、运行性能(虚拟列表)

  • Remax
  • Taro
    • 官方库 @tarojs/components/virtual-list ,具体见 长列表渲染(虚拟列表)
    • 然而引入后运行实例时报错了,查了下需要开启小程序开发工具的增强编译(然而并没有找到该选项,只好暂时放弃了。。。)

6、打包大小

  • Remax(459KB)
    • remax-vendor.js 229kb
    • base.wxml 153kb
  • Taro(263KB)
    • taro.js 103kb
    • app.js 84kb
    • base.wxml 54kb

7、维护情况/社区

  • Remax 官方文档精简,相当克制,只放有用的信息
  • Taro 官方文档和社区内容丰富
  • 由于两者均支持原生小程序的混合开发,因此都可复用微信小程序的社区

三、综合评价

reamx 小而精 vs taro 大而杂

Remax小而精

  • 官方文档精简,相当克制,只放有用的信息
  • 项目依赖少,初始项目仅2个依赖包,创建时的打印信息精简,速度快,体验好。同时也提供了可扩展的能力,比如less插件的支持
  • 充分复用微信小程序组件和api,引入 remax/wechat 即可,仅做promise化。另外,兼容其他平台的部分使用了 Remax One ,和微信小程序解耦,对于只需开发微信小程序的用户来说,简单高效

Taro大而杂

  • 官方文档和社区内容丰富,还有自己的组件库TaroUI,看起来是搞大事的!
  • 初始项目即支持10几个平台的跨端打包命令,虽然我只想开发一个微信小程序而已~
  • @tarojs/component , @tarojs/taro 分别维护跨平台的组件和API,尽管如此,我只是想开发一个微信小程序而已~
  • 性能和打包这块,很明显有花精力做优化,打包后的小程序包很小,而且提供了 VirtualList 的组件库支持,很棒了~

Remax 思路清晰,未来可期

Taro 摊子铺的大,未来注定会很坎坷

经过和技术部的同事的讨论,最终确定用 Remax 来进行微信小程序的开发。 理由是团队中有人之前已经深度使用过 Remax 开发小程序,这个很重要,节省了不少趟坑的时间; 另外React+TS的开发模式也很香,期待一下下~

谢谢阅读,希望本文能对你有所帮助,也欢迎点赞和留言~

分类:
前端
收藏成功!
已添加到「」, 点击更改