mb.ile, a light weight framework for mobile App (alpha)

 

What is it?

mb.ile is a work in progress framework that provides simple solutions for any HTML mobile applications.

Several bigs like jQuery, Dojo, jQTouch, extJs, etc. are developing their own framework for mobile applications, and we tested some of them to realize the client for our latest Licorize app.
Actually we adopted the jQuery mobile framework to develop it, but what we find out is that both jQuery mobile and jQTouch (the two we considered) have a strict approach that constrain the developing solutions to their point of view.
Just to give an example, our application (Licorize) is based on a template system to show different kind of strips (if you want to know more about it just take a look at http://licorize.com) and most of the links are  javascript calls that build on the fly the layout of the page getting content via an ajax call that returns a jsonp object. Well, jQuery mobile doesn’t allow this approach (all the link should point either to an element on the page or to an external file but can’t be a javascript method) and we had to hack  with some workarounds to obtain what we needed. Another problem we met is related to the header and footer behavior; we needed fixed position to maintain them in place while scrolling the content, as most of mobile applications do. The only solution jQuery mobile offers is a buggy method to hide them once the body is scrolling and then show them again when the scroll ends… Even if it could be a solution, the problem is that most of the times header and footer are lost…

The question is “Can we adopt a framework and at the same time have freedom on developing applications as we want?“; the answer is “No“. Any time we decide to adopt a framework for developing our applications we must accept its rules; but at the same time, a framework should impose as few rules as it can to let developers invent their solutions.

The great UI of jQuery mobile made by the jQueryUI team has itself many limitations; for example if you want a combo in a FORM to behave in the native way you can’t because the framework manipulate all the elements to preserve the GUI and there’s no way to exclude elements from this manipulation.
We are talking about an alpha release of the jQuery mobile framework of course, and we expect great things from the jQuery team; but I really needed to try a different approach on that matter.
So I decided to develop something that could fit the needs of our own HTML mobile Application.

 

What are the features?

1. Simple structure of the page:

A mb.ile page has:

  • A header
  • A main area
  • A footer

Differently from the other frameworks available, you can set header and/or footer as fixed position on top and bottom of the visible area even when the content is scrolled.
This feature is provided by the integration of the excellent plugin iScroll made by Matteo Spinelli (http://cubiq.org/).

Here is the main structure:

<div id="mbPage">
<div id="header"><h1>mb.ile</div>
<div data-role="content">content goes here</div>
<div data-role="footer" data-type="default" id="footer">
<div class="buttonBar column2"><span >button 1</span><span >button 2</span></div>
</div>
</div>

 

Pages can be in-line on the main page (index.html) or loaded via ajax as separate pages content.

 

2. intelligent transitions

As the other frameworks mb.ile let you choose transitions to move across pages and it automatically applies its reverse once the back button is pressed.

Actually you have this animations:

  • slide-left
  • slide-right
  • slide-up
  • slide-down
  • fade
  • pop
  • flip-left
  • flip-right
  • swap-left
  • swap-right
  • cube-left
  • cube-right

And the way to call them is really simple:

<a rel=”page” data-animation=”slideleft” href=”pages/animations.html”>animations</a>

3.  GUI

The main scope of this framework is to let developers manage contents as they want; what I found really unconfortable with jquery mobile, for example, is the uncontrolled transformation of dom elements: when I need to insert a select and I would like to style it as I want, I found out that my select has become something else out of my control. The mb.ile framework provides a simple CSS file needed for the structure and a “theme” css for the demo application interface. no DOM manipulation for elements is applied.

 

4. Intelligent history

Every page loaded in the application is stored into an “history” array and takes care which transition has been used and what page it’s caming from. That way the back button knows exactly what to do and brings you back to the right page even with deep structures.

 

5. Extensions

The framework cames with some useful extensions like:

  • Drag and drop feature
  • Sortable feature
    Both provided by the implementation of jQueryUI on touch devices of jason kuhn (http://jasonkuhn.net)
  • Sliding headers
  • Panels
  • Selectable list lines
  • Buttons

You can easily implement your own extension and initialize them in a really simple way when needed.

 

Take a look

Here is a short video of mb.ile in action:

[youtube=http://www.youtube.com/watch?v=Ui0XltjsJw4]

 

Here is a live demo: http://pupunzi.com/mb.ile

Actually tested on iPhone.
To have the best experience add the app to your iPhone home and start it as application.

Here is the gitHub repositiory: https://github.com/pupunzi/jquery.mb.ile

All feedbacks are wellcome!