최근 Virtual DOM이 뜨겁다. 특히 Virtual DOMReact과 deku 같은 구성 요소 라이브러리의 설치에 사용되고 있어 주목받고 있다.
한편, virtual DOM 자체는 개념일 뿐이기 때문에 독립적으로 설치된virtual-dom 등 프로그램 라이브러리이전 기사도 있다.
그래서 가상 -dom를 기반으로 자체 제작된 React 같은 구성 요소 라이브러리도 재미있어서 시도해 봤습니다.

제작물의 개요

seanchas116/decompose

virtual-dom 기좌

보기와 상태를 통합한 구성 요소

간소화를 위해states/proops

를 구분하지 않음

같은 위치에서 이동하지만 같은 키를 눌렀을 때 같은 구성 요소는 변하지 않습니다

각 구성 요소에 독립된 diff/patch

성능을 위해.보아하니 데쿠도 같은 일을 하고 있는 것 같다(React가 너무 커서 아직 읽지 못했다...)

만약에 이것이 원시적인virtual-dom라면 실현하기 어렵고virtual-dom의 Widget 노드를 성공적으로 사용하면 실현할 수 있다

React와 달리 외부 구성 요소가 업데이트될 때 안쪽 구성 요소도 업데이트되지 않았습니다. (성능은 좋아졌지만 사용하기 편해졌나요?)

실제 DOM을 구성 요소로 처리할 수도 있음

(현재) 200줄 정도의 간단한 설치를 커피스크립트로 수행합니다.
현재는 커피스크립트 학급을 꾸준히 사용하고 있기 때문에 ES5 이전 JS에서 사용하기가 힘들 것으로 보인다.

예제

{Component} = require 'decompose'

class TodoView extends Component

  render: ->
    h 'li', [
      h 'h2', @todo.title
    ]

class TodoListView extends Component

  render: ->
    h 'ul', @todos.map (todo) =>
      TodoView.render todo: todo

todoListView = new TodoListView(todos: todoCollection.todos)
todoCollection.on 'update', ->
  todoListView.update()

new Mount(todoListView).mount('#main')

TodoMVC

이 프로그램 라이브러리에도 고정된 Todo MVC 설치를 써 보았다.
seanchas116/decompose-todomvc

이루어지다

Component

구성 요소의 기본 클래스입니다.

Mount

실제 DOM에 마운트합니다.1 본 토스트에서 Componentupdate로 1회 이상 토하는 이벤트로 이본 토스트가 완성되면 diff/patch를 진행한다.

ComponentNode

virtual-dom에 사용되는 diff/patch입니다.

성능

@dsuket선생님 https://github.com/dsuket/todomvc-perf-comparison포크 드릴게요)

손 옆 환경(OS X10.1+ 크롬39)이라면 왠지 토도 MVC에서 좋은 느낌의 퍼포먼스(맨 아래)(버그일 수도 있는데...)
기능을 추가하고 편리하게 사용하면 어떨지 아직은 알 수 없다.

총결산

virtual-dom를 기반으로 간단한 구성 요소 시스템을 쉽게 만들 수 있음

퍼포먼스도 많은 것 같은데?