2011 code camp
DESCRIPTION
TRANSCRIPT
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