diff --git a/README.KR.md b/README.KR.md
index de87bb2b4..a8a8ca807 100644
--- a/README.KR.md
+++ b/README.KR.md
@@ -15,7 +15,7 @@
- [**Web Components**](https://developers.google.com/web/fundamentals/web-components/) 와 [**JSX**](https://reactjs.org/docs/introducing-jsx.html) 가 하나의 프레임워크에.
- omi-mobx를 통한 omi 와 mobx 를 함께 사용 (`this.update()` 호출 필요 없음).
- Web Components 가 데이터 기반(data-driven)의 뷰가 될수 있음, **`UI = fn(data)`**.
-- JSX 는 최소의 UI 표현식으로 최상의 개발경험을 제공 (코드 인텔리전트 와 팁) [grammatical noise](https://github.com/facebook/jsx#why-not-template-literals).
+- JSX 는 최소의 UI 표현식으로 최상의 개발경험을 제공 (코드 인텔리전트 와 팁) [grammatical noise](https://github.com/facebook/jsx#why-not-template-literals) 그리고 완벽하게 튜링됨(템플릿 엔진은 X).
- 독창적인 **Path Updating** 시스템. Proxy 기반 자동 **정확한** 업데이트, **저손실**, 높은 자유도, 뛰어난 성능, `requestIdleCallback` 로 통합하기 쉬움.
- **store system** 을 사용해서 `this.update` 와 작별하세요! store 가 자동으로 데이터와 관련된 UI를 업데이트 합니다.
- 봐주세요 [Facebook React vs Web Components](https://softwareengineering.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer)，Omi 는 이것들의 강점을 결합하여 개발자가 자유롭게 자신이 원하는 방식을 선택할 수 있게 해줍니다.
@@ -65,8 +65,10 @@ Omi는 Shadow DOM 기반 스타일 분기 및 시멘틱 구조를 사용합니
| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | [page](https://github.com/visionmedia/page.js) 를 통한 소형의 클라이언트 사이드 라우터 |
| [omi-tap](https://github.com/Tencent/omi/tree/master/packages/omi-tap)| 탭 이벤트 지원 |
| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)| 터치 와 제스처 이벤트 지원 |
+| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)| 부드러운 스크롤링, Rotation, 웹 페이지를 위한 어떤 모션도 Refresh |
| [omi-mobx](https://github.com/Tencent/omi/tree/master/packages/omi-mobx)| Omi Mobx Adapter |
| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md#use)| React Hooks 방식 API |
+| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)| Web Components Native 렌더링 |
| [omi element ui(working)](https://github.com/Tencent/omi/tree/master/packages/omi-element-ui)| Omi 버전의 element-ui |
Other:
@@ -580,6 +582,15 @@ class MyApp extends WeElement {
}
```
+`observe`를 사용하면 다음 함수에서 데이터의 값을 설정하지 말아야 한다는 점을 유의해야 합니다. 일부 속성은 obj 또는 arr 과 같은 복잡한 객체입니다.
+
+* render
+* beforeRender
+* beforeUpdate
+* afterUpdate
+
+왜냐하면 data는 단순히 이전과 이후의 값을 비교하기 때문에 복잡한 오브젝트는 완전히 대조되지 않고 비교 값은은 업데이트를 트리거하고 업데이트는 위의 함수를 트리거하며 무한 반복됩니다.
+
만약 IE11과 호환하기를 원하시면, omi의 observe 대신 `omi-mobx` 를 사용해주세요.
### Omi Mobx
diff --git a/tutorial/render-web-components-to-native.kr.md b/tutorial/render-web-components-to-native.kr.md
new file mode 100644
index 000000000..3fd8c9a3a
--- /dev/null
+++ b/tutorial/render-web-components-to-native.kr.md
@@ -0,0 +1,194 @@
+## Web Components 를 Native 에 렌더링 하는 방법
+
+어떻게 Web Components를 Native에 렌더링할까요? [Omi Framework](https://github.com/Tencent/omi) 가 바로 하나의 예입니다. Omi는 [Web Components 기반](https://github.com/Tencent/omi#why-omi) 으로 디자인 되었습니다.
+
+
+## 업계 현황
+
+현재 Native에 렌더링 하는 두 가지 방식이 있습니다:
+
+* Flutter
+ * 고성능의 Skia 렌더링 엔진으로 GPU를 사용하여 직접 렌더링
+ * Dart 언어를 사용하여 개발
+* React Native, Weex, Taro, Hippy, Plato
+ * Bridge 와 JSCore를 사용하여 렌더 명령어 전송
+ * JavaScript 언어를 상요하여 개발
+ * 각 JSCore 와 Native는 동일한 DOM 트리를 유지합니다.
+
+Omi 는 두 번째 방법을 사용합니다. [→ omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native).
+
+## 사전연구
+
+왜냐하면 Web Components 는 `HTMLElement`를 기반으로 하기 때문에 Omi의 커스텀 엘리먼트가 `WeElement`를 상속하는 것을 볼수 있습니다:
+
+```js
+import { render, WeElement, define } from 'omi'
+
+define('my-counter', class extends WeElement {
+ static observe = true
+
+ data = {
+ count: 1
+ }
+
+ sub = () => {
+ this.data.count--
+ }
+
+ add = () => {
+ this.data.count++
+ }
+
+ render() {
+ return (
+
+
+ {this.data.count}
+
+
+ )
+ }
+ })
+
+render(, 'body')
+```
+
+Omi 소스코드를 통하여 `WeElement`가 `HTMLElement`로 부터 상속된것을 알 수 있습니다:
+
+```js
+class WeElement extends HTMLElement {
+ ...
+}
+```
+
+왜냐하면 JSCore에서 Native에 메세지를 보내기를 원하기 때문에 먼저 잘 동작하는지 확인을 해야 합니다. 그러나 JSCore에는 DOM 과 BOM이 없습니다. 물론 `HTMLElement`가 DOM에 속하기는 하지만 기본적으로 DOM 은 아닙니다. 그래서 Ommi는 JSCore에서 에러를 리포트 합니다. 그래서 이 문제에 대한 정답은 surface입니다.
+
+## HTMLElement 시뮬레이션
+
+브라우저 디자인：
+
+* HTMLElement는 부모의 인터페이스(Element 와 GlobalEventHandlers) 를 상속합니다
+* Element는 Node(appendChild, removeChild, insertBefore가 정의된)로 부터 상속됩니다
+* Node 는 부모의 EventTarget 클래스로부터 프로퍼티를 상속받습니다.
+
+그러나 우리는 브라우저가 실행하는 방법과 완벽히 동일하게 구현할 필요는 없습니다. 그리고 모든 API도 구현할 필요는 없습니다. 오직 `omi-native`만 구현하면 됩니다.
+
+* Element
+* HTMLElement
+* Document
+
+HTMLElement는 Element를 상속합니다. 어떤 API들이 구현이 필요한지 그리고 Omi 가 사용하는 DOM API 에 대한 소개입니다:
+
+* HTMLElement
+ * connectedCallback
+ * disconnectedCallback
+* Element
+ * addEventListener
+ * removeEventListener
+ * removeAttribute
+ * setAttribute
+ * removeChild
+ * appendChild
+ * replaceChild
+ * style
+* Document
+ * createElement
+
+따라서 위의 API를 구현하면 Omi 프로젝트가 오류없이 JSCore에서 실행될 수 있지만 오류만 제공하는 것은 충분하지 않습니다. 명령을 앞뒤로 보내야 합니다.
+명령어 전달의 의미는 DOM 트리를 Native로 유지하고 JSCore가 유지 관리하는 DOM 트리를 일관되게 만드는 것입니다. 명령 전송의 빈도는 시간 소요에 직접적으로 영향을 미치며 명령 전송 빈도가 낮을수록 좋습니다. 따라서 appendChild에 브릿지 통신을 주입할때 Child등을 제거할때의 플로우 원리는 다음과 같습니다:
+
+* 실제 트리에 있는 DOM 에만 작업 명령을 보냅니다.
+
+그래서 Node를 통해 노드에 붙어있는 `document.createElement`, `appendChild` 또는 `removeChild` 는 어떤 명령도 보내지 않습니다.
+
+## Life cycle
+
+Omi의 커스텀 엘리먼트의 Life cycle은 아래와 같습니다:
+
+| Lifecycle method | When it gets called |
+| ---------------- | -------------------------------------------- |
+| `install` | component가 DOM 에마운트 되기전 |
+| `installed` | component가 DOM 에 마운트 된후 |
+| `uninstall` | DOM에서 제거하기 전에 |
+| `beforeUpdate` | 업데이트 전 |
+| `afterUpdate` | 업데이트 후 |
+| `beforeRender` | `render()` 메서드 호출 전 |
+
+어떻게 Omi의 Life cycle이 JSCore에서 정상적으로 작동하는지는 Omi의 WeElement를 통해 알수있습니다:
+
+```js
+ connectedCallback() {
+ ...
+ ...
+ this.install()
+ const shadowRoot = this.attachShadow({ mode: 'open' })
+
+ this.css && shadowRoot.appendChild(cssToDom(this.css()))
+ this.beforeRender()
+ options.afterInstall && options.afterInstall(this)
+ ...
+ ...
+ this.installed()
+ this._isInstalled = true
+ }
+
+ disconnectedCallback() {
+ this.uninstall()
+ if (this.store) {
+ for (let i = 0, len = this.store.instances.length; i < len; i++) {
+ if (this.store.instances[i] === this) {
+ this.store.instances.splice(i, 1)
+ break
+ }
+ }
+ }
+ }
+```
+
+Omi의 Life cycle은 HTMLElement의 `connectedCallback` 과 `disconnectedCallback` 에 전적으로 의존합니다.
+
+* connectedCallback 엘리먼트가 페이지에 추가되면 트리거 발생
+* disconnectedCallback 엘리먼트가 페이지에서 제거되면 트리거 발생
+
+`HTMLElement` 와 `Element` 모두 자체 구현되어 있기 때문에 `connectedCallback` 과 `disconnectedCallback`으로 실행 시기를 제어할 수 있습니다. 왜냐하면 엘리먼트가 DOM 트리에 추가되는 시기를 알수 있기 때문입니다. 예를들어 추가할때:
+
+```js
+ appendChild(node) {
+ if (!node.parentNode) {
+ linkParent(node, this)
+ insertIndex(node, this.childNodes, this.childNodes.length, true)
+ if(this.connectedCallback){
+ this.connectedCallback()
+ }
+ ...
+ }
+```
+
+제거할때：
+
+```js
+ removeChild(node) {
+ if (node.parentNode) {
+ removeIndex(node, this.childNodes, true)
+ if(this.disconnectedCallback){
+ this.disconnectedCallback()
+ }
+ }
+ ...
+ }
+```
+
+## 이벤트 바인딩
+
+JS에서 이벤트 바인딩 함수의 호출은 context 정보를 포함하고 있기 때문에 클라이언트에게 전송할 수 없습니다. 그렇기 때문에 Native 엘리먼트의 id와 이벤트 바인딩 type 만 알려줄 필요가 있으며 클라이언트에 전송할 시 엘리먼트 id 와 이벤트 바인딩 type만 알려주면 됩니다.
+
+```js
+ addEventListener(type, handler) {
+ if (!this.event[type]) {
+ this.event[type] = handler
+ this.ownerDocument.addEvent(this.ref, type)
+ }
+ }
+```
+
+[→ 소스코드 Fork](https://github.com/Tencent/omi/tree/master/packages/omi-native/src/native)
diff --git a/tutorial/render-web-components-to-native.md b/tutorial/render-web-components-to-native.md
index ba38a01c6..d41660917 100644
--- a/tutorial/render-web-components-to-native.md
+++ b/tutorial/render-web-components-to-native.md
@@ -1 +1,195 @@
-##
+## Render Web Components to Native
+
+How to render Web Components to Native? [Omi Framework](https://github.com/Tencent/omi) is one of example because Omi is designed as [Web Components based](https://github.com/Tencent/omi#why-omi).
+
+
+## Industry Status
+
+Now, there are two genres rendering to Native：
+
+* Flutter
+ * Use Skia high performance rendering engin to render by GPU directly
+ * Develop using the Dart language
+* React Native, Weex, Taro, Hippy, Plato
+ * Through Bridge and JSCore transmit command to render
+ * Develop using JavaScript language
+ * JSCore and Native each maintain the same DOM tree
+
+Here, Omi uses the second way to achieve [→ omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native).
+
+## Pre research
+
+Because Web Components is based on `HTMLElement`. You can see that a custom element of Omi is inherited from `WeElement`:
+
+```js
+import { render, WeElement, define } from 'omi'
+
+define('my-counter', class extends WeElement {
+ static observe = true
+
+ data = {
+ count: 1
+ }
+
+ sub = () => {
+ this.data.count--
+ }
+
+ add = () => {
+ this.data.count++
+ }
+
+ render() {
+ return (
+
+
+ {this.data.count}
+
+
+ )
+ }
+ })
+
+render(, 'body')
+```
+
+Through the Omi source code, you can see `WeElement` is inherited from `HTMLElement`:
+
+```js
+class WeElement extends HTMLElement {
+ ...
+}
+```
+
+
+Since you want to send command to Native in JSCore, first you must make sure that it works correctly. However in JSCore, there is no DOM and BOM, even though `HTMLElement` is belong to DOM, it is basically not. Thus, Omi project will report an error in JSCore so the answer to the problem is surface.
+
+## Simulation HTMLElement
+
+In Browser Design：
+
+* HTMLElement inherits from the parent interfaces: Element and GlobalEventHandlers
+* Element inherits from Node (which appendChild, removeChild, insertBefore defined in)
+* Node inherits properties from its parent class EventTarget
+
+However our implementation does not necesaaarily need to be exactly the same as the browser implementation, not to implement all APIs so `omi-native` is only implemented:
+
+* Element
+* HTMLElement
+* Document
+
+Among them, HTMLElement inherits from Element, what APIs needs to be implemented, it is a simple introduce DOM API which Omi are using:
+
+* HTMLElement
+ * connectedCallback
+ * disconnectedCallback
+* Element
+ * addEventListener
+ * removeEventListener
+ * removeAttribute
+ * setAttribute
+ * removeChild
+ * appendChild
+ * replaceChild
+ * style
+* Document
+ * createElement
+
+So as long as the implementation of the above APIs will ensure that the Omi project can run in JSCore without error, but just not giving an error is not enough. You need to send command back and forth.
+The meaning of instruction transfer is to make the DOM tree maintained by Native and the DOM tree maintained by JSCore consistent. The frequency of command transmission directly affects the time consuming, and the lower the command transmission frequency, the better. Thus, when injecting bridge communication into appendChild, remove Child, etc., the principles to fllow are:
+
+* Only DOM operations that actually fall on the tree send command.
+
+So it is conceivable that `document.createElement` or `appendChild`, `removeChild` which over node are not sending any commands.
+
+## Life cycle
+
+Omi Life cycle of custome element is as following:
+
+| Lifecycle method | When it gets called |
+| ---------------- | -------------------------------------------- |
+| `install` | before the component gets mounted to the DOM |
+| `installed` | after the component gets mounted to the DOM |
+| `uninstall` | prior to removal from the DOM |
+| `beforeUpdate` | before update |
+| `afterUpdate` | after update |
+| `beforeRender` | before `render()` |
+
+How to ensure that Omi's life cycle is performed normally in JSCore. Through Omi WeElement, it can be known:
+
+```js
+ connectedCallback() {
+ ...
+ ...
+ this.install()
+ const shadowRoot = this.attachShadow({ mode: 'open' })
+
+ this.css && shadowRoot.appendChild(cssToDom(this.css()))
+ this.beforeRender()
+ options.afterInstall && options.afterInstall(this)
+ ...
+ ...
+ this.installed()
+ this._isInstalled = true
+ }
+
+ disconnectedCallback() {
+ this.uninstall()
+ if (this.store) {
+ for (let i = 0, len = this.store.instances.length; i < len; i++) {
+ if (this.store.instances[i] === this) {
+ this.store.instances.splice(i, 1)
+ break
+ }
+ }
+ }
+ }
+```
+
+Omi's life cycle relies entirely on the `connectedCallback` and `disconnectedCallback` of `HTMLElement`.
+
+* connectedCallback triggered when an element is inserted into the page
+* disconnectedCallback triggered when an element is removed from the page
+
+Since `HTMLElement` and `Element` are both self-implemented so you can control execution time of `connectedCallback` and `disconnectedCallback` because you know when the element is inserted into the DOM tree. For example, when append:
+
+```js
+ appendChild(node) {
+ if (!node.parentNode) {
+ linkParent(node, this)
+ insertIndex(node, this.childNodes, this.childNodes.length, true)
+ if(this.connectedCallback){
+ this.connectedCallback()
+ }
+ ...
+ }
+```
+
+When removed：
+
+```js
+ removeChild(node) {
+ if (node.parentNode) {
+ removeIndex(node, this.childNodes, true)
+ if(this.disconnectedCallback){
+ this.disconnectedCallback()
+ }
+ }
+ ...
+ }
+```
+
+## Event binding
+
+Since the callback function of the event binding in JS contains context information and cannot be transmitted to the client. It only needs to tell the id of the native element and the type of the event binding. When the client triggers, it only needs to transfer the id of the element and the type of the event.
+
+```js
+ addEventListener(type, handler) {
+ if (!this.event[type]) {
+ this.event[type] = handler
+ this.ownerDocument.addEvent(this.ref, type)
+ }
+ }
+```
+
+[→ Fork to see the source code](https://github.com/Tencent/omi/tree/master/packages/omi-native/src/native)