review

Recently because the company to develop wechat small program, so popular small program development framework to do some pre-research work.

First of all, the main popular applets development frameworks are:

  • Taro (JINGdong, React system, Taro3 after the big revision also support Vue/Vue3, mainly multi-platform small program adaptation, as well as H5, RN, large and complete, hope to standard Vue system Uniapp, but feel a lot of hole)

  • Uniapp (QCloud, Vue system, previously integrated MpVue, mainly a set of code, multi-terminal deployment, support a variety of small program platform, H5, IOS, Android, etc., suitable for some fixed business scenarios, I heard that a lot of outsource, face.)

  • Remax (Ant, React system, focuses on using React technology stack to develop small programs, especially wechat small program, support mixed development with wechat small program, which means that it almost perfectly inherits the ability of native small program, and can reuse small program community. Remax One cross-adaption support is also available for other small application platforms.

  • MpVue (Meituan, Vue system, 2 years of maintenance, if you want to use Vue development small program, choose Uniapp bar ~)

  • Wepy (official, the framework for componentized development of small programs, which has been greatly surpassed by other frameworks, welcome to the history books…)

  • Native development (officially, the capabilities have been greatly enhanced compared to the original, but the inability to use Vue and React stack is a major setback, and the development experience of small program development tools is not as familiar as VSCode)

Based on the preliminary understanding and data review of each framework, as well as the team’s requirements for expanding the technology stack, Taro and Remax of the React system are selected for comparison, and the differences between the two frameworks are compared by implementing the TodoList example respectively.

  • todolist-remax
  • todolist-taro

I. Overall design concept

Taro 3.0 is implemented in much the same way as Remax. The main differences lie in the following two aspects:

  • Cross-platform design, we know that there are a lot of holes in creating a comprehensive multi-platform framework. Rather than digging a hole that we can’t fill, we chose to focus our limited efforts on the core features of the framework and provide cross-platform isomorphism and a streamlined cross-platform implementation (Remax One). Allow developers to do cross-platform implementations based on their business needs.
  • Remax will continue to focus on the React stack, since React is our own heavily used and familiar front-end framework.

Second, comparative dimensions

  1. Development Experience (Remax > Taro)
  2. Components &API Capabilities (Remax > Taro)
  3. Plugin support -less (both supported)
  4. Third-party applets component library support (Remax > Taro),
  5. Performance – Virtual List (Remax > Taro)
  6. Package size (Taro > Remax)
  7. Maintenance status/Community (Taro > Remax)

Other dimensions:

  • Multi-endpoint adaptation: Supported multi-endpoint adaptation (H5, Multi-applets platform, ReactNative)
  • Is it easy to write custom components?
  • Configuring Webpack capabilities?
  • Global data state management

1. Development experience

  • Create a project: you can create a project with a single command without installing the global package
    • Taro:npx @tarojs/cli init myApp
    • Remax: npx create-remax-app my-app
  • Project creation speed: Remax is significantly faster than Taro, 1min vs. 3-5min
    • Remax is small because it only installs core libraries
    • The initial project for Remax contains onlyreact 和 remaxTwo bags, compared to Taro’s dozen or so.
  • Code check: Taro comes with ESLint, and remax does not have a prompt, but the code prompt is basically the same
  • Code debugging: remax
  • Compilation error: no warning at all… Taro, in particular, does not support Web tagging and will display a blank screen, but no error was reported
  • Web tagging support: Remax will help you automatically<div>into<View>But I don’t recommend it<div>

2. Components &API Capabilities:

1, all support and small program native components /API mixed development

2, but the idea is slightly different, Remax small and fine, Taro big and complete

3, because of the different implementation ideas, the development experience is also different when calling. While Remax is more unified, Taro needs to differentiate between components and apis, as well as the applets used, introduced in different packages

4. In general, Remax has higher support for wechat native small programs, because native small programs are officially maintained, so there are fewer pits

  • Remax

    • Import {View, Text, Image, navigateTo} from ‘Remax/wechat ‘; import {View, Text, Image, navigateTo} from’ Remax/wechat ‘;

    • Remax/ One is compatible with all small program platform component library, currently only supports a small number of components cross-end, such as

    • Remax makes a simple Promise wrapper around the applets’ apis, all of which are exported via platform-appropriate files.

    • Remax’s API for using applets also follows certain specifications:

      • 1, capital and camel name, such as in the small program<open-data>Need to<OpenData>
      • 2,<Block> The component is not available, but Taro supports it, for reasons unknown.
  • Taro
    • Development specification: Support components and apis that use native applets
    • 1, through the@tarojs/componentsImporting components, such as<View> <Text> <OpenData> 等
    • 2, through the@tarojs/taroIntroduction of the API, such asnavigateTo.canIUse 等
    • 3, capital letters and camel naming
    • 4. Component events should be passed withonBeginning: in wechat mini programbindThe use of “beginning” should be changed to “beginning”onThe opening form, for examplebindInputTo be writtenonInputThis is a bit annoying to use, not as direct as Remax.

3. Plug-in support (less) :

  • Remax
    • Not supported by default
    • Plug-in required@remax/plugin-less, seeThe use of plug-in
  • Taro
    • The default support

4, third party small program component library support

  • Remax

You can use custom components of the applet directly in the React component. Includes support for native UI component libraries, such as WeUI, Min-Ali-UI, and so on.

  • Taro

The unknown

5. Running Performance (Virtual List)

  • Remax
    • The third-party library remax-virutal-list
  • Taro
    • The official library@tarojs/components/virtual-list, specific seeLong list Rendering (virtual List)
    • However, after the introduction of the running instance, the error was reported, so I checked the need to enable the enhanced compilation of the applets development tool (however, I did not find this option, so I temporarily abandoned it…).

6. Pack size

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

7. Maintenance/community

  • Remax’s official documentation is lean, fairly restrained, and only contains useful information
  • The official documents and communities of Taro are rich in content
  • Since both support mixed development of native applets, both can reuse the wechat applets community

3. Comprehensive evaluation

Reamx is small and refined vs. taro is large and miscellaneous

Remax is small but refined:

  • Official documentation is lean and restrained, with only useful information
  • The project has few dependencies. The initial project has only two dependency packages. The printing information is simplified, fast and the experience is good. It also provides extensible capabilities, such as support for the Less plug-in
  • Fully reuse wechat small program components and API, introducedremax/wechatOk, just make promise. In addition, compatible parts of other platforms are usedRemax OneDecoupled from wechat applets, simple and efficient for users who only need to develop wechat applets

Taro is large and miscellaneous:

  • Rich in official documentation and community content, and with its own component library, TaroUI, it looks like something big!
  • The initial project is to support more than 10 platforms of cross-side packaging commands, although I just want to develop a small wechat program ~
  • @tarojs/component , @tarojs/taroMaintain cross-platform components and apis, however, I just want to develop a small wechat program
  • Performance and packaging, obviously a lot of work has been done to optimize the package. The package is small and provides VirtualList component library support, which is great

Remax has a clear mind and a predictable future

Taro’s sprawling business is bound to face a bumpy future

After discussion with colleagues in the technology department, we finally decided to use Remax to develop small programs for wechat. The reason was that someone on the team had already used Remax extensively to develop applets, which was important and saved a lot of time. React+TS development mode is also very interesting

Thanks for reading and I hope you found this article helpful. Feel free to like it and leave a comment