Your SlideShare is downloading. ×
2011 code camp
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2011 code camp


Published on

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Buildingnative phoneapps usingHTML5 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 HTML5iPhone/iPad Yes No* No YesAndroid No No* Yes YesWindows No Yes No YesPhoneSymbian No No Yes YesBlackberry No No Yes YesMac Yes No* Yes YesWeb No Yes No** YesWindows 8 No No(Silverlight No YesTablets only)* Mono project has some limited functionality** Few people have Java installed/enabled
  • 5. Why use HTML5 to build nativeapps?• 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, Facebooks 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: