diff --git a/js-framework/index.ts b/js-framework/index.ts
index e6b99b6a..0190f278 100644
--- a/js-framework/index.ts
+++ b/js-framework/index.ts
@@ -13,20 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from "./src/ui/view"
-export * from "./src/ui/layout"
-export * from "./src/ui/list"
-export * from "./src/ui/slider"
-export * from "./src/ui/scroller"
-export * from "./src/ui/widgets"
-export * from "./src/ui/panel"
-export * from "./src/ui/declarative"
-export * from "./src/ui/refreshable"
+export * from './src/runtime/global'
+export * from './src/native/index.native'
+export * from "./src/widget/index.widget"
+export * from "./src/panel/panel"
 export * from "./src/util/color"
 export * from './src/util/log'
 export * from './src/util/types'
 export * from './src/util/gravity'
 export * from './src/util/candies'
-export * from './src/vm/mvvm'
-export * from './src/runtime/global'
-export * from './src/native/index.native'
+export * from './src/util/layoutconfig'
+export * from './src/panel/mvvm'
diff --git a/js-framework/src/mock/driver.ts b/js-framework/src/mock/driver.ts
index 2276c415..d4a1c853 100644
--- a/js-framework/src/mock/driver.ts
+++ b/js-framework/src/mock/driver.ts
@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Panel } from '../ui/panel'
-import { View } from '../ui/view'
+import { Panel } from '../panel/panel'
+import { View } from '../widget/view'
 
 export interface Driver {
     /**
diff --git a/js-framework/src/native/navbar.ts b/js-framework/src/native/navbar.ts
index bb6890a6..92b93855 100644
--- a/js-framework/src/native/navbar.ts
+++ b/js-framework/src/native/navbar.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { BridgeContext } from "../runtime/global"
-import { Panel } from "../ui/panel"
+import { Panel } from "../panel/panel"
 import { Color } from "../util/color"
 
 export function navbar(context: BridgeContext) {
diff --git a/js-framework/src/vm/mvvm.ts b/js-framework/src/panel/mvvm.ts
similarity index 96%
rename from js-framework/src/vm/mvvm.ts
rename to js-framework/src/panel/mvvm.ts
index 24eb05d9..bba3d6c6 100644
--- a/js-framework/src/vm/mvvm.ts
+++ b/js-framework/src/panel/mvvm.ts
@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Group } from "../ui/view";
-import { Panel } from "../ui/panel";
+import { Group } from "../widget/view";
+import { Panel } from "./panel";
 
 export abstract class ViewHolder<M>{
     abstract build(root: Group): void
diff --git a/js-framework/src/ui/panel.ts b/js-framework/src/panel/panel.ts
similarity index 97%
rename from js-framework/src/ui/panel.ts
rename to js-framework/src/panel/panel.ts
index f0ddb530..845f6dc7 100644
--- a/js-framework/src/ui/panel.ts
+++ b/js-framework/src/panel/panel.ts
@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import './../runtime/global'
-import { View, Group } from "./view";
+import '../runtime/global'
+import { View, Group } from "../widget/view";
 import { loge, log } from '../util/log';
 import { Model } from '../util/types';
-import { Root } from './layout';
+import { Root } from '../widget/layouts';
 
 
 export function NativeCall(target: Panel, propertyKey: string, descriptor: PropertyDescriptor) {
diff --git a/js-framework/src/runtime/sandbox.ts b/js-framework/src/runtime/sandbox.ts
index 8404190d..f86b9ed8 100644
--- a/js-framework/src/runtime/sandbox.ts
+++ b/js-framework/src/runtime/sandbox.ts
@@ -36,7 +36,7 @@ import "reflect-metadata"
  *  Reflect.apply(function(__module){
  *           (function(module,exports,require){
  *                      //module content
- *                  })(__module,__module.exports,hego.__require__);
+ *                  })(__module,__module.exports,doric.__require__);
  *           return __module.exports
  *      },this,[{exports:{}}])
  * ])
diff --git a/js-framework/src/ui/declarative.ts b/js-framework/src/util/layoutconfig.ts
similarity index 55%
rename from js-framework/src/ui/declarative.ts
rename to js-framework/src/util/layoutconfig.ts
index 02a5e61b..b074056f 100644
--- a/js-framework/src/ui/declarative.ts
+++ b/js-framework/src/util/layoutconfig.ts
@@ -13,73 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { View, LayoutSpec, LayoutConfig } from './view'
-import { Stack, HLayout, VLayout } from './layout'
-import { IText, IImage, Text, Image } from './widgets'
-import { IList, List } from './list'
-import { ISlider, Slider } from './slider'
-import { Gravity } from '../util/gravity'
-import { Modeling } from '../util/types'
+import { Gravity } from "./gravity";
+import { Modeling } from "./types";
 
-export function text(config: IText) {
-    const ret = new Text
-    ret.layoutConfig = layoutConfig().wrap()
-    for (let key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
-    }
-    return ret
+export enum LayoutSpec {
+    EXACTLY = 0,
+    WRAP_CONTENT = 1,
+    AT_MOST = 2,
 }
 
-export function image(config: IImage) {
-    const ret = new Image
-    ret.layoutConfig = layoutConfig().wrap()
-    for (let key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+export interface LayoutConfig {
+    widthSpec?: LayoutSpec
+    heightSpec?: LayoutSpec
+    margin?: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
     }
-    return ret
-}
-
-export function stack(views: View[]) {
-    const ret = new Stack
-    ret.layoutConfig = layoutConfig().wrap()
-    for (let v of views) {
-        ret.addChild(v)
-    }
-    return ret
-}
-
-export function hlayout(views: View[]) {
-    const ret = new HLayout
-    ret.layoutConfig = layoutConfig().wrap()
-    for (let v of views) {
-        ret.addChild(v)
-    }
-    return ret
-}
-
-export function vlayout(views: View[]) {
-    const ret = new VLayout
-    ret.layoutConfig = layoutConfig().wrap()
-    for (let v of views) {
-        ret.addChild(v)
-    }
-    return ret
-}
-
-export function list(config: IList) {
-    const ret = new List
-    for (let key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
-    }
-    return ret
-}
-
-export function slider(config: ISlider) {
-    const ret = new Slider
-    for (let key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
-    }
-    return ret
+    alignment?: Gravity
+    //Only affective in VLayout or HLayout
+    weight?: number
 }
 
 export class LayoutConfigImpl implements LayoutConfig, Modeling {
@@ -156,4 +110,4 @@ export class LayoutConfigImpl implements LayoutConfig, Modeling {
 
 export function layoutConfig() {
     return new LayoutConfigImpl
-}
\ No newline at end of file
+}
diff --git a/js-framework/src/ui/widgets.ts b/js-framework/src/widget/image.ts
similarity index 71%
rename from js-framework/src/ui/widgets.ts
rename to js-framework/src/widget/image.ts
index d1157a45..187681c2 100644
--- a/js-framework/src/ui/widgets.ts
+++ b/js-framework/src/widget/image.ts
@@ -14,33 +14,7 @@
  * limitations under the License.
  */
 import { IView, View, Property } from "./view"
-import { Color } from "../util/color"
-import { Gravity } from "../util/gravity"
-
-export interface IText extends IView {
-    text?: string
-    textColor?: Color
-    textSize?: number
-    maxLines?: number
-    textAlignment?: Gravity
-}
-
-export class Text extends View implements IText {
-    @Property
-    text?: string
-
-    @Property
-    textColor?: Color
-
-    @Property
-    textSize?: number
-
-    @Property
-    maxLines?: number
-
-    @Property
-    textAlignment?: Gravity
-}
+import { layoutConfig } from "../util/layoutconfig"
 
 export enum ScaleType {
     ScaleToFill = 0,
@@ -65,4 +39,13 @@ export class Image extends View implements IImage {
 
     @Property
     loadCallback?: (image: { width: number; height: number } | undefined) => void
+}
+
+export function image(config: IImage) {
+    const ret = new Image
+    ret.layoutConfig = layoutConfig().wrap()
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
 }
\ No newline at end of file
diff --git a/js-framework/src/widget/index.widget.ts b/js-framework/src/widget/index.widget.ts
new file mode 100644
index 00000000..3bddbee9
--- /dev/null
+++ b/js-framework/src/widget/index.widget.ts
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+export * from './view'
+export * from './layouts'
+export * from './text'
+export * from './image'
+export * from './list'
+export * from './slider'
+export * from './scroller'
+export * from './refreshable'
\ No newline at end of file
diff --git a/js-framework/src/ui/layout.ts b/js-framework/src/widget/layouts.ts
similarity index 63%
rename from js-framework/src/ui/layout.ts
rename to js-framework/src/widget/layouts.ts
index 7b5dbf99..2f707f88 100644
--- a/js-framework/src/ui/layout.ts
+++ b/js-framework/src/widget/layouts.ts
@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Group, Property, IView } from "./view";
+import { Group, Property, IView, View } from "./view";
 import { Gravity } from "../util/gravity";
+import { layoutConfig } from "../util/layoutconfig";
 
 export interface IStack extends IView {
 }
@@ -49,3 +50,30 @@ export interface IHLayout extends IView {
 
 export class HLayout extends LinearLayout implements IHLayout {
 }
+
+export function stack(views: View[]) {
+    const ret = new Stack
+    ret.layoutConfig = layoutConfig().wrap()
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}
+
+export function hlayout(views: View[]) {
+    const ret = new HLayout
+    ret.layoutConfig = layoutConfig().wrap()
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}
+
+export function vlayout(views: View[]) {
+    const ret = new VLayout
+    ret.layoutConfig = layoutConfig().wrap()
+    for (let v of views) {
+        ret.addChild(v)
+    }
+    return ret
+}
\ No newline at end of file
diff --git a/js-framework/src/ui/list.ts b/js-framework/src/widget/list.ts
similarity index 85%
rename from js-framework/src/ui/list.ts
rename to js-framework/src/widget/list.ts
index 780c2302..3028381d 100644
--- a/js-framework/src/ui/list.ts
+++ b/js-framework/src/widget/list.ts
@@ -14,18 +14,9 @@
  * limitations under the License.
  */
 
-import { View, Property, LayoutSpec, Superview, IView } from "./view";
-import { Stack } from "./layout";
-
-export function listItem(item: View) {
-    return (new ListItem).also((it) => {
-        it.layoutConfig = {
-            widthSpec: LayoutSpec.WRAP_CONTENT,
-            heightSpec: LayoutSpec.WRAP_CONTENT,
-        }
-        it.addChild(item)
-    })
-}
+import { View, Property, Superview, IView } from "./view";
+import { Stack } from "./layouts";
+import { layoutConfig } from "../util/layoutconfig";
 
 export class ListItem extends Stack {
     /**
@@ -87,4 +78,19 @@ export class List extends Superview implements IList {
             return listItem.toModel()
         })
     }
-}
\ No newline at end of file
+}
+
+export function list(config: IList) {
+    const ret = new List
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
+
+export function listItem(item: View) {
+    return (new ListItem).also((it) => {
+        it.layoutConfig = layoutConfig().wrap()
+        it.addChild(item)
+    })
+}
diff --git a/js-framework/src/ui/refreshable.ts b/js-framework/src/widget/refreshable.ts
similarity index 97%
rename from js-framework/src/ui/refreshable.ts
rename to js-framework/src/widget/refreshable.ts
index 5756d40f..b7b75d47 100644
--- a/js-framework/src/ui/refreshable.ts
+++ b/js-framework/src/widget/refreshable.ts
@@ -2,7 +2,7 @@ import { View, Property, Superview, IView } from "./view";
 import { List } from "./list";
 import { Scroller } from "./scroller";
 import { BridgeContext } from "../runtime/global";
-import { layoutConfig } from "./declarative";
+import { layoutConfig } from "../util/layoutconfig";
 
 export interface IRefreshable extends IView {
     content: View
diff --git a/js-framework/src/ui/scroller.ts b/js-framework/src/widget/scroller.ts
similarity index 83%
rename from js-framework/src/ui/scroller.ts
rename to js-framework/src/widget/scroller.ts
index 88658148..6393d36e 100644
--- a/js-framework/src/ui/scroller.ts
+++ b/js-framework/src/widget/scroller.ts
@@ -13,14 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Superview, View, Property, IView, LayoutSpec } from './view'
+import { Superview, View, IView } from './view'
+import { layoutConfig } from '../util/layoutconfig'
 
 export function scroller(content: View) {
     return (new Scroller).also(v => {
-        v.layoutConfig = {
-            widthSpec: LayoutSpec.WRAP_CONTENT,
-            heightSpec: LayoutSpec.WRAP_CONTENT,
-        }
+        v.layoutConfig = layoutConfig().wrap()
         v.content = content
     })
 }
diff --git a/js-framework/src/ui/slider.ts b/js-framework/src/widget/slider.ts
similarity index 80%
rename from js-framework/src/ui/slider.ts
rename to js-framework/src/widget/slider.ts
index 0778b6e5..d8bc5199 100644
--- a/js-framework/src/ui/slider.ts
+++ b/js-framework/src/widget/slider.ts
@@ -1,15 +1,6 @@
-import { Superview, View, LayoutSpec, Property, IView } from "./view";
-import { Stack } from "./layout";
-
-export function slideItem(item: View) {
-    return (new SlideItem).also((it) => {
-        it.layoutConfig = {
-            widthSpec: LayoutSpec.AT_MOST,
-            heightSpec: LayoutSpec.AT_MOST,
-        }
-        it.addChild(item)
-    })
-}
+import { Superview, View, Property, IView } from "./view";
+import { Stack } from "./layouts";
+import { layoutConfig } from "../util/layoutconfig";
 
 export class SlideItem extends Stack {
     /**
@@ -69,4 +60,19 @@ export class Slider extends Superview implements ISlider {
             return slideItem.toModel()
         })
     }
+}
+
+export function slideItem(item: View) {
+    return (new SlideItem).also((it) => {
+        it.layoutConfig = layoutConfig().wrap()
+        it.addChild(item)
+    })
+}
+
+export function slider(config: ISlider) {
+    const ret = new Slider
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
 }
\ No newline at end of file
diff --git a/js-framework/src/widget/text.ts b/js-framework/src/widget/text.ts
new file mode 100644
index 00000000..6af68812
--- /dev/null
+++ b/js-framework/src/widget/text.ts
@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+import { IView, View, Property } from "./view"
+import { Color } from "../util/color"
+import { Gravity } from "../util/gravity"
+import { layoutConfig } from "../util/layoutconfig"
+
+export interface IText extends IView {
+    text?: string
+    textColor?: Color
+    textSize?: number
+    maxLines?: number
+    textAlignment?: Gravity
+}
+
+export class Text extends View implements IText {
+    @Property
+    text?: string
+
+    @Property
+    textColor?: Color
+
+    @Property
+    textSize?: number
+
+    @Property
+    maxLines?: number
+
+    @Property
+    textAlignment?: Gravity
+}
+
+export function text(config: IText) {
+    const ret = new Text
+    ret.layoutConfig = layoutConfig().wrap()
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
+}
\ No newline at end of file
diff --git a/js-framework/src/ui/view.ts b/js-framework/src/widget/view.ts
similarity index 95%
rename from js-framework/src/ui/view.ts
rename to js-framework/src/widget/view.ts
index 1cabf6e0..899ff3a7 100644
--- a/js-framework/src/ui/view.ts
+++ b/js-framework/src/widget/view.ts
@@ -16,29 +16,9 @@
 import { Color, GradientColor } from "../util/color"
 import { Modeling, Model, obj2Model } from "../util/types";
 import { uniqueId } from "../util/uniqueId";
-import { Gravity } from "../util/gravity";
 import { loge } from "../util/log";
 import { BridgeContext } from "../runtime/global";
-
-export enum LayoutSpec {
-    EXACTLY = 0,
-    WRAP_CONTENT = 1,
-    AT_MOST = 2,
-}
-
-export interface LayoutConfig {
-    widthSpec?: LayoutSpec
-    heightSpec?: LayoutSpec
-    margin?: {
-        left?: number,
-        right?: number,
-        top?: number,
-        bottom?: number,
-    }
-    alignment?: Gravity
-    //Only affective in VLayout or HLayout
-    weight?: number
-}
+import { LayoutConfig } from '../util/layoutconfig'
 
 export function Property(target: Object, propKey: string) {
     Reflect.defineMetadata(propKey, true, target)