A talk given by Brian Lyttle at Philly.NET Code Camp 2012.1.

1. Building Mobile Web Apps with
jQM and Cordova on Azure
Brian Lyttle
May 12, 2012

2. Thanks to our sponsors!
Complete the session and event evaluations to win an XBOX 360!

3. Today
What you should get from this presentation
• A broad talk for people who are
•How the Azure platform can support mobile interested in mobile apps with HTML5.
development. I‟m not providing complete step-by-
Cloud •Issues with transitioning apps and data to
•
step walkthroughs.
Azure.
• Instead I‟ll be focusing on issues
encountered and how they were dealt
with.
•Framework choices
Mobile •An understanding of the issues encountered
when building hybrid apps.
Shared pain vs. project-specific pain
•Integration issues with 3rd party libraries.
•Tips for debugging HTML5 mobile apps on
Techniques Windows.
•Packaging apps for deployment.
Pain
Focus
Time

4. About me
• Brian Lyttle
– Solution Architect at LiquidHub
• E-mail
– blyttle@liquidhub.com
• Interwebs
– @brianly on Twitter
– @brianly on Stack Overflow
– Blog infrequently at http://brianlyttle.com

5. Background
• NextBigThink
– LiquidHub‟s annual developer competition
• Guilty parties
– Rajat Sen (Java Dude)
– Steve DiBello (LINQ Maven)
– Brian Lyttle (Mobile Dilettante)
• Challenge
– Build a healthcare demo to support mobile case workers.
– Experiment with any technology you think you might need on a future
project.
• MobiNurse
– A “CRM” app for nurses or case workers.

6. Requirements
Functional Initial concept with jQTouch
• Information forms for each
patient.
• Listing of assigned patients.
• Find a specialist map.
• Contact a specialist.
• Signature capture.
• Claim submission.
• User registration.
• Password recovery.
Technical
• Simple password protection.
• Minimized data transfer.
• Available via a webpage or an app
installed on a device.
• Support iOS and Android.

7. Architecture
What we built and how we put it together
User Experience Architecture Components

8. Data Tier
Storage options on Azure
• SQL Database
• Table Storage
• Queue
• Windows Azure Drive
A relational database makes most
sense for a CRM app
• The exception being BLOB storage
for signatures.
Tool support
• SQL Server Management Studio can
connect.
• Only a partial set of on-premise
functionality is available.
• Data Sync is available.
Docs at https://www.windowsazure.com/en-
us/develop/net/how-to-guides/sql-azure/

9. Web Tier
HTTP Service options on Azure
• ASP.NET MVC
• Nancy Framework
• WCF Data Services
We wanted to spend more time on
the mobile app - so we went with
WCF DS
• It was really easy to expose our
SQL database via the web
Tool support
• Model designer support in Visual
Studio.
• URLs are easily hacked for query
development.
• Data exposed as XML or JSON.
Docs at http://msdn.microsoft.com/en-us/data/bb931106

10. Client Tier
HTML5 options
• Roll our own
• jQuery
• jQTouch (not part of jQuery)
• jQuery Mobile (official!)
• Sencha Touch
We started out with jQTouch, but
reversed that decision
• jQuery Mobile proved to be the
most consistent and easiest to
integrate with 3rd party libs.
Tool support
• Safari and Chrome share an
excellent set of developer tools.
• Plugins for Xcode and Eclipse
enabled easy offline packaging.

11. Azure Developer Fabric (DevFC.exe) crashes
Problem
• DevFC.exe crashes when you start to
debug a project.
Solution
• Check if VMware Workstation is installed
on your machine.
• VMW has a service called “vmware-
hostd.exe” which uses port 12001.
• DevFC.exe crashes when it fails to bind to
this port.
• Stop the “VMware Workstation Server”
service.

12. Azure Deployment
Problem
• Azure deployment is slow.
• Your mobile app is in a separate location from your web tier.
• Cross-domain issues crop up with data access.
Solutions
• Copy all of the HTML and other assets into your ASP.NET MVC 3 Web Role
project.
• Deploy it all together for speed and to reduce cost.
• Alternatively use JSONP to request data from a different location.
• Develop the mobile app inside a browser you control (Cordova).
Resources
• Windows Azure PowerShell Cmdlets
• JSONP and URL-controlled format support for ADO.NET Data Services

13. Getting data in and out of SQL Azure
Problems
• You can‟t connect with SQL Server Management Studio (SSMS)
• When connected to just SQL Azure you have limited functionality available in
SSMS.
Solutions
• Export SQL Scripts for everything.
• Migrate using the MS Sync Framework.
• Data tier import/export with WAPMMC.
• SQL Server Import and Export Wizard.
• SQL Azure Migration Wizard (community supported)
Resources
• Migrating Databases to SQL Azure (SQL Azure Database)
• Windows Azure Platform Management Tool (WAPMMC)

14. File I/O on Azure
Problem
• Your legacy ASP.NET application reads or
writes some files on disk.
• File access results in exceptions and files
are gone after deployment.
Solutions
• Try using Local Storage initially.
• Move to Queues, Blob Storage, Table Storage, SQL Azure if you need:
– It to be long lived.
– To access the files from other instances.
• Broad file write access is only possible from an elevated Startup Task.
Resources
• Windows Azure Local File Storage - How To Guide and Warnings
• Azure FAQ: Can I write to the file system on Windows Azure?

