Frontend : If you !(love(Mithril)) then what else ?

 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());