Building Mobile Web Apps with jQM and Cordova on Azure

Brian LyttleMay 12, 2012

Thanks to our sponsors!

Complete the session and event evaluations to win an XBOX 360!

TodayWhat you should get from this presentation

•How the Azure platform can support mobile development.

•Issues with transitioning apps and data to Azure.

Cloud

•Framework choices•An understanding of the issues encountered when building hybrid apps.

•Integration issues with 3rd party libraries.

Mobile

•Tips for debugging HTML5 mobile apps on Windows.

•Packaging apps for deployment.

Techniques

• A broad talk for people who are interested in mobile apps with HTML5.

• I’m not providing complete step-by-step walkthroughs.

• Instead I’ll be focusing on issues encountered and how they were dealt with.

Shared pain vs. project-specific pain

Time

Pain

Focus

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

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.

Requirements

Functional• 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.

Initial concept with jQTouch

ArchitectureWhat we built and how we put it together

User Experience Architecture Components

HTTP Services exposing data to be consumed by

the mobile apps

Relational Database

Mobile Browser

Mobile App

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/

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

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.

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.

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

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)

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?

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?

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

Debugging jQM on Windows

Problem• You have some JavaScript code in your mobile

application that you want to step through or inspect.

Solution• Run the solution in IE with the “F12 Developer

Tools”.• Run the solution in Safari or Chrome and open their

developer tools.– With this project we found Safari to be better

even though both use WebKit.– In particular, the Geolocation features worked

better.

Resources• Chrome Developer Tools: Overview• How to use F12 Developer Tools to Debug your

Webpages• Android - Debugging Web Apps

Debugger Commands

debugger; // break into the // debugger

// output dataconsole.log(string)console.info(string)console.warn(string)console.error(string)

// inspect JS objectsobject

// inspect elements// (First select an element)dir($0)

Event handling duplication with jQM

// This gets ugly after a while

$('.cases-all').live("pagecreate", function() { // code});

$('.cases-assigned').live("pagecreate", function() { // code});

$('.case-search').live("pageinit", function() { // code});

Problem• We ended up with lots of

repeated code for event handling.

Solutions• Investigate client MVC

frameworks.• Popular frameworks:

– backbone.js– JavaScriptMVC

Resources• Building Large-Scale jQuery

Applications• Using Backbone.js with jQuery

Mobile

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());}

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

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

Wrap up

Azure• Makes a lot of sense if you

have an in-house ASP.NET application.

• Possibly overkill if you just need a backend for prototyping.

• WCF DS is really simple

Backend as a Service• New SaaS category

– Parse– Urban Airship

• Additional cost and limited flexibility.

Hybrid Apps• jQuery Mobile is great for

getting started in this area as the markup is simple.

• Sencha Touch offers better performance across a smaller set of devices but is mostly JS-driven.

• HTML5 solutions can work well across platforms but iOS tends to perform a little better (cf. transitions).

• LinkedIn replaced their iOS app with one written in HTML5, so even premium apps are starting to go down this route.

ThanksDon’t forget to complete your evaluations

Related talks today

From Command Line to Cloud: Developer Tools for Cloud Agility in Visual Studio 2012 (Matthew Ammerman)

Backbone.js with CoffeeScript or ‘Wow, client side coding no longer sucks’ (Len Smith)

Building REST API's using ASP.NET Web API (Devin Rader)

Introduction to jQuery Mobile (Aaron Marisi)

Adding Location Intelligence to your Windows Phone Apps with Bing Maps (Nick Landry)

Slides

Will be posted to http://brianlyttle.com shortly.

Got questions?

Email me at blyttle@liquidhub.com

Or tweet to @brianly