Run vanilla JavaScript hello world in Weex

Just some initial steps I figured out about Weex runtime. Since Weex is based on Vue itself, the docs is still in progress, I have to figure out some of the details by myself.

In this post I'm going to run a basic demo without Vue. So this is not a Weex guide...

Preparations

You need somethings:

• Weex playground, which is basically an app with a View running Weex, with a QR code scanner. You can download it here: https://weex-project.io/cn/playground.html
• QR code generator is here http://www.qr-code-generator.com/
• A HTTP server. I use Nginx. Just make sure the phone can load the JavaScript file we wrote.

This playground is like a web browser.

Globals

I digged into the code:

https://github.com/alibaba/weex/blob/dev/html5/frameworks/legacy/app/ctrl/init.js#L109

const globalObjects = Object.assign({
  define: bundleDefine,
  require: bundleRequire,
  bootstrap: bundleBootstrap,
  register: bundleRegister,
  render: bundleRender,
  __weex_define__: bundleDefine, // alias for define
  __weex_bootstrap__: bundleBootstrap, // alias for bootstrap
  __weex_document__: bundleDocument,
  __weex_require__: bundleRequireModule,
  __weex_viewmodel__: bundleVm,
  weex: weexGlobalObject
}, timerAPIs, services)

I think it's not useful enough. But here are the gobals. Internally Weex is doing bundling itself so these are the APIs. More details on bundling can be found at:

https://github.com/alibaba/weex/tree/aaa3c7c2cc4189e6ecbf89905cb7f859a7fd433a/doc/specs

Vanilla

I tried a bit but luckily I found an example on about to run vanilla js in Weex.

https://github.com/alibaba/weex/blob/dev/examples/vanilla/index.js

var body = document.createElement('div', {
  classStyle: { alignItems: 'center', marginTop: 120 }
})

var text = document.createElement('text', {
  attr: { value: 'Hello World' },
  classStyle: { fontSize: 48 }
})

body.appendChild(text)
document.documentElement.appendChild(body)

finishCreate event

In the demo of Vanilla js, there's one more line of code to send events to notify that rendering is finished and it's ok to remove the loading icon. It looks like this:

sendTasks(id, [{ module: 'dom', method: 'createFinish', args: []}])

In the code, id is refering to document.id, but anyway there are two undefined functions. There are from the framework provided by Weex platform. It's written in Chinese does but not yet translated.

At the top of the file there's a comment line. Actually it's useful in telling the framework. It could be Vue, here it's Vanilla:

// { "framework": "Vanilla" }

Run the demo

Save file > Generate QR code from URL to the file > Scan in Weex!

The words now shows on screen. I use console.log to debug at first. I can find logs with:

adb logcat | grep jsengine

Weex comes with a debugger similar to React Native. Here we need to install weex-devtool from npm and run it:

weex-devtool

Follow the guides to open the debugger. I found the logs in Console. Good, it's working with things I'm familiar with.