Le Wagon
Published in

Le Wagon

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.

Meetup for WeChat entrepreneurs and developers in Shanghai, China (Sept 2018) — www.lewagon.com

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”)

Tencent WeChat’s “MINA”

📚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.

Tina.JS.org, “MINA on steroids”

📚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.

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

📚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.

MPVue: made by and for the Vue.JS developers

📚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!
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.

Taro: for the React fans

📚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

--

--

--

Stories from our community on coding, product and entrepreneurship.

Recommended from Medium

10 New Things I Learn Today About JavaScript

Pass data or event from a child component to parent component in both functional and class…

Rest and Spread in JavaScript

Fetching from front-end to back-end using API.

React Native, React Web and Expo-Together in One Monorepo

react native, react web and expo-together in one monorepo

Creating a React — Firebase Context with Social media authentications.

How to use Ant Design Step in SharePoint Framework (SPFx)

React Environment Variables

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
Thibault Genaitay

Thibault Genaitay

Bringing tech skills to creative people, one bootcamp at a time.

More from Medium

My journey through web designing

How to Deploy a Theme From GitHub to Your Ghost Blog (With Secrets)

Level Up Your MongoDB Query Skills II

Pros & Cons Of Ember Engines