Building Mobile Web Apps with jQM and Cordova on Azure

I presented this at the Philly Code in May 2012. It takes a problem and solution approach with a focus is on the overall challenges when approaching these kinds of applications.

Transcript

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 •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
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 • 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
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 • 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 data console.log(string) console.info(string) console.warn(string) console.error(string) // inspect JS objects object // inspect elements // (First select an element) dir($0)
18. 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
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 • 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.
23. Thanks Don’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