[proposal] JS service layer

[Jinjiang]

To support extendable JS services for different app or business logics without updating JS framework itself and managing JavaScript memories better for all Weex instances.

Background

• Different apps has different requirements in JavaScript libs.
• Lots of JS bundles reuse the same JavaScript libs but can not be shared in runtime.
• Functions can not be passed into native. Currently we automatically convert function parameters into callback ids and then pass them into native. But for functions in a parameter object, it fails.
• Most JavaScript polyfills can not manage their memories well between different Weex instances. We always have to release some JS objects manually for them when a Weex instance destroyed.

Purpose

We can make a "service layer" in JavaScript runtime to solve these problems one time. Each JS service can inject some instance variables when such a Weex instance created in such a JS framework. And it can make hooks when the instance created, refreshed or destroyed.

Details

refs: WHATWG HTML Living Standard: 9.6 Broadcasting to other browsing contexts

Changes for Render Layer

(nothing to change)

Changes for JS Runtime

• Added runtime.service.register(name, config) and runtime.service.unregister(name) for runtime.
• Call hooks of each service when createInstance, refreshInstance and destroyInstance in JS runtime.
• Added a instanceObjects parameter in createInstance(id, code, config, data, serviceObjects) for each JS framework.
• Added each variables in instanceObjects to each Weex instance closure when createInstance by a JS framework.

Changes for Tools

• Make a tool or enhance current JS framework build config to concat services when build a JS framework for a certain App like Taobao, Qianniu etc.

Developer Experiences

In Weex JS runtime. We can call

runtime.service.register(serviceName, {
  /**
   * Optional.
   * Hook when a Weex instance created
   * @param  {string} id     Weex instance id
   * @param  {object} env    Weex environment object
   * @param  {object} config Weex instance config
   * @return {object}        The variables which should be injected
   *                         into the instane runtime
   */
  create: function (id, env, config) { ... },
  /**
   * Optional.
   * Hook when a Weex instance refreshed by native
   * @param  {string} id     Weex instance id
   * @param  {object} env    Weex environment object
   */
  refresh: function (id, env) { ... },
  /**
   * Optional.
   * Hook when a Weex instance destroyed
   * @param  {string} id     Weex instance id
   * @param  {object} env    Weex environment object
   */
  destroy: function (id, env) {...}
})

Notes

• We can rebuild (a better) BroadcastChannel polyfill and HTML5 Timer APIs with this.

[Jinjiang]

Additionally we can move native callback management from each framework to common runtime.

Here is a simple implementation https://github.com/Jinjiang/weex/blob/jsfm-feature-service/html5/runtime/callback-manager.js
and also we have rebuilt BroadcastChannel polyfill as a JS service https://github.com/Jinjiang/weex/blob/jsfm-feature-service/html5/services/broadcast-channel/index.js

[seajean]

Seems like it is a runtime hook, good to develope runtime plugin. But I can't get the idea how to register an lib and use it in the bundle code. Any example code?

[IskenHuang]

After our discussion today. Currently we hope the service concept can be register/unregister from native. Weex has only one runtime in app. If we lost any variable after destroy instance will be memory leak.

js bundle code example:

<script>
var Utils = new Services.utils()
module.exports = {
    created: function() {
        Utils.alert('Hello world~')
    }
}
</script>

Native register this code example

[WXSDKEngine registerService: @"SERVICE_NAME" withScript:@"JS_CODE" withOptions:@{ @"a": @"1" }  ];
[WXSDKEngine unregisterService: @"SERVICE_NAME"];

Native will exec this code to runtime. For example:

(function(service, options) {
    /* js service code here */
})({
    register: global.registerService, // register service
    unregister: global.unregisterService, // unregister service
}, {
    serviceName: 'SERVICE_NAME' // create from name code. this object can be extend from native
})

[seajean]

Codes shown above are not the codes I asked for, If I register a module call 'ABC',
I should be able to register something like
weex.regsiterModule('ABC');
and in my bundle code I should be able to use var my_module = require('ABC');

[IskenHuang]

@seajean
JS runtime and JS service are parallel. You can init each service in your instance like var my_module = new Services.ABC(). Don't needs to register this in bundle code.

[YorkShen]

This PR/issue doesn't receive response since Weex migrated to Apache two years ago and this repository is no longer active yet.

Feel free to ask question in new repository and thanks for your contribution.

[Hanks10100]

This issue is outdated for a long time and will be closed now. You can create a new one if you still have questions.