The State of Weex: an inaccurate and outdated report

Disclaimer: This is what we know as of 28th February 2017 and will soon (hopefully) be even more inaccurate and outdated!

A few weeks ago I decided I wanted to fiddle with Weex, A framework for building Mobile cross-platform UI with Vue.js. The project promises a lot:

Write Once Run Everywhere: Weex provides the ability to cross platform, such as the web, Android and IOS can use the same API development function.

Weex is currently being actively developed mostly by Alibaba’s dev team, which is great because they are huge! Unfortunately, this also means that most of the documentation and discussions in Git or Gitter are written in chinese… Also, most of the docs are behind the actual development stage of the project.

That’s why I am pretty sure this report is both inaccurate and outdated. So… why would you want to read this? Because, unless you read Chinese, this is the best report you’ll get!

How to create a Weex app?

Some weeks ago, weexteam released a weex-hackernews with everything you would expect from Weex: a project with the same code running on web, Android and iOS. And it worked! I was able to make a build for all the platforms and even collected some evidence that it used real native components for both Android and iOS:

So how could I create one app like that? Should be an easy question, right? Just look at the “Getting Started” section of the docs, yes? Nop…

The official documentation tells us to use weex-toolkit, except that when you use it, it does not create the Android/iOS boilerplate.

There is also weex-pack, the “next generation of engineering development kits” that “helps to setup weex application from scratch quickly”. This tool offers CLI commands similar to Cordova (i.e. add/remove platform). Unfortunately, it creates a project for a previous version of Weex, one that doesn’t really use Vue 2.0.

It seems like there is no way to build an app like weex-hackernews from scratch. Evan You mentioned a new Weex vue-cli template which means that soon we will be able to start a Weex project with vue-init weex my-project.

Since I couldn’t wait, I created a Weex Todo app by grabbing the hackernews app and hacking the hell out of it.

This is what I learned about development with Weex.

Development with Weex

For the most part, everything works as you would expect. The Vue code runs well in the native environment, once you get around the following caveats:

There is no DOM in native

• Events don’t bubble up like in HTML5. (Good! No preventDefault().)
• You can’t simply query the DOM to get an element. (It forces you to have stronger references to the UI elements, which is a good practice anyway!)
• CSS classes don’t cascade to child elements. Also toggling classes doesn’t work. Changing the :style directive dynamically does work.
• Weex implements a subset of box model and flexbox layout. Not all flexbox properties will work exactly the same way in native as in the browser.
• You don’t have all HTML5 APIs. For instance, instead of localStorage I had to use the weex storage module.
• There are some inconsistencies between all platforms. If you compare the iOS demo with the Android demo, you’ll see some misalignments inside the buttons.

For more information about these differences, check out this page (Google Chrome’s translation will be your friend).

Other than that, it was straight Vue.js development. I used vue-router ,vuex and other external javascript libs with no problem.

Lack of dev/debug tools for native platforms

While developing in the browser I could use the regular Vue tools, but once the app was running in the native environment I couldn’t find a way to debug the javascript nor the UI.

Give it some time!

Weex is still a bit far from its initial goal of “Write Once Run Everywhere”, but I know it will get there. Why?

• Vue.js is growing fast and getting close to React. In the same way, Weex will get closer to React Native in community and support.
• Weex’s goal of “Write Once Run Everywhere” is more compelling for the web developer than React Native’s “Learn Once, Write Anywhere”. Some hindrances aside, I built an app that runs on web, android and iOS with the same code!
• Evan You is actively involved with Weex and I have no doubt he will make Weex more “open” to the open source community outside China.

Is Weex something to keep an eye on? Absolutely! Would I start a real-world project with Weex right now? Absolutely not! Not yet…

Nevertheless, I will be very happy to see this report be even more inaccurate and outdated in a couple of weeks…

I would also be very happy if someone would tell how inaccurate and outdated this is! If you can, please leave a comment. I would love to learn more!