1. Building
native phone
apps using
HTML5
Imran Qureshi
VP Engineering
CareAnyware Inc.
(Largest SaaS provider for home healthcare agencies since 2002)

2. 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) US Pop.
• Google “Imran Qureshi Kahuna” 2000 = 281M
2011 = 312M
• 11 patents

3. 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

4. Technology Options
Objective-C .NET Java HTML5
iPhone/iPad Yes No* No Yes
Android No No* Yes Yes
Windows No Yes No Yes
Phone
Symbian No No Yes Yes
Blackberry No No Yes Yes
Mac Yes No* Yes Yes
Web No Yes No** Yes
Windows 8 No No(Silverlight No Yes
Tablets only)
* Mono project has some limited functionality
** Few people have Java installed/enabled

5. 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

6. 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

7. Quick Demo

8. Differences from normal web
• Screen size/look and feel • Debug
• jQueryMobile • Use Safari on PC
• Offline support • iPad/iPhone Simulator
• HTML5 offline web • Firebug Lite
pages/offline store • Deploy/Manage betas
• PhoneGap offline store • TestFlight
• Wrap as native apps/access • Notifications
phone functions • Twilio (SMS)
• PhoneGap • Urban airship (iOS/Android)
• PhoneGap Build • Down-level
• Client-side code • Detect phones: WURFL
• Knockout (Model-View- • Polyfills for non-HTML5
ViewModel) browsers: modernizer.js
• jQuery Templates

9. Architecture
Your HTML/JS code
PhoneGap Wrapper Your native code
Webkit browser
SDK
runtime
Native OS

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

11. 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

12. 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

13. PhoneGap Build
• Upload files to PhoneGap and it generates native packages for all
the phones (Also integrates with Git)

14. 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

15. Debug
• Use Safari/Firefox on PC
• iPad/iPhone Simulator for screenshots
• Firebug Lite on device (just include js file in HTML page)

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

17. Downlevel
• Non-smartphones
• Use WURFL to detect
• Serve plain HTML pages
• Non-HTML5 web browsers
• Polyfills using modernizer

18. 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

19. Like this? We’re hiring!

20. Links
• This presentation and links to all the tools/frameworks
available at:
iqcode.wordpress.com