프론트엔드: 만약 당신이 !(love(Mithril)) 그렇다면 또 무엇입니까?

아마도 Mithril은 당신의 두뇌에 맞지 않을 것입니다, 불쌍한 😊 그리고 당신은 매우 가벼운 프런트 엔드를 찾고 있습니다.

다음 예제에서는 Sinuous와 Mergerino로 감수분열 패턴을 구현해 보았습니다.

나는 Sinuous에 정말 감동했다고 말해야합니다.

"가벼움"을 테스트하려면 여기를 보십시오: Sinuous

const o = sinuous.o  // observable :-)
const html = sinuous.html
const map = sinuous.map
const merge = mergerino  //enhanced Object.assign

// Here we observe an array, I have tried to observe the
// object directely with no success
// So we have to "map" on state to retrieve the object
// Look at the App function below
let state = o([
  {
     nom: "Albert",
     age: 58,
     points: 100
  }
]);

// Little helper
state.merge = function (patch) {
  //not very friendly but handy
  //'this' refers to 'state'
  let current = this()[0] 
  let newstate =  merge(current, patch)
  state([newstate])
}

// mergerino accepts functions for updating properties
// very handy
let actions  = {
  incPoints : () => state.merge({
    points : p => p + 1
  }),
  incAge : () =>  state.merge({
    age: (a) => a + 1
  })
}

// The view is a function of the state.
// All the actions are centralized in a unique object
function view(s) {
  return  html`
    <div>
      Hello <strong>${s.nom}</strong>, 
      you are <strong>${s.age}</strong> years old and have
      <strong>${s.points}</strong> points
    </div>
    <p>
      <button onclick=${actions.incPoints}>Inc Points</button>
      <button onclick=${actions.incAge}>Inc Age</button>
    </p>
    `
}

const App = function () {
  return html`${map(state, view)}`
}

document.querySelector('.app')
        .append(App());

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