This document discusses using jQuery Mobile, Backbone, and ASP.NET MVC to create a framework for building mobile web applications. It describes the components used, including ASP.NET MVC, jQuery, jQuery Mobile, Underscore.js and Backbone.js. It also outlines how these pieces work together, with ASP.NET MVC serving initial pages and data, jQuery Mobile handling the UI, and Backbone handling data on the client through models, views and collections.

1. jQuery Mobile, Backbone,
and ASP.NET MVC
A Framework for Making Mobile Web Applications
Tuesday, March 5, 13

2. Introduction
Tuesday, March 5, 13

3. Who Am I?
• Troy Miles
• Senior Software Engineer w/ 30+ years of
experience
• Mobile/Mobile Web
• iOS, Android, & Windows Phone 7
Tuesday, March 5, 13

4. Tuesday, March 5, 13

5. Intermediate PhoneGap
• Learn by doing
• JS best practices, iScroll, Maps, Ajax + more
• Saturday, May 18th - 9 AM to 6 PM
• $99 - lunch & materials included
• http://bit.ly/XlxzYp
• CraveLab - Los Angeles
Tuesday, March 5, 13

6. You May Get Mad At
Me
• Sorry, in advance if I insult your favorite:
company, device, or personality
• I have nothing against any of these
companies
• I will gladly do a project for any of them,
for the right price
Tuesday, March 5, 13

7. What we aren’t going
to cover
• HTML 5
• Client Side Validation
• SQL Server or other databases
• Security
• Offline
Tuesday, March 5, 13

8. What We Will Cover
• Web Apps. vs Device Apps.
• Components
• Framework
• Why Do It This Way?
• Tools of the Trade
• Tips from the Trenches
• Summary
Tuesday, March 5, 13

9. 85% of all US adults
now own a mobile
phone
Tuesday, March 5, 13

10. 56% of all mobile
phone owners in the
US access the internet.
Tuesday, March 5, 13

11. Did you know 80% of customers
abandon a mobile site if they
have a bad user experience?
Tuesday, March 5, 13

12. Web Apps Device Apps
Can migrate web skills Longer learning curve
One source base Many source bases
Deploy when you want Deployment needs approval
You choose when to update User chooses when to update
No device memory used Uses device memory
Difficult to monetize Monetization is built-in
Restricted device access Full access to device hardware
Slower Faster
Tuesday, March 5, 13

13. Components
• ASP.NET MVC
• jQuery
• jQuery Mobile
• Underscore.js
• Backbone.js
Tuesday, March 5, 13

14. ASP.NET MVC
ASP.NET MVC gives you a powerful, patterns-based way
to build dynamic websites that enables a clean separation
of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes
many features that enable fast, TDD-friendly
development for creating sophisticated applications that
use the latest web standards.
Tuesday, March 5, 13

15. 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.
Tuesday, March 5, 13

16. A unified, HTML5-based user interface system for 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 theme-able design.
Requires jQuery.
Tuesday, March 5, 13

17. Underscore is a utility-belt library for JavaScript that
provides a lot of the functional programming support
that you would expect in Prototype.js (or Ruby), but
without extending any of the built-in JavaScript objects.
Tuesday, March 5, 13

18. Backbone supplies structure to JavaScript-heavy
applications by providing models with key-value binding
and custom events, collections with a rich API of
enumerable functions, views with declarative event
handling, and connects it all to your existing application
over a RESTful JSON interface.
Requires Underscore and jQuery.
Tuesday, March 5, 13

19. The Framework
• ASP.NET MVC
• jQuery/jQuery Mobile
• The Kernel
• Backbone
Tuesday, March 5, 13

20. ASP.NET MVC
• Serves the initial page
• Serves data in a RESTful fashion
Tuesday, March 5, 13

21. jQuery Mobile
• Handles the UI
•
Tuesday, March 5, 13

22. Backbone.js
• Handles the data on client
• Models
• Views
• Collections
Tuesday, March 5, 13

23. Models
Tuesday, March 5, 13

24. Views
Tuesday, March 5, 13

25. Collections
Tuesday, March 5, 13

26. Why Do It This Way?
• Best User Experience (think speed)
• Lower Server Utilization
• Easier Maintenance
Tuesday, March 5, 13

27. Tools of the Trade
• Chrome Browser (other webkit browser)
• Fiddler2
Tuesday, March 5, 13

28. 7 Tips from the Trenches
• Beware of Browser Madness
• Use an Analog
• Use Unique Ids on Markup
• Reference the active page
• Use the pageinit event not $(document).ready()
• Avoid Sloppy JavaScript
• Always Test on a Device
Tuesday, March 5, 13

29. Next Steps
• Download the source code and play with it
• Minify the code
• Use CDNs for open source code
Tuesday, March 5, 13

30. Summary
jQuery Mobile is an easy to use framework which
enables you to create mobile apps quickly.
Tuesday, March 5, 13

31. Links
• ASP.NET MVC - http://www.asp.net/
• jQuery - http://jquery.com/
• jQuery Mobile - http://jquerymobile.com/
• Underscore - http://documentcloud.github.com/underscore
Backbone - http://documentcloud.github.com/backbone
• JSLint - http://jslint.com/
Tuesday, March 5, 13

32. Books
jQuery Mobile
Jon Reid
Sebastopol, CA: O’Reilly Media
Inc., 2011
Master Mobile Web Apps with
jQuery Mobile 2nd ed.
Matt Doyle
Brighton, UK: Elated
Communications Ltd, 2011
Tuesday, March 5, 13

33. The Source Code is on GitHub at:
https://github.com/Rockncoder/
JQMContacts2013
Tuesday, March 5, 13