jQuery Mobile, UI and Templates A better way for developing mobile and desktop apps

What is jQuery? Straight from their website – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. – jQuery is designed to change the way that you write JavaScript – Abstracts much of the problems with inconsistent web browser HTML implementations

Benefits of jQuery Used by a vast number of websites Open source Easy to learn Very powerful Great documentation Vast array of plug-ins allowing to you to do stuff

What is jQuery Templates? Plug in proposed by Microsoft in Feb 2010 Used to generate HTML from a template Can be used to generate from javascript objects or json returned from a webservice Syntax “similar” to Xaml syntax Example outlined by Scott Gu – linking-and-microsoft-contributing-to-jquery.aspx linking-and-microsoft-contributing-to-jquery.aspx Made an official Plug In October 2010 – jquery.html

A simple example From the jQuery documentation page –

Documentation - Api jQuery.tmpl() and.tmpl(): These APIs are used to render a jQuery template: jQuery.tmplItem() and.tmplItem(): These APIs are used to find a jQuery template instance, and are crucial for providing interactivity: jQuery.template() and.template(): These APIs are used to compile or store a jQuery template, and are particularly useful for scenarios where templates are loaded in the form of strings, such as templates retreived remotely:

Documentation - Tags ${...}: This tag is used to evaluate fields or JavaScript expressions within templates: {{each...}}...{{/each}}: This tag is used used to iterate within a template (without creating template items): {{if...}}...{{else...}}...{{/if}}: This tag is used used to create conditional sections within templates: {{html...}}: This tag is used used to insert markup obtained from data within templates: {{tmpl...}}: This tag is used used for composition and iteration within templates (and creating new template items for each nested rendered template): {{wrap...}}...{{/wrap}}: This tag is used used for composition and iteration, along with incorporation of wrapped HTML within templates:

What is jQuery Mobile Straight from their website – A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design – Works well on Iphone, Ipad, Ipod, Android, Windows Phone 7, Blackberry v6.0+, Symbian v5.0+

What it jQuery UI Straight from their website – jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

Best way of determining Mobile 51 degrees is a free resource to determine mobile devices, allows redirection to mobile version of your site Details on using it – Detection-Redirection-Development-Made-Easy.aspx Links to source –

Summary Great for developing text based apps, that should “just work” of most mobile devices with minimal testing Faster development time, much less rework but may not run as fast as “native” apps Certainly worth further investigation