자체 마이크로 프런트엔드 프레임워크 조립

자신의 PC를 조립하는 것이 일반적이던 시절이 있었습니다.
마더보드, 그래픽 카드 등을 선택했습니다.
그 시간은 우리 대다수에게 사라졌습니다 ...

그러나 우리가 즐겨찾는 라이브러리에서 또는 즐겨찾기 라이브러리로 동일한 작업을 수행하는 것을 방해하는 것은 없습니다.

나는 모델/보기/업데이트 a.k.a Sam Pattern에 매우 익숙합니다.

이 접근 방식을 취하는 훌륭한 라이브러리가 있습니다 ELM, HyperApp, AppRun, Meiosis(라이브러리보다 패턴에 가깝습니다)...

그러나 그들 중 어느 것도 나를 완전히 만족시키지 못했기 때문에 나는 내 요구에 맞고 Javascript를 '싫어'하고 node.js에 대해 아무것도 모르는 동료들이 쉽게 사용할 수 있는 것을 조립하기로 결정했습니다.

이를 위해 SinuousJS 및 Unistore을 사용하고 MVU.js를 만듭니다.

vite.js로 아주 간단한 프로젝트를 만들었고, 기본 스크립트에 다음 줄을 포함했습니다.

import htm from 'sinuous/htm';
import { observable, subscribe } from 'sinuous/observable';
import  { render, context }  from './src/render';
import createStore from 'unistore';

const r = context()
function html() {
  return htm.apply(r, arguments);
}

const MVU =  { render, html, observable, subscribe, createStore };
window.MVU = MVU;

주요 목표는 뷰를 상태(또는 모델)의 기능으로 만드는 것이었습니다.

다음은 기존 카운터의 데모입니다.

const {html, render, observable, createStore} = MVU;

const State = observable({});

const Model = createStore({
  counter : 0
});

const inc = Model.action ((model, value = 1) => {
  return ({counter : model.counter + value}); 
})

Model.subscribe(store => State(store));

function View () {
  let state = State();
  return html `
    <h1>Counter ${state.counter} </h1>
    <button id="incer">INC</button>
  `
}

function startApp () {

  Model.setState();

  render(View, document.body);

  document.getElementById("incer")
          .addEventListener("click", () => inc(1));
}

startApp()

여기에서 테스트할 수 있습니다: MVUCounter

버튼이 재생성되지 않는 동안 카운터가 어떻게 업데이트되는지 확인하십시오. SinuousJS 덕분에 '클릭 리스너'가 손실되지 않습니다.

Unistore는 모델이 변경될 때마다 구독자를 '반응'하고 '호출'할 수 있습니다.

이 모델에는 모델과 뷰가 완전히 분리되어 있습니다.
작업은 하나의 고유한 지점에 집중되어 모든 코드를 어지럽히지 않습니다.

약간의 리팩토링을 해보자:

import { State } from "./state.js"
import { Actions } from "./actions.js"
import { Model } from "./model.js"

const {html, render} = MVU;

function View () {
  let state = State();
  return html `
    <h1>Counter ${state.counter || 0} </h1>
    <button onclick=${() => Actions.inc(1)}>INC</button>
  `
}

render(View, document.body);

여기에서 테스트할 수 있습니다SAMCounter.

가서 당신의 것을 조립하고 (아니면) 그것을 만든 이유를 알려주십시오 :-)