Picodom과 Mobx로 TodoApp 콘셉트를 만들어 봤어요.

최근에는 약간Picodom을 만져봤어요. 있기 때문에 다른 프로그램 라이브러리와 함께 사용하려고 했는데, 이번에는 Mobx 상태 관리 Picodom으로 렌더링된 조합을 사용해 봤다.

메타데이터

동작 확인-jsFiddle

소스 코드 - nju33/example-picodom-mobx

동작 설명

둘 다 간단해서 설명할 게 없어요.
Mobx의 State 인스턴스를 작성하면 View가 State 상태를 변경하면 Picodom의patch가 실행됩니다.요약하면 이렇다.

const store = observable(...);
let _element = null;
let _oldNode = null;
autorun(() => {
  // 関数内でstoreが変更される
  const newNode = createNode(store);
  _element = patch(document.body, _element, _oldNode, newNode);
  _oldNode = newNode;
});
// Storeを変更するようなActionを持ったViewを作る
function createNode(store) {...}

autorun Observable의 값이 바뀌면 자동으로 주행하기 때문에 매번 스토어를 업데이트할 때마다 수동patch이 필요하지 않습니다.(예: 배열에 요소를 추가하거나 배열에 있는 요소의 값을 업데이트할 때)

하고 싶은데 안 한 거.

각 어셈블리의 파일 분할

아마 이런 느낌일 거예요.
hello.js

export default class Hello {
  node({name}) {
    return <div>{name}</div>
  }
}
// 無理にclassにしなくてもいいかも
function hello({name}) {
  return <div>{name}</div>
}

index.js

import {h, patch} from 'picodom';
import Hello from './hello';

const hello = new Hello();
patch(
  document.body,
  null,
  null,
  <hello.node name="nju33"/>
)

생각

patch 루트 부분만

State Management Library와 함께 사용하면 이점이 훨씬 줄어드는 느낌

웹팩을 사용하면 좋은 점이 많이 줄어든 것 같아요(->rollup)

역시 svelte?if 별로 안 좋아해요

picodom/dist/picodom이렇게만 picodom하면 없어./h해서 혼나고(확실히 없어) 걱정되고(혼자야?)