Wechat mini program is an emerging technology ecosystem established less than two years ago. Thanks to the scale and speed of China’s technological development, the small program developer community of 1.5 million people has developed a very practical front-end development framework, which further improves the efficiency of small program development. (* Data source: Tencent – July 2018)

After holding two wechat developer conferences in China, we found that more and more entrepreneurial teams and individuals have a common question:

What is the best tool to make wechat mini program?

This article will attempt to answer this question.

Wechat Entrepreneurs and Developers Gathering Shanghai, China September 2018 –www.lewagon.com/zh-CN

There’s no question that in 2018, we need to release applets faster than we did the year before. The following frameworks provide faster speed and better interoperability for getting applets to market.

Let’s take a look at the options:

MINA, the default applets development framework

MINA, released by the wechat team in 2016, is the default development framework for wechat mini programs. It provides two view languages (WXML and WXSS), as well as a javascript-based logic layer. Data binding and built-in event listeners allow developers to focus on data processing and dynamic rendering of visual effects. The whole framework is very much inspired by VueJS and is relatively quick to learn. (We previously shared “How entrepreneurs Make their own wechat mini Programs” in this post.)

📚 technical guidelines: developers.weixin.qq.com/miniprogram…

While development of the MINA framework is far from mature, it attracts many developers with its large community, numerous online q&a and detailed update logs. Note: In August 2018, the wechat team introduced the framework’s NPM support and Cloud BaaS1.

TinaJS, “Take MINA to the Extreme”

TinaJS is one of the latest front-end frameworks released for applets. TinaJS borrows heavily from MINA’s design and extends its functionality, addressing some of the glitches in the workflow.

📚 Technical guide: github.com/tinajs/tina

What you’ll like about it:

  • If you already know the MINA API, using TinaJS is very simple

  • State management options: Redux in Tina-Redux or Tinax inspired by Vuex

  • The default Mina router has been extended with more elegant routing

  • Single file component/page

  • Well-written technical documentation

  • Unleashing the potential of Webpack, such as CSS preprocessors and other features

Cons: Although there are many great ideas in Tina’s designs, the MINA update could quickly close the gap and Tina no longer has an advantage.

WePy, a pioneer in the field

WePy, written by GCaufy, is an officially supported framework by Tencent. WePy is a pioneer of the applets framework, having appeared as early as 2016 when the beta version of wechat applets was released. Since then, hundreds of active contributors and a vibrant developer community have worked together through Github and wechat groups to shape WePY into a powerful toolkit.

📚 Technical Guide: github.com/Tencent/wep…

What you’ll like about it:

  • Development style like Vue

  • With nested, named slots, component props and other powerful components

  • Modern Javascript: Using Babel, the entire API is included in Promises

  • Use Node JS: A powerful build system that uses typescript, CSS preprocessors, HTML templates, and Node environment variables

  • Redux is supported for state management

  • Leverage open Source: The NPM workflow enables developers to leverage all resources on GitHub

  • A command line interface with Scaffolding

  • Cross-platform development: Available for Web and Alipay mini apps!

Faults: Few! WePy is easy to get started and is tightly integrated into all modern development processes.

Overall, code written using WePy performs better in terms of reusability, maintainability, performance, etc. Many people argue that this framework increases productivity and leads to better products!

MPVue: For VueJS developers

Meituan-dianping, a unicorn in China’s online group-buying space, released the open source framework around March 2018. As the name suggests, it has the added value of developing applets using vue.js, so they are written in a cross-platform language. With MPVue, you can use the Vue source code for Web or wechat applets development using Webpack. MPVue has been rapidly adopted by the wider vue.js community in China.

📚 Technical documentation: github.com/Meituan-Dia…

What you’ll like about it:

  • Not just a development style; MPVue uses the vue.js core!

  • VueJS developers like the “single file” design of Vue components

  • Support for NPM

  • From H5 (Web) to wechat applets, MPVue has the most advanced plug-in set to improve code reusability

Cons: This is a nascent framework with limited resources for technical documentation and q&A forums, so expect the MPVue team to catch up within the next six months.

Taro: For React developers

As the newest member of the wechat applet framework family, Taro is a front-end framework developed for the ReactJS community! Its main advantage is that developers can compile Web applications, wechat applets and even native apps with a single copy of the react. JS source code. This is MPVue’s biggest competitor.

📚 technical document: nervjs. Making. IO/taro/docs/R…

What you’ll like about it:

  • Inside the framework is the familiar React! Includes JSX, Redux state management and other components

  • Committed to providing full cross-platform development, although still in the early stages

  • Supports ES7/8 and later versions (configurable)

  • Includes CSS precompilers, such as Sass

  • Taro command line interface can speed up your workflow…… Such as:

$ taro build --type weapp --watch
$ taro build --type h5 --watch
Copy the code
  • You can use both Taro and MINA components in one code base

How to choose a development framework? Here’s Le Wagon’s advice…

First of all, MINA is the preferred framework for beginners in wechat development environment. Before you can start using any of the above open source solutions, you must first do a “basic” mini-program or two to understand what is available in the wechat development environment. Assuming that your applet has found a product-market niche and that you now need to distribute or maintain large amounts of source code, consider several of the advanced toolkits mentioned in this article.

1. If you want speed:

Consider using WePy to get things done quickly! Its CLI, open source components and development style will improve your productivity.

2. If you need interoperability:

If your team’s technology stack is VueJS, it is recommended to use VueJS. If React is more popular, use Taro. Obviously they’re not perfect yet, but there’s no doubt that their respective developer communities will push them to new heights in 2019.

By Thibault Genaitay

This article is original, all copyright belongs to the author. For commercial reprint please contact Thibault (at) Lewagon.org for permission. For non-commercial reprint please indicate your link and source.