15. Azure Emulator access
Problem
• You have a mobile device for testing.
• A change has been made to the Azure and you want to preview it without deploying
to the cloud.
• There is a good chance you want to debug some ASP.NET MVC code.
Solutions
• Avoid debugging from devices and rely on the desktop browsers.
• I never found a clean solution to this issue despite asking on StackOverflow.
• What I do is:
– Open the IIS Manager
– Find the site that Azure is using for hosting.
– Modify that site so that you can access from another computer, making sure you
allow it through any firewalls.
– Connect your mobile device to the same network.
Resources
• Is it possible to access the Azure emulator from another computer on the same
network?

16. Know your events
Problem
• I‟ve used jQuery before but weird things are happening.
Solution
• Review the documentation for changes to the event handling.
• Changes were necessary to support touch, and to support the way that jQM
loads pages using AJAX.
• Use $(document).bind('pageinit'), not $(document).ready()
• New events include tap, taphold, swipe, swipeleft, and swiperight.
• Page navigation loads pages without executing the contents of <head>.
– Account for situations where a user refreshes the page, or receives a link to
a page.
Resources
• jQuery Mobile Docs: Events

17. Debugging jQM on Windows
Problem Debugger Commands
• You have some JavaScript code in your mobile debugger; // break into the
application that you want to step through or inspect. // debugger
Solution // output data
console.log(string)
• Run the solution in IE with the “F12 Developer Tools”. console.info(string)
• Run the solution in Safari or Chrome and open their console.warn(string)
developer tools. console.error(string)
– With this project we found Safari to be better
even though both use WebKit. // inspect JS objects
object
– In particular, the Geolocation features worked
better.
Resources
// inspect elements
• Chrome Developer Tools: Overview // (First select an element)
• How to use F12 Developer Tools to Debug your dir($0)
Webpages
• Android - Debugging Web Apps

18. Event handling duplication with jQM
Problem
• We ended up with lots of repeated
code for event handling. // This gets ugly after a while
$('.cases-all').live("pagecreate", function() {
// code
Solutions });
• Investigate client MVC frameworks.
$('.cases-assigned').live("pagecreate", function() {
• Popular frameworks: // code
– backbone.js });
– JavaScriptMVC $('.case-search').live("pageinit", function() {
// code
});
Resources
• Building Large-Scale jQuery
Applications
• Using Backbone.js with jQuery
Mobile

19. Cache Busting
Problem
• Mobile browsers like to minimize data usage and are over zealous with caching.
Solution
• Add some unique junk as a query string parameter during development.
• Make sure to remove it when you deploy to production!
function cacheBuster() {
return '&_cb' + Math.round(new Date().getTime());
}

20. Google Maps integration
Problem
• You are struggling with getting Google Maps API V3 running with your app.
Solution
• Check the jQM source tree for updates to the sample.
• Make sure the Google scripts are loaded if you navigate from another page.
<head> only loads if you refresh the page.
Resources
• Using Debugging Tools with the Google Maps API

21. Packaging
Problem
• Your mobile application runs great via the mobile browser, but you want to run it
offline too.
Solutions
• Start by looking into HTML5 Web Storage. This is the foundation.
• Apache Cordova (formerly PhoneGap) enables you package an HTML5 application in a
native format for a device.
– Enables access to native-only features like Contacts and the Camera.
– Native to JS bridges are possible through plugins.
• PhoneGap Build and Sencha SDK simplify this.
• Make sure that you allow requests to the required hosts e.g. *.server.com.
• We were able to power our mobile web and Cordova apps with the same HTML.
Resources
• Cordova: Getting started with iOS
• Cordova: Getting started with Android

22. Wrap up
Azure Hybrid Apps
• Makes a lot of sense if you have an • jQuery Mobile is great for getting
in-house ASP.NET application. started in this area as the markup
• Possibly overkill if you just need a is simple.
backend for prototyping. • Sencha Touch offers better
• WCF DS is really simple performance across a smaller set
of devices but is mostly JS-driven.
Backend as a Service • HTML5 solutions can work well
across platforms but iOS tends to
• New SaaS category perform a little better (cf.
– Parse transitions).
– Urban Airship • LinkedIn replaced their iOS app
• Additional cost and limited with one written in HTML5, so
flexibility. even premium apps are starting to
go down this route.

23. Thanks
Don‟t forget to complete your evaluations
Slides Related talks today
From Command Line to Cloud:
Will be posted to Developer Tools for Cloud Agility in
http://brianlyttle.com shortly. Visual Studio 2012 (Matthew
Ammerman)
Got questions? Backbone.js with CoffeeScript or
„Wow, client side coding no longer
sucks‟ (Len Smith)
Email me at blyttle@liquidhub.com
Building REST API's using ASP.NET Web
API (Devin Rader)
Or tweet to @brianly
Introduction to jQuery Mobile (Aaron
Marisi)
Adding Location Intelligence to your
Windows Phone Apps with Bing Maps
(Nick Landry)