jQuery Mobile, Backbone, and ASP.NET MVC

A Framework for Making Mobile Web Applications

Tuesday, March 5, 13

Introduction

Tuesday, March 5, 13

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

Tuesday, March 5, 13

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

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

What we aren’t going to cover

• HTML 5

• Client Side Validation

• SQL Server or other databases

• Security

• Offline

Tuesday, March 5, 13

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

85% of all US adults now own a mobile

phone

Tuesday, March 5, 13

56% of all mobile phone owners in the

US access the internet.

Tuesday, March 5, 13

Did you know 80% of customers abandon a mobile site if they have a bad user experience?

Tuesday, March 5, 13

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

Components

• ASP.NET MVC

• jQuery

• jQuery Mobile

• Underscore.js

• Backbone.js

Tuesday, March 5, 13

ASP.NET MVCASP.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

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

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

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

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

The Framework• ASP.NET MVC

• jQuery/jQuery Mobile

• The Kernel

• Backbone

Tuesday, March 5, 13

ASP.NET MVC 

• Serves the initial page

• Serves data in a RESTful fashion

Tuesday, March 5, 13

jQuery Mobile• Handles the UI

•

Tuesday, March 5, 13

Backbone.js• Handles the data on client

• Models

• Views

• Collections

Tuesday, March 5, 13

Models

Tuesday, March 5, 13

Views

Tuesday, March 5, 13

Collections

Tuesday, March 5, 13

Why Do It This Way?

• Best User Experience (think speed)

• Lower Server Utilization

• Easier Maintenance

Tuesday, March 5, 13

Tools of the Trade

• Chrome Browser (other webkit browser)

• Fiddler2

Tuesday, March 5, 13

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

Next Steps

• Download the source code and play with it

• Minify the code

• Use CDNs for open source code

Tuesday, March 5, 13

SummaryjQuery Mobile is an easy to use framework which

enables you to create mobile apps quickly. 

Tuesday, March 5, 13

Links

• ASP.NET MVC - http://www.asp.net/

• jQuery - http://jquery.com/

• jQuery Mobile - http://jquerymobile.com/

• Underscore - http://documentcloud.github.com/underscoreBackbone - http://documentcloud.github.com/backbone

• JSLint - http://jslint.com/

Tuesday, March 5, 13

BooksjQuery Mobile

Jon ReidSebastopol, CA: O’Reilly Media

Inc., 2011

Master Mobile Web Apps with jQuery Mobile 2nd ed.

Matt DoyleBrighton, UK: Elated

Communications Ltd, 2011

Tuesday, March 5, 13

The Source Code is on GitHub at:https://github.com/Rockncoder/

JQMContacts2013

Tuesday, March 5, 13