Mobile hybrid web app with MVU & OnsenUI, don't miss it.
Published: 2022-09-11 19:58:18

OnsenUI is a  very nice librarie when it comes to develop UI for mobiles.

Using it with MVU is a pleasant experience.

Le's start with a little demo, fetching users from [DummyJSON](https://dummyjson.com/users)

Don't be afraid, we will use the browser only.

Let's start by adding the neeeded scripts in our html page :

```html
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/artydev/mvu@1.1/dist/mvu.umd.js"></script>

```
That's all we need to code our demo.

Now let's us declare some functions which will help us to create some elements, for that we will use the **m** function

```js
const {m, dom, udom} = MVU

// standart element
const div = m("div");
const br = m("br");

// OnsenUI elements makers
const page = m("ons-page");
const toolbar = m("ons-toolbar");
const list = m("ons-list")
const listHeader = m("ons-list-header");
const item = m("ons-list-item")
const button = m("ons-button");

div("Hy Devto");
br();
let btn = button("I am an OnsenUI button");
br();
btn.onclick = () => alert('Hy Devs');

```
You  can see a demo here : [mdemo](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAAhYB4oI0BrFgJxhQAvAB0QcYgE9YcQjBjFxLQoLBiQJYgAc4iAPT6Armm08A5vjpZ99OEyMR91OHFtp7aR1dfiAfKJobJzcfIIi4pIy8PKKyqow6uJaugbGphZWtDZ2Dk4ubrloALQFpdna9EzEcPhY3D5w-oHBcNT8ENrELHD81BopeoYmZpbW7p6O+gBWhR55dQ2z-uz6bR1dAUEc653dvf3JxDpDzgAmaPizZ0IQAG78+GiK+uaE+hj80jd3+lh3RgAAgBGfDA-RnCCSP4A-BGLBnK5NEB+Va7TYtFiY9iEABMWzYO20GCCUVgGjoUFo-EQ1JJ5hg-iwaOJaD8LDAJmoxAg9BYNywtECqzxfkoEiEMG5vI8eAAbIhcQAOEAAXwo6GwuEQBFm4roDGqeANkhYwCwFH52UtRjO2VVLGELAAsgA1ACqgUChh6xBJZ0+3UlOAYgRN3Uhd0dLCwAApxJHxABKADcYbs3QARvxo3HxNnk2m0N79CwAPLzNDugCSLGD1TgMYwPBg-CaaHDLGJDNz8ZAdmK3cZIFT6Y83WItFoUEzn174gHk+ns-4hbHpq4pqdef7HmKm6UI-X3QPAAkYBgbjnt32BwfivJL621x2MywIIwsPPd3B91DiMUH4wFgybHiwmZGMcfI3gue4QVBxYjkWXrFmgkZ9qeUgsAAIjAdyTi+2axqOaCwFmxBBE68GTmgfa1tgLAkuWlY1uBkE0YR-DEUWmYUfg9DUFw1B8E6xGOuyGCwF8sYAOSYTheFwDJqbivYsDSnYeC4gADIgADMADsaoaiAmA4HgjT6vQjDMDqma0GcWHAJis7CeY-C0CYZyICwADEwK4riACcekACxFmwlLUogADuhBARFXaXpCaDmPp2naAAHhFYDWcUYDYNAUg+a6rYBpgKGqqpkoabKOqhYgwJqgAuqqQA)

Before going further, a word about the  functions generated with **m**.

