Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap


Published on

The final demo for this presentation can be downloaded at:

Write Once, Run Everywhere. How many times have we been promised true cross-platform development? HTML5 seems to be the closest we’ve ever been to writing applications once and running them on multiple mobile devices, such as iOS, Android, Windows Phone or Blackberry.

But native mobile apps have taken all the spotlight in recent years thanks to the introduction of hundreds of thousands of apps in various app stores from Apple, Google, Microsoft and BlackBerry. Apps offer a great native platform experience, but they can be expensive to build and require specific languages, SDKs and skill sets across multiple platforms. Mobile web sites offer a great way to engage with consumers and corporate workers alike without requiring the installation of any app, and can in turn be adapted as deployable "hybrid" apps.

This session explores the fundamentals of native vs. web apps, and how to choose the right approach for any given scenario. We begin with an exploration of the benefits of web development for smartphones using the most popular HTML5 & JavaScript framework for mobile: jQuery Mobile (JQM). We’ll go over a quick primer on HTML5, CSS3 and JavaScript, followed by everything you need to get started with JQM. We’ll cover the most common development environment options, how to build your first jQuery Mobile page, and how to debug your mobile web code with some of the available tools. We’ll also discuss how to develop a native-like experience on each mobile platform thanks to JQM’s adaptive rendering, and how to save and retrieve data with the cloud using Microsoft Azure Mobile Services.

We'll then learn how to leverage PhoneGap to wrap our mobile web UI into a native smartphone or tablet app. Discover how PhoneGap exposes native device hardware like cameras, sensors, GPS and more. We’ll also discuss the pros and cons of PhoneGap-based apps, how to deal with the UI design guidelines across platforms, and learn some do’s and don’ts of cross-platform mobile development.

Native mobile apps have their place for mass market revenue-generating models, but you also need to master cross-platform techniques when the situation calls for it such as in enterprise mobility scenarios and other niche areas. Web development is a critical skill required by every mobile developer; come learn how to get started and reach hundreds of millions of users through a smart mobile web & hybrid approach.

