WeChat mini programs — which development framework choose in 2018?
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.
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.
TL;DR:
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”)
📚Documentation: https://developers.weixin.qq.com/miniprogram/dev/index.html
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.
📚Documentation: https://github.com/tinajs/tina
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.
📚Documentation: https://github.com/Tencent/wepy
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.
📚Documentation: https://github.com/Meituan-Dianping/mpvue
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!
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.
📚Documentation: https://nervjs.github.io/taro/docs/README.html
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
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.
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
