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.
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 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>
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:
And the way to call them is really simple:
<a rel="page" data-animation="slideleft" href="pages/animations.html">animations</a>
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.
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
- Selectable list lines
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:
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!