Published in: Technology

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap

  1. 1. Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap Nick Landry Microsoft Senior Technical Evangelist Nokia Developer Ambassador @ActiveNick
  2. 2.              @ActiveNick 2005-2014
  3. 3. Agenda • Web Development Primer: HTML5, CSS & JavaScript • Getting Started with jQuery Mobile (JQM) – Common IDEs for JQM Mobile Development – Testing & Debugging via Mobile Emulators • Mobile Hybrid Apps with PhoneGap – Setting-up Your PhoneGap Environment – Getting Started with PhoneGap – Calling Native Platform APIs – Other Considerations: Design, Deployment, etc. • Samples / Demos • Discussion: Join in!
  4. 4. Mobile Platform Options
  5. 5. What is a Mobile Developer? Mobile Web / Hybrid Dev Web View Web View Web View • Objective-C • Xcode, AppCode iOS • Java • Eclipse, IntelliJ Android • C#, VB, F#, etc. • Visual Studio Windows • C# • Xamarin Studio Xamarin .iOS (Mono) • C# • Xamarin Studio Xamarin .Android (Mono) • C#, VB, F#, etc. • Visual Studio Windows (.NET, WinRT) Native Mobile Platforms Native Cross-Platform Dev HTML5 JavaScript HTML5 JavaScript HTML5 JavaScript Native API to iOS (PhoneGap) Native API to Android (PhoneGap) Native API to Windows (PhoneGap)
  6. 6. What is a Mobile Hybrid App? Native WP Shell Embedded Internet Explorer Browser Control Native iOS Shell Embedded Safari Browser Control Native Platform API Native Platform API MOBILE WEB APP ========= HTML5 (JavaScript, CSS3) Responsive Design JavaScript Frameworks PhoneGap API JavaScript API Exposing Native Platform Services MOBILE WEB APP ========= HTML5 (JavaScript, CSS3) Responsive Design JavaScript Frameworks PhoneGap API JavaScript API Exposing Native Platform Services
  7. 7. Web Development Primer HTML5 & CSS3 • HTML5 opens the door for new advanced (i.e. modern) web techniques • HTML5 paves the way for JavaScript to go beyond standard HTML – HTML5 is a LOT about JavaScript APIs • Most mobile browsers support HTML5 • HTML5 still allows some degree of backward compatibility with older browsers via progressive enhancement • jQuery Mobile creates web apps from standard and semantic HTML5 • Advanced knowledge of HTML5 & CSS3 is NOT required for JQM development Modern Techniques Enabled • Offline access and storage • Web sockets • Geolocation access • Accelerometer and gyroscope support • Animations, 2D and 3D transformations • Gradients and visual effects • Viewport management (for zooming support inside the browser) • Webapp installation metadata • Integration with native applications • Multimedia support • Graphic drawing (vector and bitmap) • Custom font support
  8. 8. Pick a Mobile Web Dev Framework • Pure HTML5 & JavaScript • jQuery Mobile • Kendo UI Mobile • Sencha Touch • jQTouch • Others – The M-Project, Wink Toolkit, Zepto, Jo, EmbedJS, DHTMLX Touch, Mobilise.js, Xui.js, Enjo.js, PhoneJS, iUI, Spine Mobile,, Dojo Mobile, etc.
  9. 9. jQuery UI vs. jQuery Mobile jQuery JavaScript Framework jQuery UI jQuery Mobile • jQuery Mobile gives you: – Pages & Dialogs – AJAX Navigation & Transitions – Content & UI Widgets – Responsive Design – Theming – Support for iOS, Android, Windows Phone, BlackBerry, Symbian, Bada, Palm WebOS, MeeGo • Start at
  10. 10. Sites Built With jQuery Mobile
  11. 11. Demo Building our First Mobile Web App with JQM
  12. 12. jQuery Mobile IDEs • Notepad / Notepad++ • Microsoft Visual Studio 2012 / 2013 – Be sure to install Web Essentials • Sublime • • • Codiqa • Adobe Dreamweaver • JetBrains WebStorm • Aptana Studio 3 • Eclipse • More at
  13. 13. Emulators for JQM Debugging/Testing • Chrome Desktop Browser with Dimensions Extension • Android Emulator Options – Install the Android SDK from – Better & faster emulator from Genymotion: • iOS Simulator (Mac) – On Windows: Electric Mobile Studio (via Visual Studio Gallery) • Windows Phone Emulator – Requires VS2012/2013 & Windows Phone SDK: • Opera Mobile Emulator for desktop – • Always a good idea to test on physical devices • Xamarin Test Cloud –
  14. 14. Demo Digging Deeper into JQM
  15. 15. Mobile Hybrid Apps PhoneGap and its Derivatives
  16. 16. Cross-Platform Mobile Apps • Design & build the mobile app using HTML5, CSS3, & JavaScript • Wrap it with Adobe PhoneGap – Free Cordova open source framework or PhoneGap build – Get access to native APIs (camera, compass, file, accelerometer, contacts, geolocation, etc.) • Deploy to multiple platforms – iOS, Android, Windows Phone, Blackberry, WebOS, Symbian, etc. • Multiple Cordova Variants Available – Telerik AppBuilder, Red Gate Nomad, IBM Worklight, HP Anywhere, etc.
  17. 17. PhoneGap, by any other name… • PhoneGap was originally developed by Nitobi • In 2011, Adobe acquired Nitobi • PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova • Through the ASF, PhoneGap remains free and open source under the Apache License, Version 2.0 • PhoneGap is an open source distribution of Cordova • Other commercial distributions of Cordova available – Telerik AppBuilder, Red Gate VS Nomad, IBM Worklight, HP Anywhere, etc.
  18. 18. Pick a Mobile Web Dev Framework • Pure HTML5 & JavaScript • jQuery Mobile (covered in this talk) • Sencha Touch • Kendo UI Mobile • jQTouch • Others – The M-Project, Wink Toolkit, Zepto, Jo, EmbedJS, DHTMLX Touch, Mobilise.js, Xui.js, Enjo.js, PhoneJS, iUI, Spine Mobile,, Dojo Mobile, etc.
  19. 19. Installing PhoneGap • Start at • Make sure to run as root on Mac OS X • Create and build your first Hello World app: C:> npm install -g phonegap $ phonegap create my-app $ cd my-app $ phonegap run wp8 $ sudo npm install -g phonegap
  20. 20. Setting Up Emulators • iOS Emulation – iOS-sim: – On Windows, try Electric Mobile Studio 2012 for web-only QA: • Android: Install the faster Genymotion emulator – – Based on Oracle Virtualbox – Free & paid versions • Windows Phone Emulator – Requires VS2012/VS2013, Hyper-V / SLAT computer & Windows Phone 8.0 SDK:
  21. 21. Setting Up Android Devices for Dev Android 3.2 and older Android 4.0 to 4.1 Android 4.2 and higher
  22. 22. Setting Up a WP8 Device for Dev • You need to register at the Windows Phone Dev Center ($19 per year) – • Allows you to unlock up to 3 Windows Phone devices for development – Use the Windows Phone Developer Registration tool in the Windows Phone 8.0 SDK
  23. 23. Demo PhoneGap Development Environment
  24. 24. Creating a PhoneGap Project • Default project creation command – Project will be named “HelloWorld” – Project id: com.phonegap.hello-world • You should specify the name & project id • PhoneGap CLI similar to Cordova CLI $ phonegap create my-app $ phonegap create ~/Dev/Projects/PhoneGap/MyMobileApp com.mobility42.mymobileapp MyMobileApp
  25. 25. PhoneGap Project Structure • config.xml – Application attributes for PhoneGap Build • index.html – Web app entry point – Included tags for phonegap.js, CSS, etc. • index.css (in css folder) – Basic CSS styles • index.js (in js folder) – With deviceReady handler
  26. 26. Adding Core Plugins to Your App • The newly created project will NOT include access to all of the API’s (aka features and plugins) documented in the PhoneGap API docs • Install only those you intend to use via the CLI: • Automatically updates plugin.xml for you • Keeps app performance optimal without the bulk of code not being used • Full list of plugins in Git at: – $ phonegap local plugin add org.apache.cordova.geolocation
  27. 27. PhoneGap Build vs. Local SDKs • PhoneGap Build – PhoneGap Build is a cloud-based service built on top of the PhoneGap framework – PhoneGap Build compiles PhoneGap apps in the cloud – Get app-store ready apps without maintaining native SDKs • PhoneGap / Cordova Builds via Local SDKs – More work to setup the development environment – Allows you to customize each platform project for a better native experience • Experiment with both, see what works best for you
  28. 28. PhoneGap for the WP8 Platform • Use the Visual Studio cmd window when using the PhoneGap CLI • Integrate Cordova templates in Visual Studio – Download Cordova at: #download – Installation instructions at:
  29. 29. Demo Building your First PhoneGap App
  30. 30. PhoneGap App Deployment • Windows Phone, webOS & Symbian – PhoneGap Build produces a binary that is ready for store submission and distribution • Android, iOS & BlackBerry – You'll need to provide the correct certificates and/or signing keys to allow distribution
  31. 31. What is Azure Mobile Services?
  32. 32. Demo Calling Cloud Services from Hybrid Apps
  33. 33. Which Mobile Approach is the Right One? Is There a Silver Bullet?
  34. 34. Go Native or Go Home If you want to chase that “Angry Birds” money…
  35. 35. Cordova, PhoneGap, AppBuilder, etc. Pros • Write once in HTML5 & JavaScript, deploy to multiple device platforms • Code reuse • Reuse existing Web expertise • Lower development costs when targeting 2+ platforms • Faster time to market on 2+ platforms • Simplified deployment with cloud builds • Modular architecture with plugins • JQM adaptive rendering to emulate the device’s native UI • Telerik AppBuilder & Red Gate Nomad bring Cordova to Visual Studio + build in the cloud Cons • Single UI = Generic design that doesn’t feel at home on multiple device platforms • Browser discrepancies • Inferior tooling • Learn new JavaScript frameworks: jQuery UI, JQM, Knockout, Twitter Bootstrap, etc. • Performance considerations • Limited to device APIs exposed by PhoneGap vs. native platform APIs • Reactionary to native platform changes • High-end & 3D graphics limited / impossible • Potential vendor lock-in
  36. 36. Cross-Platform Design?
  37. 37. Mobile Strategy Considerations Audience • General Consumer Market • Niche Consumer Market • Enterprise Users • BYOD Objectives • Marketing “Checklist” Apps • Brand “Reach” Apps • Weekend Warrior Apps • Apps for Profit • Mobile Revolution Apps Other Considerations • Mobile Population Coverage Target & Desired Reach • Expertise • Resources • Timeframe
  38. 38. Summary • PhoneGap easily lets you target the top three mobile platform: – Android, iOS, Windows Phone (and others) • There is no silver bullet, no “one size fits all”, when choosing a cross-platform mobile strategy • Native Apps and Hybrid Apps both have their place • Each mobile project should be evaluated separately • Audience, Goals, Reach, Expertise, Resources • PhoneGap lets you leverage web skills to build cross-platform mobile apps fast • Remember to always strive to create a unique UI specific to the platform
  39. 39. Technical Resources • Official PhoneGap Site – – You will also need NodeJS: • Official jQuery Mobile Resources – • Pluralsight Online Training – • Mobile Web Development IDEs – Sublime: – JSFIDDLE: – JSBin: – Codiqa: – JetBrains WebStorm: • Age of Mobility Blog –
  40. 40. PhoneGap Articles and Posts • PhoneGap 3.0 – Stuff You Should Know – • PhoneGap 3 for Dummies, Part 1: Setup & a first example – setup-and-a-first-example • PhoneGap and Cordova with iOS 7 –
  41. 41. Recommended JQM & PhoneGap Books jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples (de Jonge, Addison-Wesley) 20 Recipes for Programming PhoneGap: Cross-Platform Mobile Development for Android and iPhone (Munro, O’Reilly) jQuery Mobile: Up and Running (Firtman, O’Reilly) jQuery Mobile (Reid, O’Reilly)
  42. 42. Thank You! Slides will be posted on my Slideshare account. Please share your comments. Your feedback is important and appreciated. Slideshare: Blog: Twitter: @ActiveNick Mobile Apps: LinkedIn: Website: Email: