DEV Community

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

Posted on

2

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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay