diff --git a/doric-js/bundle/doric-lib.es5.js b/doric-js/bundle/doric-lib.es5.js
index 8308e830..e3e615d8 100644
--- a/doric-js/bundle/doric-lib.es5.js
+++ b/doric-js/bundle/doric-lib.es5.js
@@ -205,6 +205,9 @@ var View = /** @class */ (function () {
         return id;
     };
     View.prototype.id2Callback = function (id) {
+        if (this.callbacks === undefined) {
+            this.callbacks = new Map;
+        }
         var f = this.callbacks.get(id);
         if (f === undefined) {
             f = Reflect.get(this, id);
@@ -345,7 +348,6 @@ var View = /** @class */ (function () {
         var thisView = this;
         return function (args) {
             if (args === void 0) { args = undefined; }
-            var func = context.shader.command;
             var viewIds = [];
             while (thisView != undefined) {
                 viewIds.push(thisView.viewId);
@@ -356,7 +358,7 @@ var View = /** @class */ (function () {
                 name: name,
                 args: args,
             };
-            return Reflect.apply(func, undefined, [params]);
+            return context.callNative('shader', 'command', params);
         };
     };
     View.prototype.getWidth = function (context) {
@@ -418,10 +420,6 @@ var View = /** @class */ (function () {
         Property,
         __metadata("design:type", Boolean)
     ], View.prototype, "hidden", void 0);
-    __decorate([
-        Property,
-        __metadata("design:type", Object)
-    ], View.prototype, "viewId", void 0);
     __decorate([
         Property,
         __metadata("design:type", Object)
@@ -2441,29 +2439,29 @@ function modal(context) {
     return {
         toast: function (msg, gravity) {
             if (gravity === void 0) { gravity = Gravity.Bottom; }
-            context.modal.toast({
+            context.callNative('modal', 'toast', {
                 msg: msg,
                 gravity: gravity.toModel(),
             });
         },
         alert: function (arg) {
             if (typeof arg === 'string') {
-                return context.modal.alert({ msg: arg });
+                return context.callNative('modal', 'alert', { msg: arg });
             }
             else {
-                return context.modal.alert(arg);
+                return context.callNative('modal', 'alert', arg);
             }
         },
         confirm: function (arg) {
             if (typeof arg === 'string') {
-                return context.modal.confirm({ msg: arg });
+                return context.callNative('modal', 'confirm', { msg: arg });
             }
             else {
-                return context.modal.confirm(arg);
+                return context.callNative('modal', 'confirm', arg);
             }
         },
         prompt: function (arg) {
-            return context.modal.prompt(arg);
+            return context.callNative('modal', 'prompt', arg);
         },
     };
 }
@@ -2476,36 +2474,30 @@ function navbar(context) {
     }
     return {
         isHidden: function () {
-            return context.navbar.isHidden();
+            return context.callNative('navbar', 'isHidden');
         },
         setHidden: function (hidden) {
-            return context.navbar.setHidden({
-                hidden: hidden,
-            });
+            return context.callNative('navbar', 'setHidden', { hidden: hidden, });
         },
         setTitle: function (title) {
-            return context.navbar.setTitle({
-                title: title,
-            });
+            return context.callNative('navbar', 'setTitle', { title: title, });
         },
         setBgColor: function (color) {
-            return context.navbar.setBgColor({
-                color: color.toModel(),
-            });
+            return context.callNative('navbar', 'setBgColor', { color: color.toModel(), });
         },
         setLeft: function (view) {
             if (panel) {
                 panel.clearHeadViews("navbar_left");
                 panel.addHeadView("navbar_left", view);
             }
-            return context.navbar.setLeft(view.toModel());
+            return context.callNative('navbar', 'setLeft', view.toModel());
         },
         setRight: function (view) {
             if (panel) {
                 panel.clearHeadViews("navbar_right");
                 panel.addHeadView("navbar_right", view);
             }
-            return context.navbar.setRight(view.toModel());
+            return context.callNative('navbar', 'setRight', view.toModel());
         }
     };
 }
@@ -2516,13 +2508,13 @@ function navigator(context) {
             if (config && config.extra) {
                 config.extra = JSON.stringify(config.extra);
             }
-            return context.navigator.push({
+            return context.callNative('navigator', 'push', {
                 scheme: scheme, config: config
             });
         },
         pop: function (animated) {
             if (animated === void 0) { animated = true; }
-            return context.navigator.pop({ animated: animated });
+            return context.callNative('navigator', 'pop', { animated: animated });
         },
     };
 }
@@ -2544,7 +2536,7 @@ function transformRequest(request) {
 function network(context) {
     return {
         request: function (config) {
-            return context.network.request(transformRequest(config));
+            return context.callNative('network', 'request', transformRequest(config));
         },
         get: function (url, config) {
             var finalConfig = config;
@@ -2553,7 +2545,7 @@ function network(context) {
             }
             finalConfig.url = url;
             finalConfig.method = "get";
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         post: function (url, data, config) {
             var finalConfig = config;
@@ -2565,7 +2557,7 @@ function network(context) {
             if (data !== undefined) {
                 finalConfig.data = data;
             }
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         put: function (url, data, config) {
             var finalConfig = config;
@@ -2577,7 +2569,7 @@ function network(context) {
             if (data !== undefined) {
                 finalConfig.data = data;
             }
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         delete: function (url, data, config) {
             var finalConfig = config;
@@ -2586,7 +2578,7 @@ function network(context) {
             }
             finalConfig.url = url;
             finalConfig.method = "delete";
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
     };
 }
@@ -2594,16 +2586,16 @@ function network(context) {
 function storage(context) {
     return {
         setItem: function (key, value, zone) {
-            return context.storage.setItem({ key: key, value: value, zone: zone });
+            return context.callNative('storage', 'setItem', { key: key, value: value, zone: zone });
         },
         getItem: function (key, zone) {
-            return context.storage.getItem({ key: key, zone: zone });
+            return context.callNative('storage', 'getItem', { key: key, zone: zone });
         },
         remove: function (key, zone) {
-            return context.storage.remove({ key: key, zone: zone });
+            return context.callNative('storage', 'remove', { key: key, zone: zone });
         },
         clear: function (zone) {
-            return context.storage.clear({ zone: zone });
+            return context.callNative('storage', 'clear', { zone: zone });
         },
     };
 }
@@ -2619,7 +2611,7 @@ function popover(context) {
             if (panel) {
                 panel.addHeadView("popover", view);
             }
-            return context.popover.show(view.toModel());
+            return context.callNative('popover', 'show', view.toModel());
         },
         dismiss: function (view) {
             if (view === void 0) { view = undefined; }
@@ -2631,7 +2623,7 @@ function popover(context) {
                     panel.clearHeadViews("popover");
                 }
             }
-            return context.popover.dismiss(view ? { id: view.viewId } : undefined);
+            return context.callNative('popover', 'dismiss', view ? { id: view.viewId } : undefined);
         },
     };
 }
@@ -2699,6 +2691,42 @@ function repeat(action) {
     };
 }
 
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) { throw t[1]; } return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) { throw new TypeError("Generator is already executing."); }
+        while (_) { try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) { return t; }
+            if (y = 0, t) { op = [op[0] & 2, t.value]; }
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) { _.ops.pop(); }
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } }
+        if (op[0] & 5) { throw op[1]; } return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __values$4 = (undefined && undefined.__values) || function(o) {
     var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
     if (m) { return m.call(o); }
@@ -2715,57 +2743,61 @@ var __values$4 = (undefined && undefined.__values) || function(o) {
  * @param panel @see Panel
  */
 function animate(context) {
+    var _this = this;
     var entity = context.entity;
     if (entity instanceof Panel) {
         var panel_1 = entity;
-        return function (args) {
-            return takeLet(panel_1.context.animate)(function (it) {
-                return it.submit().then(function () {
-                    args.animations();
-                    return takeLet(panel_1.getRootView())(function (root) {
-                        var e_1, _a, e_2, _b;
-                        if (root.isDirty()) {
-                            var model = root.toModel();
-                            model.duration = args.duration;
-                            var ret = it.animateRender(model);
-                            root.clean();
-                            return ret;
-                        }
-                        try {
-                            for (var _c = __values$4(panel_1.allHeadViews()), _d = _c.next(); !_d.done; _d = _c.next()) {
-                                var map = _d.value;
+        return function (args) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, context.callNative('animate', 'submit')];
+                    case 1:
+                        _a.sent();
+                        args.animations();
+                        return [2 /*return*/, takeLet(panel_1.getRootView())(function (root) {
+                                var e_1, _a, e_2, _b;
+                                if (root.isDirty()) {
+                                    var model = root.toModel();
+                                    model.duration = args.duration;
+                                    var ret = context.callNative('animate', 'animateRender', model);
+                                    root.clean();
+                                    return ret;
+                                }
                                 try {
-                                    for (var _e = (e_2 = void 0, __values$4(map.values())), _f = _e.next(); !_f.done; _f = _e.next()) {
-                                        var v = _f.value;
-                                        if (v.isDirty()) {
-                                            var model = v.toModel();
-                                            var ret = it.animateRender(model);
-                                            it.clean();
-                                            return ret;
+                                    for (var _c = __values$4(panel_1.allHeadViews()), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                        var map = _d.value;
+                                        try {
+                                            for (var _e = (e_2 = void 0, __values$4(map.values())), _f = _e.next(); !_f.done; _f = _e.next()) {
+                                                var v = _f.value;
+                                                if (v.isDirty()) {
+                                                    var model_1 = v.toModel();
+                                                    var ret_1 = context.callNative('animate', 'animateRender', model_1);
+                                                    v.clean();
+                                                    return ret_1;
+                                                }
+                                            }
+                                        }
+                                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                                        finally {
+                                            try {
+                                                if (_f && !_f.done && (_b = _e.return)) { _b.call(_e); }
+                                            }
+                                            finally { if (e_2) { throw e_2.error; } }
                                         }
                                     }
                                 }
-                                catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                                 finally {
                                     try {
-                                        if (_f && !_f.done && (_b = _e.return)) { _b.call(_e); }
+                                        if (_d && !_d.done && (_a = _c.return)) { _a.call(_c); }
                                     }
-                                    finally { if (e_2) { throw e_2.error; } }
+                                    finally { if (e_1) { throw e_1.error; } }
                                 }
-                            }
-                        }
-                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                        finally {
-                            try {
-                                if (_d && !_d.done && (_a = _c.return)) { _a.call(_c); }
-                            }
-                            finally { if (e_1) { throw e_1.error; } }
-                        }
-                        throw new Error('Cannot find any animated elements');
-                    });
-                });
+                                throw new Error('Cannot find any animated elements');
+                            })];
+                }
             });
-        };
+        }); };
     }
     else {
         return function (args) {
@@ -2780,15 +2812,15 @@ function notification(context) {
             if (args.data !== undefined) {
                 args.data = JSON.stringify(args.data);
             }
-            return context.notification.publish(args);
+            return context.callNative('notification', 'publish', args);
         },
         subscribe: function (args) {
             args.callback = context.function2Id(args.callback);
-            return context.notification.subscribe(args);
+            return context.callNative('notification', 'subscribe', args);
         },
         unsubscribe: function (subscribeId) {
             context.removeFuncById(subscribeId);
-            return context.notification.unsubscribe(subscribeId);
+            return context.callNative('notification', 'unsubscribe', subscribeId);
         }
     };
 }
@@ -2800,13 +2832,13 @@ function notification(context) {
 function statusbar(context) {
     return {
         setHidden: function (hidden) {
-            return context.statusbar.setHidden({ hidden: hidden });
+            return context.callNative('statusbar', 'setHidden', { hidden: hidden });
         },
         setMode: function (mode) {
-            return context.statusbar.setMode({ mode: mode });
+            return context.callNative('statusbar', 'setMode', { mode: mode });
         },
         setColor: function (color) {
-            return context.statusbar.setColor({ color: color.toModel() });
+            return context.callNative('statusbar', 'setColor', { color: color.toModel() });
         },
     };
 }
diff --git a/doric-js/bundle/doric-lib.js b/doric-js/bundle/doric-lib.js
index eeabf356..8394c036 100644
--- a/doric-js/bundle/doric-lib.js
+++ b/doric-js/bundle/doric-lib.js
@@ -264,7 +264,6 @@ class View {
     nativeChannel(context, name) {
         let thisView = this;
         return function (args = undefined) {
-            const func = context.shader.command;
             const viewIds = [];
             while (thisView != undefined) {
                 viewIds.push(thisView.viewId);
@@ -275,7 +274,7 @@ class View {
                 name,
                 args,
             };
-            return Reflect.apply(func, undefined, [params]);
+            return context.callNative('shader', 'command', params);
         };
     }
     getWidth(context) {
@@ -337,10 +336,6 @@ __decorate([
     Property,
     __metadata("design:type", Boolean)
 ], View.prototype, "hidden", void 0);
-__decorate([
-    Property,
-    __metadata("design:type", Object)
-], View.prototype, "viewId", void 0);
 __decorate([
     Property,
     __metadata("design:type", Object)
@@ -1819,29 +1814,29 @@ function draggable(views, config) {
 function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
-            context.modal.toast({
+            context.callNative('modal', 'toast', {
                 msg,
                 gravity: gravity.toModel(),
             });
         },
         alert: (arg) => {
             if (typeof arg === 'string') {
-                return context.modal.alert({ msg: arg });
+                return context.callNative('modal', 'alert', { msg: arg });
             }
             else {
-                return context.modal.alert(arg);
+                return context.callNative('modal', 'alert', arg);
             }
         },
         confirm: (arg) => {
             if (typeof arg === 'string') {
-                return context.modal.confirm({ msg: arg });
+                return context.callNative('modal', 'confirm', { msg: arg });
             }
             else {
-                return context.modal.confirm(arg);
+                return context.callNative('modal', 'confirm', arg);
             }
         },
         prompt: (arg) => {
-            return context.modal.prompt(arg);
+            return context.callNative('modal', 'prompt', arg);
         },
     };
 }
@@ -1854,36 +1849,30 @@ function navbar(context) {
     }
     return {
         isHidden: () => {
-            return context.navbar.isHidden();
+            return context.callNative('navbar', 'isHidden');
         },
         setHidden: (hidden) => {
-            return context.navbar.setHidden({
-                hidden,
-            });
+            return context.callNative('navbar', 'setHidden', { hidden, });
         },
         setTitle: (title) => {
-            return context.navbar.setTitle({
-                title,
-            });
+            return context.callNative('navbar', 'setTitle', { title, });
         },
         setBgColor: (color) => {
-            return context.navbar.setBgColor({
-                color: color.toModel(),
-            });
+            return context.callNative('navbar', 'setBgColor', { color: color.toModel(), });
         },
         setLeft: (view) => {
             if (panel) {
                 panel.clearHeadViews("navbar_left");
                 panel.addHeadView("navbar_left", view);
             }
-            return context.navbar.setLeft(view.toModel());
+            return context.callNative('navbar', 'setLeft', view.toModel());
         },
         setRight: (view) => {
             if (panel) {
                 panel.clearHeadViews("navbar_right");
                 panel.addHeadView("navbar_right", view);
             }
-            return context.navbar.setRight(view.toModel());
+            return context.callNative('navbar', 'setRight', view.toModel());
         }
     };
 }
@@ -1894,12 +1883,12 @@ function navigator(context) {
             if (config && config.extra) {
                 config.extra = JSON.stringify(config.extra);
             }
-            return context.navigator.push({
+            return context.callNative('navigator', 'push', {
                 scheme, config
             });
         },
         pop: (animated = true) => {
-            return context.navigator.pop({ animated });
+            return context.callNative('navigator', 'pop', { animated });
         },
     };
 }
@@ -1921,7 +1910,7 @@ function transformRequest(request) {
 function network(context) {
     return {
         request: (config) => {
-            return context.network.request(transformRequest(config));
+            return context.callNative('network', 'request', transformRequest(config));
         },
         get: (url, config) => {
             let finalConfig = config;
@@ -1930,7 +1919,7 @@ function network(context) {
             }
             finalConfig.url = url;
             finalConfig.method = "get";
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         post: (url, data, config) => {
             let finalConfig = config;
@@ -1942,7 +1931,7 @@ function network(context) {
             if (data !== undefined) {
                 finalConfig.data = data;
             }
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         put: (url, data, config) => {
             let finalConfig = config;
@@ -1954,7 +1943,7 @@ function network(context) {
             if (data !== undefined) {
                 finalConfig.data = data;
             }
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         delete: (url, data, config) => {
             let finalConfig = config;
@@ -1963,7 +1952,7 @@ function network(context) {
             }
             finalConfig.url = url;
             finalConfig.method = "delete";
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
     };
 }
@@ -1971,16 +1960,16 @@ function network(context) {
 function storage(context) {
     return {
         setItem: (key, value, zone) => {
-            return context.storage.setItem({ key, value, zone });
+            return context.callNative('storage', 'setItem', { key, value, zone });
         },
         getItem: (key, zone) => {
-            return context.storage.getItem({ key, zone });
+            return context.callNative('storage', 'getItem', { key, zone });
         },
         remove: (key, zone) => {
-            return context.storage.remove({ key, zone });
+            return context.callNative('storage', 'remove', { key, zone });
         },
         clear: (zone) => {
-            return context.storage.clear({ zone });
+            return context.callNative('storage', 'clear', { zone });
         },
     };
 }
@@ -1996,7 +1985,7 @@ function popover(context) {
             if (panel) {
                 panel.addHeadView("popover", view);
             }
-            return context.popover.show(view.toModel());
+            return context.callNative('popover', 'show', view.toModel());
         },
         dismiss: (view = undefined) => {
             if (panel) {
@@ -2007,7 +1996,7 @@ function popover(context) {
                     panel.clearHeadViews("popover");
                 }
             }
-            return context.popover.dismiss(view ? { id: view.viewId } : undefined);
+            return context.callNative('popover', 'dismiss', view ? { id: view.viewId } : undefined);
         },
     };
 }
@@ -2075,21 +2064,15 @@ function repeat(action) {
     };
 }
 
-/*
- * Copyright [2019] [Doric.Pub]
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  * Only supports x,y,width,height,corner(just for four corners),rotation,bgColor,
  * @param panel @see Panel
@@ -2098,33 +2081,30 @@ function animate(context) {
     const entity = context.entity;
     if (entity instanceof Panel) {
         let panel = entity;
-        return (args) => {
-            return takeLet(panel.context.animate)(it => {
-                return it.submit().then(() => {
-                    args.animations();
-                    return takeLet(panel.getRootView())(root => {
-                        if (root.isDirty()) {
-                            const model = root.toModel();
-                            model.duration = args.duration;
-                            const ret = it.animateRender(model);
-                            root.clean();
-                            return ret;
+        return (args) => __awaiter(this, void 0, void 0, function* () {
+            yield context.callNative('animate', 'submit');
+            args.animations();
+            return takeLet(panel.getRootView())(root => {
+                if (root.isDirty()) {
+                    const model = root.toModel();
+                    model.duration = args.duration;
+                    const ret = context.callNative('animate', 'animateRender', model);
+                    root.clean();
+                    return ret;
+                }
+                for (let map of panel.allHeadViews()) {
+                    for (let v of map.values()) {
+                        if (v.isDirty()) {
+                            const model_1 = v.toModel();
+                            const ret_1 = context.callNative('animate', 'animateRender', model_1);
+                            v.clean();
+                            return ret_1;
                         }
-                        for (let map of panel.allHeadViews()) {
-                            for (let v of map.values()) {
-                                if (v.isDirty()) {
-                                    const model = v.toModel();
-                                    const ret = it.animateRender(model);
-                                    it.clean();
-                                    return ret;
-                                }
-                            }
-                        }
-                        throw new Error('Cannot find any animated elements');
-                    });
-                });
+                    }
+                }
+                throw new Error('Cannot find any animated elements');
             });
-        };
+        });
     }
     else {
         return (args) => {
@@ -2139,15 +2119,15 @@ function notification(context) {
             if (args.data !== undefined) {
                 args.data = JSON.stringify(args.data);
             }
-            return context.notification.publish(args);
+            return context.callNative('notification', 'publish', args);
         },
         subscribe: (args) => {
             args.callback = context.function2Id(args.callback);
-            return context.notification.subscribe(args);
+            return context.callNative('notification', 'subscribe', args);
         },
         unsubscribe: (subscribeId) => {
             context.removeFuncById(subscribeId);
-            return context.notification.unsubscribe(subscribeId);
+            return context.callNative('notification', 'unsubscribe', subscribeId);
         }
     };
 }
@@ -2159,13 +2139,13 @@ function notification(context) {
 function statusbar(context) {
     return {
         setHidden: (hidden) => {
-            return context.statusbar.setHidden({ hidden });
+            return context.callNative('statusbar', 'setHidden', { hidden });
         },
         setMode: (mode) => {
-            return context.statusbar.setMode({ mode });
+            return context.callNative('statusbar', 'setMode', { mode });
         },
         setColor: (color) => {
-            return context.statusbar.setColor({ color: color.toModel() });
+            return context.callNative('statusbar', 'setColor', { color: color.toModel() });
         },
     };
 }
diff --git a/doric-js/bundle/doric-vm.js b/doric-js/bundle/doric-vm.js
index 5c47ea86..2f448f09 100644
--- a/doric-js/bundle/doric-vm.js
+++ b/doric-js/bundle/doric-vm.js
@@ -1723,7 +1723,6 @@ class View {
     nativeChannel(context, name) {
         let thisView = this;
         return function (args = undefined) {
-            const func = context.shader.command;
             const viewIds = [];
             while (thisView != undefined) {
                 viewIds.push(thisView.viewId);
@@ -1734,7 +1733,7 @@ class View {
                 name,
                 args,
             };
-            return Reflect.apply(func, undefined, [params]);
+            return context.callNative('shader', 'command', params);
         };
     }
     getWidth(context) {
@@ -1796,10 +1795,6 @@ __decorate([
     Property,
     __metadata("design:type", Boolean)
 ], View.prototype, "hidden", void 0);
-__decorate([
-    Property,
-    __metadata("design:type", Object)
-], View.prototype, "viewId", void 0);
 __decorate([
     Property,
     __metadata("design:type", Object)
@@ -3278,29 +3273,29 @@ function draggable(views, config) {
 function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
-            context.modal.toast({
+            context.callNative('modal', 'toast', {
                 msg,
                 gravity: gravity.toModel(),
             });
         },
         alert: (arg) => {
             if (typeof arg === 'string') {
-                return context.modal.alert({ msg: arg });
+                return context.callNative('modal', 'alert', { msg: arg });
             }
             else {
-                return context.modal.alert(arg);
+                return context.callNative('modal', 'alert', arg);
             }
         },
         confirm: (arg) => {
             if (typeof arg === 'string') {
-                return context.modal.confirm({ msg: arg });
+                return context.callNative('modal', 'confirm', { msg: arg });
             }
             else {
-                return context.modal.confirm(arg);
+                return context.callNative('modal', 'confirm', arg);
             }
         },
         prompt: (arg) => {
-            return context.modal.prompt(arg);
+            return context.callNative('modal', 'prompt', arg);
         },
     };
 }
@@ -3313,36 +3308,30 @@ function navbar(context) {
     }
     return {
         isHidden: () => {
-            return context.navbar.isHidden();
+            return context.callNative('navbar', 'isHidden');
         },
         setHidden: (hidden) => {
-            return context.navbar.setHidden({
-                hidden,
-            });
+            return context.callNative('navbar', 'setHidden', { hidden, });
         },
         setTitle: (title) => {
-            return context.navbar.setTitle({
-                title,
-            });
+            return context.callNative('navbar', 'setTitle', { title, });
         },
         setBgColor: (color) => {
-            return context.navbar.setBgColor({
-                color: color.toModel(),
-            });
+            return context.callNative('navbar', 'setBgColor', { color: color.toModel(), });
         },
         setLeft: (view) => {
             if (panel) {
                 panel.clearHeadViews("navbar_left");
                 panel.addHeadView("navbar_left", view);
             }
-            return context.navbar.setLeft(view.toModel());
+            return context.callNative('navbar', 'setLeft', view.toModel());
         },
         setRight: (view) => {
             if (panel) {
                 panel.clearHeadViews("navbar_right");
                 panel.addHeadView("navbar_right", view);
             }
-            return context.navbar.setRight(view.toModel());
+            return context.callNative('navbar', 'setRight', view.toModel());
         }
     };
 }
@@ -3353,12 +3342,12 @@ function navigator(context) {
             if (config && config.extra) {
                 config.extra = JSON.stringify(config.extra);
             }
-            return context.navigator.push({
+            return context.callNative('navigator', 'push', {
                 scheme, config
             });
         },
         pop: (animated = true) => {
-            return context.navigator.pop({ animated });
+            return context.callNative('navigator', 'pop', { animated });
         },
     };
 }
@@ -3380,7 +3369,7 @@ function transformRequest(request) {
 function network(context) {
     return {
         request: (config) => {
-            return context.network.request(transformRequest(config));
+            return context.callNative('network', 'request', transformRequest(config));
         },
         get: (url, config) => {
             let finalConfig = config;
@@ -3389,7 +3378,7 @@ function network(context) {
             }
             finalConfig.url = url;
             finalConfig.method = "get";
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         post: (url, data, config) => {
             let finalConfig = config;
@@ -3401,7 +3390,7 @@ function network(context) {
             if (data !== undefined) {
                 finalConfig.data = data;
             }
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         put: (url, data, config) => {
             let finalConfig = config;
@@ -3413,7 +3402,7 @@ function network(context) {
             if (data !== undefined) {
                 finalConfig.data = data;
             }
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         delete: (url, data, config) => {
             let finalConfig = config;
@@ -3422,7 +3411,7 @@ function network(context) {
             }
             finalConfig.url = url;
             finalConfig.method = "delete";
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
     };
 }
@@ -3430,16 +3419,16 @@ function network(context) {
 function storage(context) {
     return {
         setItem: (key, value, zone) => {
-            return context.storage.setItem({ key, value, zone });
+            return context.callNative('storage', 'setItem', { key, value, zone });
         },
         getItem: (key, zone) => {
-            return context.storage.getItem({ key, zone });
+            return context.callNative('storage', 'getItem', { key, zone });
         },
         remove: (key, zone) => {
-            return context.storage.remove({ key, zone });
+            return context.callNative('storage', 'remove', { key, zone });
         },
         clear: (zone) => {
-            return context.storage.clear({ zone });
+            return context.callNative('storage', 'clear', { zone });
         },
     };
 }
@@ -3455,7 +3444,7 @@ function popover(context) {
             if (panel) {
                 panel.addHeadView("popover", view);
             }
-            return context.popover.show(view.toModel());
+            return context.callNative('popover', 'show', view.toModel());
         },
         dismiss: (view = undefined) => {
             if (panel) {
@@ -3466,7 +3455,7 @@ function popover(context) {
                     panel.clearHeadViews("popover");
                 }
             }
-            return context.popover.dismiss(view ? { id: view.viewId } : undefined);
+            return context.callNative('popover', 'dismiss', view ? { id: view.viewId } : undefined);
         },
     };
 }
@@ -3534,21 +3523,15 @@ function repeat(action) {
     };
 }
 
-/*
- * Copyright [2019] [Doric.Pub]
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  * Only supports x,y,width,height,corner(just for four corners),rotation,bgColor,
  * @param panel @see Panel
@@ -3557,33 +3540,30 @@ function animate(context) {
     const entity = context.entity;
     if (entity instanceof Panel) {
         let panel = entity;
-        return (args) => {
-            return takeLet(panel.context.animate)(it => {
-                return it.submit().then(() => {
-                    args.animations();
-                    return takeLet(panel.getRootView())(root => {
-                        if (root.isDirty()) {
-                            const model = root.toModel();
-                            model.duration = args.duration;
-                            const ret = it.animateRender(model);
-                            root.clean();
-                            return ret;
+        return (args) => __awaiter(this, void 0, void 0, function* () {
+            yield context.callNative('animate', 'submit');
+            args.animations();
+            return takeLet(panel.getRootView())(root => {
+                if (root.isDirty()) {
+                    const model = root.toModel();
+                    model.duration = args.duration;
+                    const ret = context.callNative('animate', 'animateRender', model);
+                    root.clean();
+                    return ret;
+                }
+                for (let map of panel.allHeadViews()) {
+                    for (let v of map.values()) {
+                        if (v.isDirty()) {
+                            const model_1 = v.toModel();
+                            const ret_1 = context.callNative('animate', 'animateRender', model_1);
+                            v.clean();
+                            return ret_1;
                         }
-                        for (let map of panel.allHeadViews()) {
-                            for (let v of map.values()) {
-                                if (v.isDirty()) {
-                                    const model = v.toModel();
-                                    const ret = it.animateRender(model);
-                                    it.clean();
-                                    return ret;
-                                }
-                            }
-                        }
-                        throw new Error('Cannot find any animated elements');
-                    });
-                });
+                    }
+                }
+                throw new Error('Cannot find any animated elements');
             });
-        };
+        });
     }
     else {
         return (args) => {
@@ -3598,15 +3578,15 @@ function notification(context) {
             if (args.data !== undefined) {
                 args.data = JSON.stringify(args.data);
             }
-            return context.notification.publish(args);
+            return context.callNative('notification', 'publish', args);
         },
         subscribe: (args) => {
             args.callback = context.function2Id(args.callback);
-            return context.notification.subscribe(args);
+            return context.callNative('notification', 'subscribe', args);
         },
         unsubscribe: (subscribeId) => {
             context.removeFuncById(subscribeId);
-            return context.notification.unsubscribe(subscribeId);
+            return context.callNative('notification', 'unsubscribe', subscribeId);
         }
     };
 }
@@ -3618,13 +3598,13 @@ function notification(context) {
 function statusbar(context) {
     return {
         setHidden: (hidden) => {
-            return context.statusbar.setHidden({ hidden });
+            return context.callNative('statusbar', 'setHidden', { hidden });
         },
         setMode: (mode) => {
-            return context.statusbar.setMode({ mode });
+            return context.callNative('statusbar', 'setMode', { mode });
         },
         setColor: (color) => {
-            return context.statusbar.setColor({ color: color.toModel() });
+            return context.callNative('statusbar', 'setColor', { color: color.toModel() });
         },
     };
 }
diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts
index 375c2717..ddf415cb 100644
--- a/doric-js/index.d.ts
+++ b/doric-js/index.d.ts
@@ -14,25 +14,47 @@ declare module 'doric' {
 declare module 'doric/lib/src/runtime/global' {
     export * from 'reflect-metadata';
     export type BridgeContext = {
-        [index: string]: {
-            [index: string]: (args?: any) => Promise<any>;
-        };
+            /**
+                * The identify of current context
+                */
+            id: string;
+            /**
+                * In this case,It's current panel
+                */
+            entity: any;
+            /**
+                * call native plugin
+                * @param namespace
+                * @param method
+                * @param args
+                */
+            callNative(namespace: string, method: string, args?: any): Promise<any>;
+            /**
+                * Transform function to functionId as string
+                * @param func
+                */
+            function2Id(func: Function): string;
+            /**
+                * Remove transformed functions
+                * @param funcId
+                */
+            removeFuncById(funcId: string): void;
     };
     global {
-        const context: BridgeContext;
-        const Environment: {
-            platform: "Android" | "iOS" | "Qt" | "web";
-            platformVersion: string;
-            appName: string;
-            appVersion: string;
-            libVersion: string;
-            screenWidth: number;
-            screenHeight: number;
-            [index: string]: number | string | boolean | object | undefined;
-        };
-        function Entry(constructor: {
-            new (...args: any[]): {};
-        }): any;
+            const context: BridgeContext;
+            const Environment: {
+                    platform: "Android" | "iOS" | "Qt" | "web";
+                    platformVersion: string;
+                    appName: string;
+                    appVersion: string;
+                    libVersion: string;
+                    screenWidth: number;
+                    screenHeight: number;
+                    [index: string]: number | string | boolean | object | undefined;
+            };
+            function Entry(constructor: {
+                    new (...args: any[]): {};
+            }): any;
     }
     export {};
 }
@@ -214,7 +236,7 @@ declare module 'doric/lib/src/ui/view' {
             also(block: (it: this) => void): this;
             apply(config: IView): this;
             in(group: Group): this;
-            nativeChannel(context: any, name: string): (args?: any) => Promise<any>;
+            nativeChannel(context: BridgeContext, name: string): (args?: any) => Promise<any>;
             getWidth(context: BridgeContext): Promise<number>;
             getHeight(context: BridgeContext): Promise<number>;
             getLocationOnScreen(context: BridgeContext): Promise<{
@@ -797,7 +819,7 @@ declare module 'doric/lib/src/native/animate' {
     export function animate(context: BridgeContext): (args: {
         animations: () => void;
         duration: number;
-    }) => Promise<any>;
+    }) => Promise<unknown>;
 }
 
 declare module 'doric/lib/src/native/notification' {
diff --git a/doric-js/lib/src/native/animate.d.ts b/doric-js/lib/src/native/animate.d.ts
index 19dd6f93..3b722538 100644
--- a/doric-js/lib/src/native/animate.d.ts
+++ b/doric-js/lib/src/native/animate.d.ts
@@ -6,4 +6,4 @@ import { BridgeContext } from "../runtime/global";
 export declare function animate(context: BridgeContext): (args: {
     animations: () => void;
     duration: number;
-}) => Promise<any>;
+}) => Promise<unknown>;
diff --git a/doric-js/lib/src/native/animate.js b/doric-js/lib/src/native/animate.js
index 8619134d..028dcfb8 100644
--- a/doric-js/lib/src/native/animate.js
+++ b/doric-js/lib/src/native/animate.js
@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /*
  * Copyright [2019] [Doric.Pub]
  *
@@ -23,33 +32,30 @@ export function animate(context) {
     const entity = context.entity;
     if (entity instanceof Panel) {
         let panel = entity;
-        return (args) => {
-            return takeLet(panel.context.animate)(it => {
-                return it.submit().then(() => {
-                    args.animations();
-                    return takeLet(panel.getRootView())(root => {
-                        if (root.isDirty()) {
-                            const model = root.toModel();
-                            model.duration = args.duration;
-                            const ret = it.animateRender(model);
-                            root.clean();
-                            return ret;
+        return (args) => __awaiter(this, void 0, void 0, function* () {
+            yield context.callNative('animate', 'submit');
+            args.animations();
+            return takeLet(panel.getRootView())(root => {
+                if (root.isDirty()) {
+                    const model = root.toModel();
+                    model.duration = args.duration;
+                    const ret = context.callNative('animate', 'animateRender', model);
+                    root.clean();
+                    return ret;
+                }
+                for (let map of panel.allHeadViews()) {
+                    for (let v of map.values()) {
+                        if (v.isDirty()) {
+                            const model_1 = v.toModel();
+                            const ret_1 = context.callNative('animate', 'animateRender', model_1);
+                            v.clean();
+                            return ret_1;
                         }
-                        for (let map of panel.allHeadViews()) {
-                            for (let v of map.values()) {
-                                if (v.isDirty()) {
-                                    const model = v.toModel();
-                                    const ret = it.animateRender(model);
-                                    it.clean();
-                                    return ret;
-                                }
-                            }
-                        }
-                        throw new Error('Cannot find any animated elements');
-                    });
-                });
+                    }
+                }
+                throw new Error('Cannot find any animated elements');
             });
-        };
+        });
     }
     else {
         return (args) => {
diff --git a/doric-js/lib/src/native/modal.js b/doric-js/lib/src/native/modal.js
index fafb8713..68e87275 100644
--- a/doric-js/lib/src/native/modal.js
+++ b/doric-js/lib/src/native/modal.js
@@ -2,29 +2,29 @@ import { Gravity } from "../util/gravity";
 export function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
-            context.modal.toast({
+            context.callNative('modal', 'toast', {
                 msg,
                 gravity: gravity.toModel(),
             });
         },
         alert: (arg) => {
             if (typeof arg === 'string') {
-                return context.modal.alert({ msg: arg });
+                return context.callNative('modal', 'alert', { msg: arg });
             }
             else {
-                return context.modal.alert(arg);
+                return context.callNative('modal', 'alert', arg);
             }
         },
         confirm: (arg) => {
             if (typeof arg === 'string') {
-                return context.modal.confirm({ msg: arg });
+                return context.callNative('modal', 'confirm', { msg: arg });
             }
             else {
-                return context.modal.confirm(arg);
+                return context.callNative('modal', 'confirm', arg);
             }
         },
         prompt: (arg) => {
-            return context.modal.prompt(arg);
+            return context.callNative('modal', 'prompt', arg);
         },
     };
 }
diff --git a/doric-js/lib/src/native/navbar.js b/doric-js/lib/src/native/navbar.js
index 95085d24..fa098305 100644
--- a/doric-js/lib/src/native/navbar.js
+++ b/doric-js/lib/src/native/navbar.js
@@ -7,36 +7,30 @@ export function navbar(context) {
     }
     return {
         isHidden: () => {
-            return context.navbar.isHidden();
+            return context.callNative('navbar', 'isHidden');
         },
         setHidden: (hidden) => {
-            return context.navbar.setHidden({
-                hidden,
-            });
+            return context.callNative('navbar', 'setHidden', { hidden, });
         },
         setTitle: (title) => {
-            return context.navbar.setTitle({
-                title,
-            });
+            return context.callNative('navbar', 'setTitle', { title, });
         },
         setBgColor: (color) => {
-            return context.navbar.setBgColor({
-                color: color.toModel(),
-            });
+            return context.callNative('navbar', 'setBgColor', { color: color.toModel(), });
         },
         setLeft: (view) => {
             if (panel) {
                 panel.clearHeadViews("navbar_left");
                 panel.addHeadView("navbar_left", view);
             }
-            return context.navbar.setLeft(view.toModel());
+            return context.callNative('navbar', 'setLeft', view.toModel());
         },
         setRight: (view) => {
             if (panel) {
                 panel.clearHeadViews("navbar_right");
                 panel.addHeadView("navbar_right", view);
             }
-            return context.navbar.setRight(view.toModel());
+            return context.callNative('navbar', 'setRight', view.toModel());
         }
     };
 }
diff --git a/doric-js/lib/src/native/navigator.js b/doric-js/lib/src/native/navigator.js
index 00d853a2..91ae0d5b 100644
--- a/doric-js/lib/src/native/navigator.js
+++ b/doric-js/lib/src/native/navigator.js
@@ -4,12 +4,12 @@ export function navigator(context) {
             if (config && config.extra) {
                 config.extra = JSON.stringify(config.extra);
             }
-            return context.navigator.push({
+            return context.callNative('navigator', 'push', {
                 scheme, config
             });
         },
         pop: (animated = true) => {
-            return context.navigator.pop({ animated });
+            return context.callNative('navigator', 'pop', { animated });
         },
     };
 }
diff --git a/doric-js/lib/src/native/network.js b/doric-js/lib/src/native/network.js
index 383718c3..69db1981 100644
--- a/doric-js/lib/src/native/network.js
+++ b/doric-js/lib/src/native/network.js
@@ -15,7 +15,7 @@ function transformRequest(request) {
 export function network(context) {
     return {
         request: (config) => {
-            return context.network.request(transformRequest(config));
+            return context.callNative('network', 'request', transformRequest(config));
         },
         get: (url, config) => {
             let finalConfig = config;
@@ -24,7 +24,7 @@ export function network(context) {
             }
             finalConfig.url = url;
             finalConfig.method = "get";
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         post: (url, data, config) => {
             let finalConfig = config;
@@ -36,7 +36,7 @@ export function network(context) {
             if (data !== undefined) {
                 finalConfig.data = data;
             }
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         put: (url, data, config) => {
             let finalConfig = config;
@@ -48,7 +48,7 @@ export function network(context) {
             if (data !== undefined) {
                 finalConfig.data = data;
             }
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
         delete: (url, data, config) => {
             let finalConfig = config;
@@ -57,7 +57,7 @@ export function network(context) {
             }
             finalConfig.url = url;
             finalConfig.method = "delete";
-            return context.network.request(transformRequest(finalConfig));
+            return context.callNative('network', 'request', transformRequest(finalConfig));
         },
     };
 }
diff --git a/doric-js/lib/src/native/notification.js b/doric-js/lib/src/native/notification.js
index 14036cf8..f0c1b638 100644
--- a/doric-js/lib/src/native/notification.js
+++ b/doric-js/lib/src/native/notification.js
@@ -4,15 +4,15 @@ export function notification(context) {
             if (args.data !== undefined) {
                 args.data = JSON.stringify(args.data);
             }
-            return context.notification.publish(args);
+            return context.callNative('notification', 'publish', args);
         },
         subscribe: (args) => {
             args.callback = context.function2Id(args.callback);
-            return context.notification.subscribe(args);
+            return context.callNative('notification', 'subscribe', args);
         },
         unsubscribe: (subscribeId) => {
             context.removeFuncById(subscribeId);
-            return context.notification.unsubscribe(subscribeId);
+            return context.callNative('notification', 'unsubscribe', subscribeId);
         }
     };
 }
diff --git a/doric-js/lib/src/native/popover.js b/doric-js/lib/src/native/popover.js
index 81647bb1..17f592a4 100644
--- a/doric-js/lib/src/native/popover.js
+++ b/doric-js/lib/src/native/popover.js
@@ -10,7 +10,7 @@ export function popover(context) {
             if (panel) {
                 panel.addHeadView("popover", view);
             }
-            return context.popover.show(view.toModel());
+            return context.callNative('popover', 'show', view.toModel());
         },
         dismiss: (view = undefined) => {
             if (panel) {
@@ -21,7 +21,7 @@ export function popover(context) {
                     panel.clearHeadViews("popover");
                 }
             }
-            return context.popover.dismiss(view ? { id: view.viewId } : undefined);
+            return context.callNative('popover', 'dismiss', view ? { id: view.viewId } : undefined);
         },
     };
 }
diff --git a/doric-js/lib/src/native/statusbar.js b/doric-js/lib/src/native/statusbar.js
index d52a49e6..e990a5bc 100644
--- a/doric-js/lib/src/native/statusbar.js
+++ b/doric-js/lib/src/native/statusbar.js
@@ -6,13 +6,13 @@ export var StatusBarMode;
 export function statusbar(context) {
     return {
         setHidden: (hidden) => {
-            return context.statusbar.setHidden({ hidden });
+            return context.callNative('statusbar', 'setHidden', { hidden });
         },
         setMode: (mode) => {
-            return context.statusbar.setMode({ mode });
+            return context.callNative('statusbar', 'setMode', { mode });
         },
         setColor: (color) => {
-            return context.statusbar.setColor({ color: color.toModel() });
+            return context.callNative('statusbar', 'setColor', { color: color.toModel() });
         },
     };
 }
diff --git a/doric-js/lib/src/native/storage.js b/doric-js/lib/src/native/storage.js
index 2bafc193..f6c8ec10 100644
--- a/doric-js/lib/src/native/storage.js
+++ b/doric-js/lib/src/native/storage.js
@@ -1,16 +1,16 @@
 export function storage(context) {
     return {
         setItem: (key, value, zone) => {
-            return context.storage.setItem({ key, value, zone });
+            return context.callNative('storage', 'setItem', { key, value, zone });
         },
         getItem: (key, zone) => {
-            return context.storage.getItem({ key, zone });
+            return context.callNative('storage', 'getItem', { key, zone });
         },
         remove: (key, zone) => {
-            return context.storage.remove({ key, zone });
+            return context.callNative('storage', 'remove', { key, zone });
         },
         clear: (zone) => {
-            return context.storage.clear({ zone });
+            return context.callNative('storage', 'clear', { zone });
         },
     };
 }
diff --git a/doric-js/lib/src/runtime/global.d.ts b/doric-js/lib/src/runtime/global.d.ts
index 98dfacb8..df62e6d9 100644
--- a/doric-js/lib/src/runtime/global.d.ts
+++ b/doric-js/lib/src/runtime/global.d.ts
@@ -1,8 +1,30 @@
 export * from 'reflect-metadata';
 export declare type BridgeContext = {
-    [index: string]: {
-        [index: string]: (args?: any) => Promise<any>;
-    };
+    /**
+     * The identify of current context
+     */
+    id: string;
+    /**
+     * In this case,It's current panel
+     */
+    entity: any;
+    /**
+     * call native plugin
+     * @param namespace
+     * @param method
+     * @param args
+     */
+    callNative(namespace: string, method: string, args?: any): Promise<any>;
+    /**
+     * Transform function to functionId as string
+     * @param func
+     */
+    function2Id(func: Function): string;
+    /**
+     * Remove transformed functions
+     * @param funcId
+     */
+    removeFuncById(funcId: string): void;
 };
 declare global {
     const context: BridgeContext;
diff --git a/doric-js/lib/src/ui/view.d.ts b/doric-js/lib/src/ui/view.d.ts
index 7c497363..78623123 100644
--- a/doric-js/lib/src/ui/view.d.ts
+++ b/doric-js/lib/src/ui/view.d.ts
@@ -131,7 +131,7 @@ export declare abstract class View implements Modeling, IView {
     also(block: (it: this) => void): this;
     apply(config: IView): this;
     in(group: Group): this;
-    nativeChannel(context: any, name: string): (args?: any) => Promise<any>;
+    nativeChannel(context: BridgeContext, name: string): (args?: any) => Promise<any>;
     getWidth(context: BridgeContext): Promise<number>;
     getHeight(context: BridgeContext): Promise<number>;
     getLocationOnScreen(context: BridgeContext): Promise<{
diff --git a/doric-js/lib/src/ui/view.js b/doric-js/lib/src/ui/view.js
index d7515f36..4ba8d32d 100644
--- a/doric-js/lib/src/ui/view.js
+++ b/doric-js/lib/src/ui/view.js
@@ -149,7 +149,6 @@ export class View {
     nativeChannel(context, name) {
         let thisView = this;
         return function (args = undefined) {
-            const func = context.shader.command;
             const viewIds = [];
             while (thisView != undefined) {
                 viewIds.push(thisView.viewId);
@@ -160,7 +159,7 @@ export class View {
                 name,
                 args,
             };
-            return Reflect.apply(func, undefined, [params]);
+            return context.callNative('shader', 'command', params);
         };
     }
     getWidth(context) {
@@ -222,10 +221,6 @@ __decorate([
     Property,
     __metadata("design:type", Boolean)
 ], View.prototype, "hidden", void 0);
-__decorate([
-    Property,
-    __metadata("design:type", Object)
-], View.prototype, "viewId", void 0);
 __decorate([
     Property,
     __metadata("design:type", Object)
diff --git a/doric-js/src/native/animate.ts b/doric-js/src/native/animate.ts
index c8fe4609..6cde4b04 100644
--- a/doric-js/src/native/animate.ts
+++ b/doric-js/src/native/animate.ts
@@ -24,35 +24,32 @@ export function animate(context: BridgeContext) {
     const entity = context.entity
     if (entity instanceof Panel) {
         let panel = entity
-        return (args: {
+        return async (args: {
             animations: () => void,
             duration: number,
         }) => {
-            return takeLet(panel.context.animate)(it => {
-                return it.submit().then(() => {
-                    args.animations()
-                    return takeLet(panel.getRootView())(root => {
-                        if (root.isDirty()) {
-                            const model = root.toModel();
-                            (model as any).duration = args.duration
-                            const ret = it.animateRender(model)
-                            root.clean()
-                            return ret
+            await context.callNative('animate', 'submit')
+            args.animations()
+            return takeLet(panel.getRootView())(root => {
+                if (root.isDirty()) {
+                    const model = root.toModel();
+                    (model as any).duration = args.duration
+                    const ret = context.callNative('animate', 'animateRender', model)
+                    root.clean()
+                    return ret
+                }
+                for (let map of panel.allHeadViews()) {
+                    for (let v of map.values()) {
+                        if (v.isDirty()) {
+                            const model_1 = v.toModel()
+                            const ret_1 = context.callNative('animate', 'animateRender', model_1)
+                            v.clean()
+                            return ret_1
                         }
-                        for (let map of panel.allHeadViews()) {
-                            for (let v of map.values()) {
-                                if (v.isDirty()) {
-                                    const model = v.toModel()
-                                    const ret = it.animateRender(model)
-                                    it.clean()
-                                    return ret
-                                }
-                            }
-                        }
-                        throw new Error('Cannot find any animated elements')
-                    })
-                })
-            }) as Promise<any>
+                    }
+                }
+                throw new Error('Cannot find any animated elements')
+            })
         }
     } else {
         return (args: {
diff --git a/doric-js/src/native/modal.ts b/doric-js/src/native/modal.ts
index b50bcc0f..a1889852 100644
--- a/doric-js/src/native/modal.ts
+++ b/doric-js/src/native/modal.ts
@@ -19,7 +19,7 @@ import { Gravity } from "../util/gravity"
 export function modal(context: BridgeContext) {
     return {
         toast: (msg: string, gravity: Gravity = Gravity.Bottom) => {
-            context.modal.toast({
+            context.callNative('modal', 'toast', {
                 msg,
                 gravity: gravity.toModel(),
             })
@@ -30,9 +30,9 @@ export function modal(context: BridgeContext) {
             okLabel?: string,
         }) => {
             if (typeof arg === 'string') {
-                return context.modal.alert({ msg: arg })
+                return context.callNative('modal', 'alert', { msg: arg })
             } else {
-                return context.modal.alert(arg)
+                return context.callNative('modal', 'alert', arg)
             }
         },
         confirm: (arg: string | {
@@ -42,9 +42,9 @@ export function modal(context: BridgeContext) {
             cancelLabel?: string,
         }) => {
             if (typeof arg === 'string') {
-                return context.modal.confirm({ msg: arg })
+                return context.callNative('modal', 'confirm', { msg: arg })
             } else {
-                return context.modal.confirm(arg)
+                return context.callNative('modal', 'confirm', arg)
             }
         },
         prompt: (arg: {
@@ -55,7 +55,7 @@ export function modal(context: BridgeContext) {
             text?: string,
             defaultText?: string,
         }) => {
-            return context.modal.prompt(arg) as Promise<string>
+            return context.callNative('modal', 'prompt', arg) as Promise<string>
         },
     }
 }
\ No newline at end of file
diff --git a/doric-js/src/native/navbar.ts b/doric-js/src/native/navbar.ts
index 1f3bb9c4..8a572fbf 100644
--- a/doric-js/src/native/navbar.ts
+++ b/doric-js/src/native/navbar.ts
@@ -27,36 +27,30 @@ export function navbar(context: BridgeContext) {
 
     return {
         isHidden: () => {
-            return context.navbar.isHidden() as Promise<boolean>
+            return context.callNative('navbar', 'isHidden') as Promise<boolean>
         },
         setHidden: (hidden: boolean) => {
-            return context.navbar.setHidden({
-                hidden,
-            })
+            return context.callNative('navbar', 'setHidden', { hidden, })
         },
         setTitle: (title: string) => {
-            return context.navbar.setTitle({
-                title,
-            })
+            return context.callNative('navbar', 'setTitle', { title, })
         },
         setBgColor: (color: Color) => {
-            return context.navbar.setBgColor({
-                color: color.toModel(),
-            })
+            return context.callNative('navbar', 'setBgColor', { color: color.toModel(), })
         },
         setLeft: (view: View) => {
             if (panel) {
                 panel.clearHeadViews("navbar_left")
                 panel.addHeadView("navbar_left", view)
             }
-            return context.navbar.setLeft(view.toModel())
+            return context.callNative('navbar', 'setLeft', view.toModel())
         },
         setRight: (view: View) => {
             if (panel) {
                 panel.clearHeadViews("navbar_right")
                 panel.addHeadView("navbar_right", view)
             }
-            return context.navbar.setRight(view.toModel())
+            return context.callNative('navbar', 'setRight', view.toModel())
         }
     }
 }
\ No newline at end of file
diff --git a/doric-js/src/native/navigator.ts b/doric-js/src/native/navigator.ts
index fc92d92e..818a700e 100644
--- a/doric-js/src/native/navigator.ts
+++ b/doric-js/src/native/navigator.ts
@@ -25,12 +25,12 @@ export function navigator(context: BridgeContext) {
             if (config && config.extra) {
                 (config as any).extra = JSON.stringify(config.extra)
             }
-            return context.navigator.push({
+            return context.callNative('navigator', 'push', {
                 scheme, config
             })
         },
         pop: (animated = true) => {
-            return context.navigator.pop({ animated })
+            return context.callNative('navigator', 'pop', { animated })
         },
     }
 }
\ No newline at end of file
diff --git a/doric-js/src/native/network.ts b/doric-js/src/native/network.ts
index 8b688c87..bd0d59d3 100644
--- a/doric-js/src/native/network.ts
+++ b/doric-js/src/native/network.ts
@@ -61,7 +61,7 @@ function transformRequest(request: IRequest) {
 export function network(context: BridgeContext) {
     return {
         request: (config: IRequest) => {
-            return context.network.request(transformRequest(config)) as Promise<IResponse>
+            return context.callNative('network', 'request', transformRequest(config)) as Promise<IResponse>
         },
         get: (url: string, config?: IRequest) => {
             let finalConfig = config
@@ -70,7 +70,7 @@ export function network(context: BridgeContext) {
             }
             finalConfig.url = url
             finalConfig.method = "get"
-            return context.network.request(transformRequest(finalConfig)) as Promise<IResponse>
+            return context.callNative('network', 'request', transformRequest(finalConfig)) as Promise<IResponse>
         },
         post: (url: string, data?: object | string, config?: IRequest) => {
             let finalConfig = config
@@ -82,7 +82,7 @@ export function network(context: BridgeContext) {
             if (data !== undefined) {
                 finalConfig.data = data
             }
-            return context.network.request(transformRequest(finalConfig)) as Promise<IResponse>
+            return context.callNative('network', 'request', transformRequest(finalConfig)) as Promise<IResponse>
         },
         put: (url: string, data?: object | string, config?: IRequest) => {
             let finalConfig = config
@@ -94,7 +94,7 @@ export function network(context: BridgeContext) {
             if (data !== undefined) {
                 finalConfig.data = data
             }
-            return context.network.request(transformRequest(finalConfig)) as Promise<IResponse>
+            return context.callNative('network', 'request', transformRequest(finalConfig)) as Promise<IResponse>
         },
         delete: (url: string, data?: object | string, config?: IRequest) => {
             let finalConfig = config
@@ -103,7 +103,7 @@ export function network(context: BridgeContext) {
             }
             finalConfig.url = url
             finalConfig.method = "delete"
-            return context.network.request(transformRequest(finalConfig)) as Promise<IResponse>
+            return context.callNative('network', 'request', transformRequest(finalConfig)) as Promise<IResponse>
         },
     }
 }
\ No newline at end of file
diff --git a/doric-js/src/native/notification.ts b/doric-js/src/native/notification.ts
index 9e7038e9..f908cece 100644
--- a/doric-js/src/native/notification.ts
+++ b/doric-js/src/native/notification.ts
@@ -20,15 +20,15 @@ export function notification(context: BridgeContext) {
             if (args.data !== undefined) {
                 (args as any).data = JSON.stringify(args.data)
             }
-            return context.notification.publish(args)
+            return context.callNative('notification', 'publish', args)
         },
         subscribe: (args: { biz?: string, name: string, callback: (data?: any) => void, androidSystem?: boolean }) => {
-            (args as any).callback = (context as any).function2Id(args.callback)
-            return context.notification.subscribe(args) as Promise<string>
+            (args as any).callback = context.function2Id(args.callback)
+            return context.callNative('notification', 'subscribe', args) as Promise<string>
         },
         unsubscribe: (subscribeId: string) => {
-            (context as any).removeFuncById(subscribeId)
-            return context.notification.unsubscribe(subscribeId)
+            context.removeFuncById(subscribeId)
+            return context.callNative('notification', 'unsubscribe', subscribeId)
         }
     }
 }
\ No newline at end of file
diff --git a/doric-js/src/native/popover.ts b/doric-js/src/native/popover.ts
index 1081dddb..a5d137f3 100644
--- a/doric-js/src/native/popover.ts
+++ b/doric-js/src/native/popover.ts
@@ -28,7 +28,7 @@ export function popover(context: BridgeContext) {
             if (panel) {
                 panel.addHeadView("popover", view)
             }
-            return context.popover.show(view.toModel())
+            return context.callNative('popover', 'show', view.toModel())
         },
         dismiss: (view: View | undefined = undefined) => {
             if (panel) {
@@ -38,7 +38,7 @@ export function popover(context: BridgeContext) {
                     panel.clearHeadViews("popover")
                 }
             }
-            return context.popover.dismiss(view ? { id: view.viewId } : undefined)
+            return context.callNative('popover', 'dismiss', view ? { id: view.viewId } : undefined)
         },
     }
 }
\ No newline at end of file
diff --git a/doric-js/src/native/statusbar.ts b/doric-js/src/native/statusbar.ts
index 858e9053..cf944320 100644
--- a/doric-js/src/native/statusbar.ts
+++ b/doric-js/src/native/statusbar.ts
@@ -21,13 +21,13 @@ export enum StatusBarMode { LIGHT, DARK }
 export function statusbar(context: BridgeContext) {
     return {
         setHidden: (hidden: boolean) => {
-            return context.statusbar.setHidden({hidden})
+            return context.callNative('statusbar', 'setHidden', { hidden })
         },
         setMode: (mode: StatusBarMode) => {
-            return context.statusbar.setMode({mode})
+            return context.callNative('statusbar', 'setMode', { mode })
         },
         setColor: (color: Color) => {
-            return context.statusbar.setColor({color: color.toModel()})
+            return context.callNative('statusbar', 'setColor', { color: color.toModel() })
         },
     }
 }
\ No newline at end of file
diff --git a/doric-js/src/native/storage.ts b/doric-js/src/native/storage.ts
index dda42379..34ed7640 100644
--- a/doric-js/src/native/storage.ts
+++ b/doric-js/src/native/storage.ts
@@ -18,16 +18,16 @@ import { BridgeContext } from "../runtime/global"
 export function storage(context: BridgeContext) {
     return {
         setItem: (key: string, value: string, zone?: string) => {
-            return context.storage.setItem({ key, value, zone })
+            return context.callNative('storage', 'setItem', { key, value, zone })
         },
         getItem: (key: string, zone?: string) => {
-            return context.storage.getItem({ key, zone }) as Promise<string>
+            return context.callNative('storage', 'getItem', { key, zone }) as Promise<string>
         },
         remove: (key: string, zone?: string) => {
-            return context.storage.remove({ key, zone })
+            return context.callNative('storage', 'remove', { key, zone })
         },
         clear: (zone: string) => {
-            return context.storage.clear({ zone })
+            return context.callNative('storage', 'clear', { zone })
         },
     }
 }
\ No newline at end of file
diff --git a/doric-js/src/runtime/global.ts b/doric-js/src/runtime/global.ts
index f50ee6ec..07b9af82 100644
--- a/doric-js/src/runtime/global.ts
+++ b/doric-js/src/runtime/global.ts
@@ -16,7 +16,31 @@
 export * from 'reflect-metadata'
 
 export type BridgeContext = {
-    [index: string]: { [index: string]: (args?: any) => Promise<any> }
+    /**
+     * The identify of current context
+     */
+    id: string
+    /**
+     * In this case,It's current panel
+     */
+    entity: any
+    /**
+     * call native plugin
+     * @param namespace 
+     * @param method 
+     * @param args 
+     */
+    callNative(namespace: string, method: string, args?: any): Promise<any>
+    /**
+     * Transform function to functionId as string
+     * @param func 
+     */
+    function2Id(func: Function): string
+    /**
+     * Remove transformed functions
+     * @param funcId 
+     */
+    removeFuncById(funcId: string): void
 }
 
 declare global {
diff --git a/doric-js/src/ui/panel.ts b/doric-js/src/ui/panel.ts
index 65f7c4eb..5cb6996a 100644
--- a/doric-js/src/ui/panel.ts
+++ b/doric-js/src/ui/panel.ts
@@ -157,7 +157,7 @@ export abstract class Panel {
     }
 
     private nativeRender(model: Model) {
-        (this.context as any).callNative("shader", "render", model)
+        this.context.callNative("shader", "render", model)
     }
 
     private hookBeforeNativeCall() {
diff --git a/doric-js/src/ui/view.es5.ts b/doric-js/src/ui/view.es5.ts
index 809bb35e..6057ae99 100644
--- a/doric-js/src/ui/view.es5.ts
+++ b/doric-js/src/ui/view.es5.ts
@@ -122,7 +122,6 @@ export abstract class View implements Modeling, IView {
     @Property
     hidden?: boolean
 
-    @Property
     viewId = uniqueId('ViewId')
 
     @Property
@@ -152,6 +151,9 @@ export abstract class View implements Modeling, IView {
     }
 
     private id2Callback(id: string) {
+        if (this.callbacks === undefined) {
+            this.callbacks = new Map
+        }
         let f = this.callbacks.get(id)
         if (f === undefined) {
             f = Reflect.get(this, id) as Function
@@ -280,10 +282,9 @@ export abstract class View implements Modeling, IView {
         return this
     }
 
-    nativeChannel(context: any, name: string) {
+    nativeChannel(context: BridgeContext, name: string) {
         let thisView: View | undefined = this
         return function (args: any = undefined) {
-            const func = context.shader.command
             const viewIds = []
             while (thisView != undefined) {
                 viewIds.push(thisView.viewId)
@@ -294,7 +295,8 @@ export abstract class View implements Modeling, IView {
                 name,
                 args,
             }
-            return Reflect.apply(func, undefined, [params]) as Promise<any>
+
+            return context.callNative('shader', 'command', params) as Promise<any>
         }
     }
 
diff --git a/doric-js/src/ui/view.ts b/doric-js/src/ui/view.ts
index fda3be25..3d7377f5 100644
--- a/doric-js/src/ui/view.ts
+++ b/doric-js/src/ui/view.ts
@@ -109,7 +109,6 @@ export abstract class View implements Modeling, IView {
     @Property
     hidden?: boolean
 
-    @Property
     viewId = uniqueId('ViewId')
 
     @Property
@@ -278,10 +277,9 @@ export abstract class View implements Modeling, IView {
         return this
     }
 
-    nativeChannel(context: any, name: string) {
+    nativeChannel(context: BridgeContext, name: string) {
         let thisView: View | undefined = this
         return function (args: any = undefined) {
-            const func = context.shader.command
             const viewIds = []
             while (thisView != undefined) {
                 viewIds.push(thisView.viewId)
@@ -292,7 +290,8 @@ export abstract class View implements Modeling, IView {
                 name,
                 args,
             }
-            return Reflect.apply(func, undefined, [params]) as Promise<any>
+
+            return context.callNative('shader', 'command', params) as Promise<any>
         }
     }