Let's take for example the **div** function and notes it's versatility ([divdemo](https://flems.io/#0=N4IgtglgJlA2CmIBcBWADAOgGwGYA0IAZhAgM7IDaoAdgIZiJIgYAWALmLCAQMYD21NvEHIQAAjEAeWBGoBrMQCd4sALwAdEKTYBPMi3jw2msS2WENIdmwAOpJAHoHAV2o25Acwz8wDgaWFnCAceUlI-agDqIO8wzQA+dWoJaVkFZTVNbT14UgMjEzN4C01rO0cXN09vPl9-QODQ8PrqAFom9tqbAWE2UgxIaljSBKSU0h5FCBs2MVJFHksy+ydXdy8fCKighwArZsiGgdkMfYTJBwmpmcTkqSvp2fnF0rZbFZCoIf2oFQgAN0UGGoRgcHhYDloil0v3+DjA-2cAAEAIwYFEOKAQbTwxEYZxgKCnEYgeIXB43MZiKmSFgAJluEjEABUDGJ-vBFKRaGwSBBdGI+IQxGw2ZJSDZaMlsghVAByfiwPiKJDKqUeeBy+JY-7kyXUeJiQiuHi8gRJC70+LcLQqeCmiD+URYVAokAAXzwNHojGY+xt-EEvVEge0YmAYDwYigtSjzhjYHdYlUYgAsgA1ACqSSSTjmbClUChsztDEESVDsx1ybEYAAFJodZoAJQAbgr-lmACNFDX65oey329RK2IbH2GyAbC2O5FZmYJ6VFDOR52x8pF1PlCvcw5TCobJzZ2GewuU3Xm8nDcAexfW2YL+6c9Q8wB5Q7UTMASTEpd6pFrWg5E5EZVznMdaA1Td-FaSUNSHY9ZjYPg+FgLsoWgyJWmQ1D0OXEA20QsQZDDFN+xAGCSOMAiiKogAJeBaF+XsyMnSjsTYVoDCYo8COHUd+XgMBMNIVoqNaQSwBXUcu2cN4BBE1pZPk6gENU9SbDrOUAAVaDCWQPDEWh8ymahDKQMQ5UvJIbGUOsAAMdUnSQIHzHJ5UVZVVUUdVNXiBjYCVI1FFqEU2QzTM5mgeAW3sqNgBleAkE0QgBE40gIAALySlEAA4bAAD00d1m2fJzNBctzZQVVCvLVMy-ICoLCBC4TRXgNMsyi34d2oU9FAvZ9NM0XT9LMozkihHydEFYU-0EElSo0uzHIBOsKCpJzlOQ6hJwAIRRFtmzwKlb2Oza1u2gR9rpI6TruM77okLa5J2-acDupIAF1mzi8NEuSog0taDLsqQPLCuKpayrWja7helT9sOgjzoegbUeey7XuuzQ9tulGnrER6Lv+Osrt23GPoJ77ob6xQHzbG0AgQB0nSYOlcqQHA3U9b0GFEYYAzS4MmC7PgoBm4BTtoHhPBC1woAsgBiFE6TpABOHAABZhwkTyVQAdxYQTdYgmADK5tBCt11LBFaQh6BIHQLPTTkizoZ93SZu1WciUQtfBj0voIOh+aYAAReB-mZPh3yib8Io9IA)):

![m functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irkygjzk2ttb9ec49c73.png)

We can now build our little application :

```js
const {m, dom, udom} = MVU

// standart element
const div = m("div");

// OnsenUI elements makers
const page = m("ons-page");
const toolbar = m("ons-toolbar");
const list = m("ons-list")
const listHeader = m("ons-list-header");
const item = m("ons-list-item")
const button = m("ons-button");

let items = (users) =>
   users.map((u) => {
     let user = item(`
        <div style="width:150px">
          <img src=${u.image} width="64px" />${u.firstName}
        </div>
        <div></div>
     `);
     dom(user.querySelector("div"))
      button("hy").onclick = () =>  ons.notification.alert(u.firstName);
     udom()
  return user
})


function Toolbar () {
  let tb = dom(toolbar())
  let btnmenu = div(`
      <ons-toolbar-button>
        <ons-icon icon="ion-ios-menu, material:md-menu"></ons-icon>
      </ons-toolbar-button>
 `)
  udom()
  btnmenu.style="position:absolute;right:10px;top:8px"
  return tb
}

let App = (users = {}) => 
  page([
    Toolbar(),
    list(items(users))
  ])

// Entry point
fetch('https://dummyjson.com/users')
  .then(res => res.json())
  .then(data => App(data.users));

document.addEventListener('init', function(event) {
  var page = event.target;
  page.querySelector('ons-toolbar .center').innerHTML = 'MVU & OnsenUI';

});

```
You can see the result here : [FetchUser](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAAhYB4oI0BrFgJxhQAvAB0QcYgE9YcQjBjFxLQoLBiQJYgAc4iAPT6Armm08A5vjpZ99OEyMR91OHFtp7aR1dfiAfKJobJzcfIIi4pIy8PKKyqow6uJaugbGphZWtDZ2Dk4ubrloALQFpdna9EzEcPhY3D5w-oHBcNT8ENrELHD81BopeoYmZpbW7p6O+gBWhR55dQ2z-uz6bR1dAUEc653dvf3JxDpDzgAmaPizZ0IQAG78+GiK+uaE+hj80jd3+lh3RgAAgBGfDA-RnCCSP4A-BGLBnK5NEB+Va7TaUCRCGDUYgQOx4ADMiAAHABWYoABkQlJAAF8KOhsLhEARZpi6AxqnhOZIWMAsBQWGdskKjCKsHSWMIWABZABqAFVAoFDD1iBg0GdPt1sTgGIFed1IXdpSwsAAKcQm8QASgA3Cq0GqAPLzNCKgCSLD11Tg5owPBg-CaaCNLG0GHMMDNlvEdmKkejdsdYbs3WItFoUAARp9Y1aQAnM9m8-wU4b0ywuHyZXGix5ijWlCBbZWPN1mwAJGAYG78AvxxvN4ryPvBitpjssCCMLCDhtwJtQ4jFWcwLB29t8nNGY70BcJ3f7tCTwKwbrrrD+mUWoz2EO26VbNgse-B2pYDDaC13p-CPx+RaV9q0UN8HzNK8LQAA2AkDghNdVog0AB3CAzmIQhEGBMlKW0AAPZptng192AgLBzB6PphAAEmAIx8HIqMYClNCMMIDQADYABYCOUfQ-DohjIBDYgADlmTpOD4NWE0XxIjg5Nk+55NfaCHWk4VsjvB98AARyMYMpAAZWxXFaH4QsbVbNtiNfY9MzQQtCCkO18HoaguGoPhb3-QCWDsJ5aDxSBqAwPF6HwDBYC+O98BEyQJJwDS7LfCULVsthBGIIx+CCd9yzQOlbKdMATFxfEggAFSzXN8wyoDtgvFhiBzM10pLOrLNtTLQO6HNiDQfUjHa+4YM0jhi1qstigc+hVJkhMIE5GdOQ0Sq11oJdhqFL9GA6aLEARYphpWCY105BbgnOzqZrmtAX3U4DxW03qBqGhx8CiWANEqOBZ0qxAMBzOBsz3GB7Q6N5iGwvD8PtTNtFJPiQGA7LcqCVrAik080GagBBbRtDNHSPzNYBiufFhgKTGALWQaSatLT4MooaTmwtK84FJx9eoAXRKtAwEUahCAtAByQY0jOeEsCkWZIvGAq4HF3r8EwpgLUEG9AO1pF6AytWNac7UNSpwmf1NjA4QfOAetTQIRWoeFqiis4zgAUTuaoABkVyYYMJe4WdxaFMqwwipyYG9hgn2AYC7nzWmzWj12NX4aNiFTNhaf0wz+BMszM0s8WpuZgcrGqYNVcYtBnn4LsqtlH2zXFhVFRYAAyFg3U8L1xYdoqUsCTF7FgCqCVZalKWKMlOJpelGRATAcDwRoOXoRhmFZdzhxXNc50atg8288x+FoEwzkQFDCHXVM6VHovKoQVlgWwgBOek+aoFeWRAdve5MC9PSIAA)

Remember to read the previous posts on MVU serie. 

Thank you for reading.