Since its initial release in 2010, jQuery Mobile (jQM) has developed a well deserved reputation for being a flexible mobile framework. jQM’s philosophy can be summarised in 3 points:
- It offers a unified system
- Allows universal access, and
- Is easy to develop with
In order to be able to offer a unified system, jQM utilises just one codebase for multiple platforms. It advocates progressive enhancement, focusing on web standards and clean semantic code. A key aspect of jQM is its utilisation of the HTML5 ‘data- attribute’, which is used to configure various element properties.
In the example below the ‘data- attribute’ is used to assign roles to specific elements and is also used to configure a list element to be inset.
<div data-role="content">
<!-- This is the page content -->
<ul data-role="listview" data-inset="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div> In order to achieve universal access, jQM has implemented a browser grading system based on the functionality available within the browser. This scale goes from A grade to C grade, decreasing from a fully enhanced experience with Ajax-based animated transitions to a basic, non-enhanced HTML. It’s key to point out though, that even with a C-grade browser your site is still fully functional. Accessibility hasn’t been overlooked either, with fully semantic markup, keyboard navigation and WAI-ARIA attributes implemented where required.
The final part of jQM’s philosophy could be considered to be the most important to a project on a tight budget – its use of configuring elements through the use of the data- attribute allows for quick and clear implementation. It is also (unsurprisingly) built on jQuery, thus offering an identical syntax. It takes advantage of jQuery UI offerings, including the widget factory and CSS framework. It becomes apparent that jQM is currently succeeding in sticking to it’s philosophy, and as a result, its fan base within the mobile development community should not to be ignored.
