DEV Community

Cover image for Mobile hybrid web app with MVU & OnsenUI, don't miss it.
artydev
artydev

Posted on

Mobile hybrid web app with MVU & OnsenUI, don't miss it.

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

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

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

  <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>

Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode

You can see a demo here : mdemo

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):

m functions

We can now build our little application :

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';

});

Enter fullscreen mode Exit fullscreen mode

You can see the result here : FetchUser

Remember to read the previous posts on MVU serie.

Thank you for reading.

Top comments (0)