Building native phone apps using HTML5

Imran QureshiVP EngineeringCareAnyware Inc.(Largest SaaS provider for home healthcare agencies since 2002)

About Me• Bachelors in Computer Science, 1994• Built slideshow feature in MS PowerPoint (250M

users)• Google “Imran Qureshi easter egg”

• Led effort to rewrite Hotmail in 2003 (50M users/day, 364 M/month)• Google “Imran Qureshi Kahuna”

• 11 patents

US Pop. 2000 = 281M2011 = 312M

Fact or Fiction?• HTML5 apps can only run when connected to the Interent• You need a browser to view HTML5 apps• HTML5 apps can run as native apps and be downloadable from the

AppStore• HTML5 apps can access native iOS or Android functionality like Camera,

File system, GPS, Compass etc• HTML5 apps look different than native apps• I need a Mac to build apps for iOS• I don’t need to know WML to support all mobile phones• Javascript is slow because it is interpreted• You need the latest browsers (IE9+) to run an HTML5 app• Which of the following apps are written in HTML5:• Facebook• Netflix• Angry Birds

Technology OptionsObjective-C .NET Java HTML5

iPhone/iPad Yes No* No Yes

Android No No* Yes Yes

Windows Phone

No Yes No Yes

Symbian No No Yes Yes

Blackberry No No Yes Yes

Mac Yes No* Yes Yes

Web No Yes No** Yes

Windows 8 Tablets

No No(Silverlight only)

No Yes

* Mono project has some limited functionality** Few people have Java installed/enabled

Why use HTML5 to build native apps?

• No need to learn Objective-C and different SDKs• “All of our developers are good at HTML. Only a few of them are

really good at Objective-C and Android. We are able to make our Web developers the same as our client-side developers in some respects.” – Dave Fetterman, Facebook's Engineering Manager

• Write once, run everywhere. Easier to test (just use a browser)• Facebook• Facebook CTO: Key high-level focuses for Facebook in 2011 from a

technology perspective: HTML5 and mobile• Project Spartan will allow web apps to run inside Facebook on

smartphones• Windows 8 Tablets will run only HTML5 apps and Silverlight• Huge ecosystem of HTML and jQuery tools/frameworks

Confusion• People talk about native apps vs. web apps• Native apps – written in native code, work outside the browser• Web apps – written in HTML/JS, work only in browser

• Native HTML5 apps combine benefits of both• Written in HTML/JS but work as a separate app outside the

browser

Quick Demo

Differences from normal web• Screen size/look and feel• jQueryMobile

• Offline support• HTML5 offline web

pages/offline store• PhoneGap offline store

• Wrap as native apps/access phone functions• PhoneGap• PhoneGap Build

• Client-side code• Knockout (Model-View-

ViewModel)• jQuery Templates

• Debug• Use Safari on PC• iPad/iPhone Simulator• Firebug Lite

• Deploy/Manage betas• TestFlight

• Notifications• Twilio (SMS)• Urban airship (iOS/Android)

• Down-level• Detect phones: WURFL• Polyfills for non-HTML5

browsers: modernizer.js

Architecture

Native OS

Webkit browser runtime

PhoneGap Wrapper

Your HTML/JS code

SDK

Your native code

jQuery Mobile• Automatic scaling• Multiple pages within one HTML document• Themes to define OS specific look and feel

Offline support• PhoneGap• Package HTML files as a native app• Hosts a “browser” inside a custom app shell

• Offline data• Use the HTML5 offline data API• OR use PhoneGap offline data API if you need more data

PhoneGap API• Built-in access to:• Accelerometer• Camera• Compass• GPS• Media• Storage

• You can write native code plugins for additional behavior e.g., barcode reader

PhoneGap Build• Upload files to PhoneGap and it generates native packages for all the

phones (Also integrates with Git)

Client-side code• Knockout.js• Client-side 2-way databinding• Keeps UI and a Javascript data model in sync

• jQuery Templates• Create complex HTML by binding to data• Similar to ASP.NET repeater except client-side

Debug• Use Safari/Firefox on PC

• iPad/iPhone Simulator for screenshots

• Firebug Lite on device (just include js file in HTML page)

Deploy• TestFlight to bypass AppStore during beta• Over-the-air distribution of new releases

Downlevel• Non-smartphones• Use WURFL to detect• Serve plain HTML pages

• Non-HTML5 web browsers• Polyfills using modernizer

Notifications• Twilio web service to send/receive SMS

• Urban Airship web service to send/receive iOS/Android notifications

• OR call Apple/Android web services directly

Like this? We’re hiring!

Links• This presentation and links to all the tools/frameworks

available at:

iqcode.wordpress.com