DEV Community


Posted on

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

Perhaps Mithril does not fit your brain,pitty😊, and you are in search of a very lightweight frontend, I suggest you to give an eye on Sinuous

In the following example, I have tried to implement the Meiosis pattern with Sinuous and Mergerino.

I must say I am really impressed by Sinuous

If you want to test its "lightness" look here : sinuousmeiosis

const o = sinuous.o  // observable :-)
const html = sinuous.html
const 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)

// 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`
      Hello <strong>${s.nom}</strong>, 
      you are <strong>${s.age}</strong> years old and have
      <strong>${s.points}</strong> points
      <button onclick=${actions.incPoints}>Inc Points</button>
      <button onclick=${actions.incAge}>Inc Age</button>

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


You can test it here sinuous

Discussion (0)