Image for post
Image for post

WeChat mini programs — which development framework choose in 2018?

Thibault Genaitay
Oct 6, 2018 · 6 min read

Mini Programs (apps within the WeChat app) are a very young tech ecosystem: less than 2 years old! However, given China scale and China speed, its 1.5M developer’s community* already gave birth to useful front-end frameworks for additional productivity. (*claimed by Tencent in July 2018)

After hosting two WeChat developers meetups in China, an increasing number of startup teams and individuals have been reaching out and asked:

What are the best tools to build WeChat mini programs?

This article is an attempt to answer this question for everyone.

Image for post
Image for post
Meetup for WeChat entrepreneurs and developers in Shanghai, China (Sept 2018) —

No doubts, in 2018 we all had pressure to deliver Mini Programs faster than the year before. The frameworks below offer velocity and interoperability for a shorter go-to-market.

Let’s review our options.


Image for post
Image for post

MINA, the default MP framework

Released by the WeChat team in 2016, MINA is the default WeChat MP framework. It provides its own view languages named WXML and WXSS, as well as a JavaScript-based logical layer. Data binding and built-in event listeners allow developers to focus on manipulating data and rendering views dynamically. The whole framework is heavily inspired by VueJS and is very quick to pick up. (We previously shared here how “Entrepreneurs can build their own MPs”)

Image for post
Image for post
Tencent WeChat’s “MINA”


Although MINA is far from being stable, many developers will stick to it for its huge community, numerous online Q&A and its breathtaking changelog. Note: in August 2018, WeChat team finally introduced NPM support with this framework and a powerful Cloud BaaS service.

TinaJS, “MINA on steroids”

TinaJS is one of the most recent front-end frameworks released for Mini Programs. It takes heavily from MINA to extend its functionalities or close all the workflow gaps that remained to be addressed.

Image for post
Image for post, “MINA on steroids”


What you will like about it:

  • If you already know the MINA APIs, using TinaJS is a very simple step up.
  • State management options: Redux with Tina-Redux or Tinax taking from Vuex
  • Extend the default Mina router with more elegant routes
  • Single file component / page
  • Well written documentation
  • Unleash Webpack for all classic goodies such as CSS Preprocessors

Drawbacks: although there are many great ideas covered by Tina, MINA might close the gap rapidly and make Tina irrelevant.

WePy, the first mover

Authored by GCaufy, this framework is officially supported by Tencent. WePy (say “Wepee”) is the pioneer of its kind as it appeared back in 2016… during WeChat MP’s beta release. From then on, hundreds of active contributors and a very vibrant community through Github/WeChat groups helped to shape it to a robust toolkit.

Image for post
Image for post
WePy, the first mover in open-source MP frameworks, officially supported by Tencent


What you will like about it:

  • Its Vue development-style
  • Robust components with nesting, named slots, component props
  • Modern Javascript: Use Babel, Entire API wrapped in promises
  • Use Node JS: A powerful build system to use typescript, css preprocessors, html templating, node environment variables
  • Support Redux for state management
  • Leveraging open source: NPM workflow enabled to leverage all contributions on GitHub through WePy components
  • Great Command Line Interface with scaffolding
  • Build cross-platform: for Web and… Alipay mini apps!

Drawbacks: Very little to say! WePy is easy to pick up and relevant with all modern workflows.

Overall WePy leads to better code: reusability, maintainability, performance… Many believe this solution brings productivity and better products!

MPVue: for VueJS developers

Backed by another giant: Meituan-Dianping (online group buying unicorn) released this open-source framework around March 2018. As the name suggests, its added-value is to build Mini Programs using Vue.JS and therefore write cross-platform code. With MPVue, you can build 1 Vue source code into both Web or WeChat apps using Webpack. Not surprisingly, MPVue saw a quick adoption by the heavyweight Vue.JS community in China.

Image for post
Image for post
MPVue: made by and for the Vue.JS developers


What you will like about it:

  • More than just a development style; MPVue adopts the Vue.js core!
  • Vue component “single file” design VueJS developers love
  • NPM support
  • The most advanced set of plugins for code re-usability from H5 (Web) to WeChat apps!
Image for post
Image for post
Web app (left) // WeChat app (right) using MPVue source code

Drawbacks: a nascent framework with very little doc and Q&A forums yet, let’s give the team 6months to catch up?

Taro: for React developers

The latest addition to the gang: Taro is the MP front-end framework for the ReactJS community! Its main value-proposition: use your React.JS code to compile apps for Web, WeChat or even for native apps (react native!) with just 1 source code. This is the biggest competitor to MPVue.

Image for post
Image for post
Taro: for the React fans


What you will like about it:

  • Everything React inside! React components with JSX, Redux state management,
  • Complete cross-platform development is the main angle, although this is still early stage
  • Support for ES7/8 or even newer (configurable)
  • CSS precompilers like Sass
  • Taro Command Line Interface to speed up your workflow… e.g:
$ taro build --type weapp --watch 
$ taro build --type h5 --watch
  • You can use Taro components as well as MINA components in one code base
Image for post
Image for post

Which development framework should you use? Le Wagon’s take…

Let’s set things straight first: MINA is the go-to framework for anyone new to the WeChat tech environment. Before jumping on any of the open-source solutions above, you must build 1 or 2 “vanilla” Mini Programs first and get to know what they can do.

Now, assuming you’ve reached a product-market fit with your Mini Programs and you need to ship/maintain a large amount of source code, come in multiple advanced toolkits as reviewed here.

1. If you want velocity:

Consider WePy to get things done fast! Its CLI, open-source components and development style will boost your productivity.

2. If you need interoperability:

Select MPVue if your current tech stack is VueJS and Taro if your team works well with React. Obviously. They aren’t perfect solutions just yet, but no doubts their respective communities will push them higher by 2019.

Image for post
Image for post

Le Wagon is a coding school bringing technical skills to creative individuals in China. Rated 1st Coding Bootcamp worldwide, its Full Stack curriculum empowers participants to learn JavaScript and design WeChat Mini Programs from scratch.

Related links
👉 Entrepreneurs: learn how to make your own WeChat mini program
👉 Recruiters: WeChat developers for hire

Connect with our teams:
🚩 Le Wagon in Chengdu
🚩 Le Wagon in Shanghai
🚩 Le Wagon in Shenzhen

Image for post
Image for post

Le Wagon

Stories from our community on coding, product and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store