Successfully reported this slideshow.

2011 code camp


Published on

Published in: Technology
  • Be the first to comment

2011 code camp

  1. 1. Buildingnative phoneapps usingHTML5 Imran Qureshi VP Engineering CareAnyware Inc. (Largest SaaS provider for home healthcare agencies since 2002)
  2. 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. 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. 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. 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. 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. 7. Quick Demo
  8. 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. 9. Architecture Your HTML/JS code PhoneGap Wrapper Your native code Webkit browser SDK runtime Native OS
  10. 10. jQuery Mobile• Automatic scaling• Multiple pages within one HTML document• Themes to define OS specific look and feel
  11. 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. 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. 13. PhoneGap Build• Upload files to PhoneGap and it generates native packages for all the phones (Also integrates with Git)
  14. 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. 15. Debug• Use Safari/Firefox on PC• iPad/iPhone Simulator for screenshots• Firebug Lite on device (just include js file in HTML page)
  16. 16. Deploy• TestFlight to bypass AppStore during beta• Over-the-air distribution of new releases
  17. 17. Downlevel• Non-smartphones • Use WURFL to detect • Serve plain HTML pages• Non-HTML5 web browsers • Polyfills using modernizer
  18. 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. 19. Like this? We’re hiring!
  20. 20. Links• This presentation and links to all the tools/frameworks available at: