building mobile cross-platform apps with html5, jquery mobile & phonegap

43
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap Nick Landry Microsoft Senior Technical Evangelist Nokia Developer Ambassador [email protected] www.AgeofMobility.com @ActiveNick

Post on 18-Oct-2014

2.654 views

Category:

Technology


2 download

DESCRIPTION

The final demo for this presentation can be downloaded at: https://www.dropbox.com/s/9j09wip6wz84b61/JSDevConMobile-JQM-PhoneGap-Demo.zip SESSION ABSTRACT ================= 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.

TRANSCRIPT

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

Building Mobile

Cross-Platform Apps

with HTML5, jQuery

Mobile & PhoneGap

Nick LandryMicrosoft Senior Technical Evangelist

Nokia Developer Ambassador

[email protected]

www.AgeofMobility.com

@ActiveNick

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

http://www.bigbaldapps.com

www.AgeofMobility.com

@ActiveNick 2005-2014

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

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!

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

Mobile Platform Options

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

What is a Mobile Developer?Mobile Web / Hybrid Dev

Web View

Web View

Web View

• Objective-C

• Xcode, AppCodeiOS

• Java

• Eclipse, IntelliJAndroid

• C#, VB, F#, etc.

• Visual StudioWindows

• C#

• Xamarin Studio

Xamarin.iOS

(Mono)

• C#

• Xamarin Studio

Xamarin.Android (Mono)

• C#, VB, F#, etc.

• Visual StudioWindows(.NET, WinRT)

Native Mobile Platforms Native Cross-Platform Dev

HTML5

JavaScript

HTML5

JavaScript

HTML5

JavaScript

Native API to iOS

(PhoneGap)

Native APIto Android

(PhoneGap)

Native APIto Windows (PhoneGap)

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

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 APIJavaScript API Exposing

Native Platform Services

MOBILE WEB

APP

=========HTML5

(JavaScript, CSS3)

Responsive Design

JavaScript Frameworks

PhoneGap APIJavaScript API Exposing

Native Platform Services

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

Web Development PrimerHTML5 & 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

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

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, WebApp.net, Dojo

Mobile, etc.

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

jQuery UI vs. jQuery Mobile

jQuery JavaScript Framework

jQuery UIjQuery 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 http://jquerymobile.com

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

Sites Built With jQuery Mobile

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

Demo

Building our First Mobile Web App with JQM

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

jQuery Mobile IDEs• Notepad / Notepad++

• Microsoft Visual Studio 2012 / 2013

– Be sure to install Web Essentials

• Sublime

• jsFiddle.net

• JSBin.com

• Codiqa

• Adobe Dreamweaver

• JetBrains WebStorm

• Aptana Studio 3

• Eclipse

• More at jquerymobile.com/resources/#Apps

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

Emulators for JQM Debugging/Testing• Chrome Desktop Browser with Dimensions Extension

• Android Emulator Options

– Install the Android SDK from http://developer.android.com/sdk

– Better & faster emulator from Genymotion: http://www.genymotion.com

• iOS Simulator (Mac)

– On Windows: Electric Mobile Studio (via Visual Studio Gallery)

• Windows Phone Emulator

– Requires VS2012/2013 & Windows Phone SDK: http://dev.windowsphone.com

• Opera Mobile Emulator for desktop

– http://www.opera.com/developer/mobile-emulator

• Always a good idea to test on physical devices

• Xamarin Test Cloud

– http://xamarin.com/test-cloud

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

Demo

Digging Deeper into JQM

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

Mobile Hybrid Apps

PhoneGap and its Derivatives

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

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.

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

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.

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

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, WebApp.net, Dojo Mobile, etc.

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

Installing PhoneGap

• Start at http://phonegap.com/install

• 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

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

Setting Up Emulators

• iOS Emulation

– iOS-sim:http://github.com/phonegap/ios-sim

– On Windows, try Electric Mobile Studio 2012 for web-only QA:

http://www.electricplum.com/studio.aspx

• Android: Install the faster Genymotion emulator

– http://www.genymotion.com

– Based on Oracle Virtualbox

– Free & paid versions

• Windows Phone Emulator

– Requires VS2012/VS2013, Hyper-V / SLAT computer & Windows

Phone 8.0 SDK: http://dev.windowsphone.com

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

Setting Up Android Devices for DevAndroid 3.2 and older Android 4.0 to 4.1 Android 4.2 and higher

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

Setting Up a WP8 Device for Dev

• You need to register at the Windows

Phone Dev Center ($19 per year)

– http://dev.windowsphone.com

• 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

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

Demo

PhoneGap Development Environment

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

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/MyMobileAppcom.mobility42.mymobileapp MyMobileApp

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

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

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

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:– https://build.phonegap.com/plugins

$ phonegap local plugin addorg.apache.cordova.geolocation

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

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

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

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:

http://cordova.apache.org/

#download

– Installation instructions at:

http://bit.ly/cordova31WP8

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

Demo

Building your First PhoneGap App

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

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

Page 31: Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap
Page 32: Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap

What is Azure Mobile Services?

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

Demo

Calling Cloud Services from Hybrid Apps

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

Which Mobile Approach is the Right

One?

Is There a Silver Bullet?

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

Go Native or Go Home

If you want to chase that “Angry Birds” money…

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

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

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

Cross-Platform Design?

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

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

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

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

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

Technical Resources• Official PhoneGap Site

– http://phonegap.com

– You will also need NodeJS: http://nodejs.org

• Official jQuery Mobile Resources

– http://jquerymobile.com/resources

• Pluralsight Online Training

– www.pluralsight.com/training/Courses/Find?searchTerm=phonegap

• Mobile Web Development IDEs

– Sublime: www.sublimetext.com

– JSFIDDLE: http://jsFiddle.net

– JSBin: http://JSBin.com

– Codiqa: http://codiqa.com

– JetBrains WebStorm: www.jetbrains.com/webstorm

• Age of Mobility Blog

– www.AgeofMobility.com

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

PhoneGap Articles and Posts

• PhoneGap 3.0 – Stuff You Should Know

– http://devgirl.org/2013/09/05/phonegap-3-0-stuff-you-should-know

• PhoneGap 3 for Dummies, Part 1: Setup & a first example

– http://neophob.com/2013/08/phonegap-3-for-dummies-part-1-

setup-and-a-first-example

• PhoneGap and Cordova with iOS 7

– http://coenraets.org/blog/2013/09/phonegap-and-cordova-with-ios-7

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

Recommended JQM & PhoneGap Books

jQuery, jQuery UI, and jQuery Mobile: Recipes and Examples

(de Jonge, Addison-Wesley)

http://amzn.to/1eB5KHE

20 Recipes for Programming PhoneGap: Cross-Platform Mobile

Development for Android and iPhone (Munro, O’Reilly)

http://amzn.to/18SohJC

jQuery Mobile: Up and Running

(Firtman, O’Reilly)

http://amzn.to/15Olkce

jQuery Mobile

(Reid, O’Reilly)

http://amzn.to/1aAcd6K

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

Thank You!Slides will be posted on my Slideshare account.

Please share your comments. Your feedback is important and appreciated.

Slideshare: www.slideshare.net/ActiveNick

Blog: www.AgeofMobility.com

Twitter: @ActiveNick

Mobile Apps: www.bigbaldapps.com

LinkedIn: www.linkedin.com/in/activenick

Website: www.AgeofMobility.com

Email: [email protected]