Building Mobile Web Apps withjQM and Cordova on AzureBrian 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                                                                     •     ...
About me• Brian Lyttle    – Solution Architect at LiquidHub• E-mail    – blyttle@liquidhub.com• Interwebs    – @brianly on...
Background• NextBigThink   – LiquidHub‟s annual developer competition• Guilty parties   – Rajat Sen (Java Dude)   – Steve ...
RequirementsFunctional                            Initial concept with jQTouch• Information forms for each  patient.• List...
ArchitectureWhat we built and how we put it together     User Experience                       Architecture   Components
Data TierStorage options on Azure• SQL Database• Table Storage• Queue• Windows Azure DriveA relational database makes most...
Web TierHTTP Service options on Azure• ASP.NET MVC• Nancy Framework• WCF Data ServicesWe wanted to spend more time onthe m...
Client TierHTML5 options• Roll our own• jQuery• jQTouch (not part of jQuery)• jQuery Mobile (official!)• Sencha TouchWe st...
Azure Developer Fabric (DevFC.exe) crashesProblem• DevFC.exe crashes when you start to  debug a project.Solution• Check if...
Azure DeploymentProblem• Azure deployment is slow.• Your mobile app is in a separate location from your web tier.• Cross-d...
Getting data in and out of SQL AzureProblems• You can‟t connect with SQL Server Management Studio (SSMS)• When connected t...
File I/O on Azure Problem • Your legacy ASP.NET application reads or   writes some files on disk. • File access results in...
Azure Emulator accessProblem• You have a mobile device for testing.• A change has been made to the Azure and you want to p...
Know your eventsProblem• I‟ve used jQuery before but weird things are happening.Solution• Review the documentation for cha...
Debugging jQM on WindowsProblem                                                    Debugger Commands• You have some JavaSc...
Event handling duplication with jQM Problem • We ended up with lots of repeated   code for event handling.             // ...
Cache BustingProblem• Mobile browsers like to minimize data usage and are over zealous with caching.Solution• Add some uni...
Google Maps integrationProblem• You are struggling with getting Google Maps API V3 running with your app.Solution• Check t...
PackagingProblem• Your mobile application runs great via the mobile browser, but you want to run it  offline too.Solutions...
Wrap upAzure                                    Hybrid Apps• Makes a lot of sense if you have an    • jQuery Mobile is gre...
ThanksDon‟t forget to complete your evaluationsSlides                                      Related talks today            ...
Upcoming SlideShare
Loading in …5
×

Building Mobile Web Apps with jQM and Cordova on Azure

4,219 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,219
On SlideShare
0
From Embeds
0
Number of Embeds
1,320
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building Mobile Web Apps with jQM and Cordova on Azure

  1. 1. Building Mobile Web Apps withjQM and Cordova on AzureBrian LyttleMay 12, 2012
  2. 2. Thanks to our sponsors! Complete the session and event evaluations to win an XBOX 360!
  3. 3. TodayWhat 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. 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. 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. 6. RequirementsFunctional 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. 7. ArchitectureWhat we built and how we put it together User Experience Architecture Components
  8. 8. Data TierStorage options on Azure• SQL Database• Table Storage• Queue• Windows Azure DriveA relational database makes mostsense 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. 9. Web TierHTTP Service options on Azure• ASP.NET MVC• Nancy Framework• WCF Data ServicesWe wanted to spend more time onthe mobile app - so we went withWCF DS• It was really easy to expose our SQL database via the webTool 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. 10. Client TierHTML5 options• Roll our own• jQuery• jQTouch (not part of jQuery)• jQuery Mobile (official!)• Sencha TouchWe started out with jQTouch, butreversed 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. 11. Azure Developer Fabric (DevFC.exe) crashesProblem• 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. 12. Azure DeploymentProblem• 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. 13. Getting data in and out of SQL AzureProblems• 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. 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. 15. Azure Emulator accessProblem• 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. 16. Know your eventsProblem• 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. 17. Debugging jQM on WindowsProblem Debugger Commands• You have some JavaScript code in your mobile debugger; // break into the application that you want to step through or inspect. // debuggerSolution // 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. 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. 19. Cache BustingProblem• 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. 20. Google Maps integrationProblem• 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. 21. PackagingProblem• 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. 22. Wrap upAzure 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. 23. ThanksDon‟t forget to complete your evaluationsSlides Related talks today From Command Line to Cloud:Will be posted to Developer Tools for Cloud Agility inhttp://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 APIs 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)

×