Frontend : If you !(love(Mithril)) then what else ?
Tags: sinuous, meiosis, javascript, beginners
Published: 2020-09-14 11:45:49

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](https://sinuous.dev/)

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](https://sinuousmeiosis.surge.sh/) 




```js

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

You can test it here [sinuous](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ATAOgJwHYA0IAxgPYB2AzsQskVbAIYAO58UIBAZhAucgNqhS9MIiQgMACwAuYWO1qkp8RTQA6pADxQIANwAEhBuXIBeVSCaNzAPg0B6bTvksEhKRDK8xARiTeArCAAvniCwqLiAFa8BCSKylI0dnZ65BCkAK7EGeR69LCw6gCEHBmkbh6kABSkeABOAJTA5sQARpHwbuYmJlIAnozwxBx68AAejMR1UuQAZLPmZVDwXKSs5kW9A0MjYMRQGQgA-HVV45PT5A1I5qXl7mTdW4PDesur8PPv6fAYwlBHb5rKp8cznKYzcwAXXq11ONRMpAAPkiXBwGhgAO7pKDETGIrE4vEo4BBBpBKpSCQQch4Kp3CpkGpNBkPUh6U5NOrwKQZOrVOomADy7U6Uj+xggAHNkUjWZVmcAOFMqjp6HUOSZvABuOoadVSjIiRTkDAIUhSqm6gDU1qaao1UhMBqNCXIfDqUO1ytODtGenSeikDRFHTcGEYdWIUmj20k9HIQsxpAAClHBtM+hhCPlYJS8PAGvManx4FDeqWoeTubz+XpSGS-oxGLA+pTqbSXcaZuS-U75WR6-n4HgMnhiCyVX6OCZSXgICYB9UIPb1XkTPA+BAYbAzCBMmBWvA6k9+i8RvQjhk+PQoUh6HhTJvbdvtRAOFVvD0TFdiHwAAzlrA2rwLALABh+ADM36-nw3jlqcf7wSSISwA0IFgfAEFVP4MENFUSHloRKENKWfAvlCQEYeB75VCgeHAH6OgbuR1rbngjAmARcFETxJF8DoMJ9IuAlen0KK3GUjKkBszw7HosDzJJ9yVLJZ7yYwKJVMJjDzHwjBQiifAwoRomLlJbJVJOvprqQe7mPUJj-rqGhZualoSDadqkNae5Lqe2yvH0HpQkcwWetmubtjS1zhV6NZ8uyhAmBAeANg0eB9GFEY5BIVRoUgpmCb5sDWuY5hBKBNEflcjFrlA5kqUyXI8olQZNi2baZAUaX5rAo54KCIAOd1sBVuS2rEDl5B5cp0kBeeeh-oBgJIFAVnklVWFTYwuX5ehyUQCEyU6oQGi-O5VqELaDQQFUhDoQldbECE8CNdJio+qqa51HgUgFlqo72ewxDA3gM4ATCC5LoqX49J8sw1FpGQmBkGDci29CEPAVR2AAeqoqjkAAVITMlE8TSKEyTZPU8TAAkdhSng5UgA07NHBw015bKY7-tc0Hw8WvMNEc9Lc0jSJjt4GVvWg1xoN+CPmBgqtPKj8ykJzEu1JBCtK-MGTzEUWtc7tM1VEU-54P4o7XPA1gmP4xZVBkKIm-MuHw0WiNm3tY4jsGAMoBlpDFn7Fu1IHssmCHGUo6zx1OdqZ2kGaygeSnN3AIQxZwxu8x3Rld0PehX1+vQyf0BopB8IQULpxaVr0Ddgq1-XN4wvn8BHOYGjq3UYtF+DJh8BwMJvXrSAZL5dRIAALErvcgAAtCv6tGwsIDWAPYtvd4QOs9cKN1Na16AYVJzfsQRyg6z0+z0gADk5hP9+dQSSAL8gO-t8mHPNhd5VGHvve2xZuhALerbJ0Y4E7DTZjcEAdgB7FngBofwn8d4-x6O3KEN5rTwVFsAqyeBBYF19iJQCMcOB0hnBwSGGJzZ5RHPLAG-NEF6AHp-QmUguFU2GuoPh5VVAnmwf-IeJC5bH1nhlMhysQBFDXhvVBJh54j3oVQoIT12TDw4CEFGaxMR6AALJMHHO9SypBVwakFGjKUPJopXF1K1OsH8kRVDbvAIxpjGCjgwCwKQjjYQZQ8b0IJdQMD2MCVYrSESAk1EcjjKxGVGh4C7G6Qa41G4eWsN4E4SA6iQxCHQiyCprH1hMFNSwrYgnpJNOhWiVjtF6AAIJ1DqPQLMNI2kdK6qLKkNJmSILaGGXh2D1KvC1qQJAAzyAglIFWII3pSmDiLnVDUdkuatBxI4x6LjqizKxB0zSSIrEdRqbUOpPYgh+kIGkvAu5jLLKauyOZVj1majuf2FZ1QmhLOSv9AA+pSdCfo3rVHpD8qywBWggrwMlHQxBoB6H-GSPZtYkr-wLEEJcegdCKj9IKQgKcTCIuRc5PsiIrLOIxQYLFUgcU-L0IwT6TLTjBmALRf834rmmkuhIBozTc6zCKBEwFgKpoSATPdH2HiMDiqqTAGV8KMBoyYR49maU3wfnoIK-ZHIMBOh6IpWY9AJapIiU6f6UhtR2RtWCkwxKhWkqRVAFF9QMCg0MXoAAyg4sVEqUmeowD6AAoljPKkKXmKmaWnBcRRvBoo9VNMNEaqhRo+u8uNKJflJuSiOBszSIn01BgfANXqvG+p5B6p0-U6iMpeXoLqsIlRMsCeUt6xLhWEHlYCnt6rgzaj9CjcU4qnX6thUHcU8brYAscgKeOIapjhsIJGmG7yV751HX2jAOJxhCg-FY4Wu6TBW3JJq3FC7gBFvRqwDI2N00w1+hym9cQcyBP+gc3tpcySZPJJSb9GJU2rqqFADK+b6gNukqMaFzTp1HHFGjYDa6oXvNjVZNFBSwkpK0fqtOpggVwvbQWDAJbAbwCg2yN4io42a1VUuuoK6UPRsaNez18wIlTWWAgJQzI0WUcqHoHmLVaXdrNDrUOAnByYhjfqvp4MoUibarC-D5IpPshU00NOY6GNMaqK0UO9HkOPqhax8tGBuM8iSUG4gHHg2Wd41YpNadYC6bTRmyxSm6y5s1cCpzuK-NadVaPGE2m+0hbSmaELNy1xgFnCEFpIXnnQalLJ2lhypDzAy3wNO6koR8bAJICxZSPmCh6Z0kNUYwBVF5aCtcI4UaXpBZyw9hxdy9HQltbC5hyBSDqOkKUC15LBh7oV+gSro5IDeoV8ggJiCEFdIobM3J6BKFDQgbsAA5H1VRzDSCkIwJAyRMQnaxJBT1dQpR2DQP+W7dhyA6EG+wYMa15uLfFIQFba2NsJBBdRLCtFytdPIEDkFDR4BaTeriBb3ZlvwFW-AAAIm97sAAxDpUpuwbT+m5kDVj-vYSkAGCgUh6DlHkpt-YhZRt-Am39e2vQCe0RaKKLo4zAojGDIVyMxAMz9DOH9NKbW8Azc65hbrIB-Ls8WsGWihYPkozG3To+2pCvpBYNMAX-0MibXF29cU1SurC7iS2CAD6ZZi-Akr9aI5WbWmDEsm9xmdfYpF7uigx5vnRtqM+gsdtr14d6FliM6oEiU+WDmoGbskQA5J2T7Grxw8IxHIKeGkOlIgF6-1i0akOejHdrtzPfWBtDdeG48wB4jyiJ6BMkYdRiyn2BhzOabJS916ODNjIrRyCfYgEeEz0amjTfdxr6JHqcwFCqMAUCSAo6kCgKYuoABrGZv7-oNfPdcSkRwEau2RhudjsxfhTTWGMKQPq++wAGyicUkZ4A6A8DkC-rQr8WgyoVuo1XahjmDNcXL4wpAABhMgJQRQMGcFY3Y2f8TYf+FRa3BJZ9dmLfUaTYBGNOLgOoXrQA6kWAAEKQMWW-bkB-bIcgZ-V-KUHNM0BMIAnAsDCzVbSuOedAiATAmg7gKAeg0nf+GZDvWndaH3enWfQ1AA4A+IMA36N6RoWWEIbndMT3YSddeoQXDfFrGoNrTYRoWiIoKQT+VbPrcgdWTLRGN6M9BoL6InQMRoWQ3neQhAvgKQGEdfO2f7FoWSCsQCT+GSBRGvPiJEYtG+FvVSaXeSQeTvbvXvfvDzErawvnZtCJCfPMafWAWfNKcIVfDKJwnXTDDII4fDfoBAfxHkNMGwzMfMRoKbT+KABg9eMRcUcgK-B9a2fwBoXQ-regGo78OohonGJo0WfDHkFpKQYvVoDIXjf6conrfI+AQw5eLPEvYIsvXI-xKY7MYwAAFQAO4JiNsIENGj9zPSQEL0MATAMNqOLCkF8nME23CHMFDnsIQmuEUMQOvX-n8W6KqHlkNWIAABk8RjxACEwcYMiljxsoBQ0dAEhviaRQDjwPE8ApQ-9b09gITwTIToTlBYTfoES6RcstJct4t2YQpegKRahxjyQ3dQTismQBCOUHV11yk25sxaCk9yBtUPF5hvB8405SAqc1jtg9VaUIl+UNA0AThIYkBgBiAkB4DahWZ6gGEggKRBR6SA8MVJjs8nsa888tZod3s4cEcNiz8k8hkdE49ydE8qdcjpTJAqgWk0p-0pCUQ6gaU2o40PdpgAAhFYKYHGZ9YPRgUPRQJPLLaQt3T-Kk6oGk6yKoXUDjGAm1DtV40-c-S-AbW1d+EPbkIMqnOjbkZE+AbA9gjVRJRUt3cgLvHvfrI8EwTEN3QweHTITiCQMM4gaMH8Ms4QFsN6HQN3CQUwGGcpOyGbVXfxU9ClH6EwYxc5NsMlN1a2WrF0usGbRESDIdNcSIPAYxCM2DfVQrCQacqoPctJS7d7K4EITbbcrzdkPc00Q3Q8yQTsE87sM8vAMYeLZLKjVHNLNqAc1QyIAUxKGoI4TbJAYxDEO8vYhcwlD8wTQJHXYAUaHoaPV2b8MYT+KXLUxaHIweX0u2LDYAdSaePAMdJAYyIIJAIHXdEHdpTpV2IhQUNxYAEisivxYzX-YZVnMZTC+SHItGMdHfOEnXApXtTiDIApAS36Ai7YWfYXcVQ7DIMkfCwiscZiqEX9MORGS1REckXFJJFtMLftPaC1T1REXDWlSijgKrGrJ8t0IDZdNNIOetdTX1b8usCyqytOVddglkoDbgJQeEFU5pSCGA7k3k7YSgqo0nQ1frarFo05XdfjP0IUEwL8jKemFKy2fmPAJfWcOSqMGMcVGSnqHQJAMYPAKAJAIUcq6QWQJAX85pCAA8qq2rEIKAcgJAemcqh7KUOqxTVUtqRqu8zqlqvACQPoKADpJQXqxtAUenVQ1jQIx4BYuvQ1bYBvV49SA8vYj0EShuN9VbOVMdJAtcjUBrcxWclFDM9SRc9kHQ9xJ0XU2HAARwyGPD6D9VcBjFOCa1Yz7EPngTZIDV0kRidCBt3TAwaDgQAGJzAmcPwgbzjXi5LswjArhIa9wMBYaustDKQNr+SAK6wTDrYA1hUBRv1IYNobq9AZ5C8MK5JXh8D20ZkMRyBTdAlzBOE2YMAwAmAB9M0rz6xb1MYH07AQQCZVAxgAAOf8deVQDIVHBW1HQmTEFeKsJmFmARQmembwW4tFDASIJFaoFWXWjVTVewj1OSi2vtJ0huYzKIwcQJdEVQkYdXUnc0kYJPfCRrDEFGNGaPZybGj8Si7pGitsdEMw3HPKQdQOuij5VKO5B8fqWkZiHbHXPgP2mETiFUv220PAHQTgs1YvWKkK6KiAWK8OYNHTflGA1OjEflYsfO1mq-KQQ0wJfOyKs1PdMYA9Zka0FzDOKkYuYsQ6bm1bEDfGOmOwUiKhDKduhg0u4unBBeqyBugu7SiaHQcOVCq8VVW0Di0ZNvPQDgYWNrb8LmdSeYMhfOnk5YPkwYMWfOmdDicWOS9mOq1awYYWekPOxdGeO0TVRarw7i14DgIeUlI4Oe0nJAC62dMGMIysvvHGe235YASIZ0E6zUD8R6OzMdday1bYfJEmurR0PcOYnPZajkTwo0KvQ+50wUfA66OeX6egd2TekVG+BcNXd0uCpQ-qVKK4Q4-Allco200Oqi0HRoYsUwHs5iF3XfWR0OOEnQYuELDKXcIoBGHQXg0E12DWhyWu9O1VKsa0nRtVQMqQJPPR9gNGZMsggbTVNBhNNJMctFa4FnA+ih4+32b9FEbY0oscGhPYy1dmRUzVBS0swAn8UCLmH1PAb43KwFHnAqwFIq-qMaiahHJAJfNKYgUQjgBoqQaaj6AWtEDAH1EwQAx8aJ-xdILIHIEIGq5I+q-VQa5sGpYxY8w0Z88k7qopyyAW1pzqKoTbTp088kiQUC0a9qkZpgCAaUkXJgPphUKMj5YfKMaMIGeBiIkcUGGbTshAEeQressnDIRgW1U+oPEG09YtQdP0Thm04ycDEweA1KI+Zx71HxB5REStT50wb1P1G1XFfFb-JoRpdQ7Sj5UGVzKJZkKm-OHIqoU0BzazccLSTk78AiXoAS5B5rZpM1eJUklJGoUjHQHNTfApYl+mUl05dmDAG++AO+3fUGFUwlAkLy3Alkv6V4-lNkqQEUgm9kQpQCDBt6dy4garRoG6hCsKwYPwTkv6KbSGccRVqQTdHcJZ5qea7JKkeMswqcNcFGZyDIDQBMtOSwZQKAQs3As4dO20KsKmhsRUgiOKicB5QosfCcN+zdb8TeW8pVKxBTb3FtZpTkrkulmVnubwOwPUf8E4Xgz-Yl2-cxyx3LOlgAuxi0SLE-dN1Mt-SgwptOKUweFzKyIQgtikYgO2RU3FFld5Vls1GF-HevTSkhM1ZF5kNRizUCKzPjZpD8DIPmyyX6tcJ0X5Km4gQdkrU0Y5zkDBuyMV6rJ45Q-3P0StmhBcD5sxZKTds5r6UGZyYgDQIUgezyYgG6Rq+JQpYgEyMuFUfdyaE17V09m6HteJKQPga98cW9xCRcZOYgGA49puCQFEDgeMp97UcpRgj9ncCsceNkxCnoXVM960OGgDYUxcBoNOPM4gCEq1m3DxaDvATdTVZD1DwDjyDQSpTDkfT3L0n0HGHGfqGWAsAjz9-mFEF3DgW0VDyuY1BoZD8GbjraD5UwHtGF3VPOlKSJBxNCIdV1S6noWbYl7D3D2gs4VjmEYjjKZD64GB78LR4l9XWj707kdTpj2WDTvAdjqWDKLju0Q4t00fOjn09TwpQSPAZj30wj6zl3Nz8sPYnQawM97weYATuztTODCkftZNqneoIyRwvO+FdmKm00YzRgSTEJpA8GSdzVs1O2wKvDDDTVM1GdkhVzUrjKadhAdUIr4uEIH1JAPoeFarxspAZskgMAXaJQCqprmkKE3rZQAbDVlB7RIoIoQgEIKU3xNoDXNUF-eAJAab6ZJd9fAWuyYybMMgd9ZkTKHLg5ILfL1DNb2rjBkdKmiHdxFGfFHFgW9lTfGOJxhSjI8k9Zwp2kcgfZhbns8s8Iqshb2svrMnD76SYbglCc+gbUSuJ5SlX5AGCHvFrFX4Q773UFw9Q1GAtCUrAkG1fE-qBdUJjI-RCgCs7Z0H95FTfxNTW1Mpkwb4yLNITIEg2ntFbUQRcoTwInYgPQEwVIWpkgz1PQPQZIJabvY8ObhAPQJAFeBodQOIXrITGQWAbn3nxnnISQRX2XjnvQHmxgZXhnup00HXzXknbX48exZXkQS7Y8dIYgNnnjVIUnJQZXid0EdkPQZoN3wX+scVpATmlpWAKvMZFmT3wX+gexX3-wSW4Pr3wXyYdIGYX37wW7dQQXoIdQe1tn9QXrBHbms3rCHn3FKoAMqQVdBod3lPvFNcBbdpBIZX2ZKySGCvv0QxbPp3nnvQPgS3+xe6PkLM-6ZlMegVKECv1vpJLxUfmXhsO3nkPIaSXIZXj3wX9IQgFMQ2mYSXvQKybn6wB3nPrvnGRfr3uPk0Df3XkwHf3X60PQHWt339Cv5flpc333rf8-wX0f3Pq3qfCv0P8Pzf3VbfvIHoCv439U+k-NPjJFIBAsIAXiRFmX0P7NIFesgAAAbf89AWgXQDvBD6C8AAEqBFgBc8NAWeMgFKGsD0xgApoHkmACCD2AiBFoawHgE4RYCm02QPINyDQG0CSBZA28vYmoH3Y+sxAnfn0HhyYElouBPIPPiEz0AISgvQgfwLoFcCIwa-cgLwI4EX8lBqA+wI4EwEx8NAjAbQTHzQEjEhig4Lbg0RypkCsYbIU0Mv1X7x9lB1gAAJLlA9Atgk0PYCMExhSA+gnQR4JMHlAzBJgCwXP3dyEBH+FGRwc4LCHuDRing7wWgLsB6DUBKAqfhALl5E4WkzYZXoXzgEV9mkjTJAWQJ16ItHeI4PFNAMxDkhkh4A9QI9QSAYAXqb1D6mKBVBPwOoT8SfgYK94dQLWtpZsJTQr7yAOujAbgMeBoCtB6AR4OQAQBcBihKgXgEAP4H-BIA0AkEFeJBCQD-hggoQfcOEBoCrEYgCgUAokDEDBAYQIAV-Evi8ACAdhIgGgPv2zzEB5AfIOQGIH2zMAjsdgMoIwCXxShNuYAOwPcJt4AABf8BgHngYB-wDgaEgCLz4PCMA8AcgP4G5rpB9aBw9SDQAQaMBEgQQM4UIFuFiB9eJBFeB9zADBAgAA)