Embed Size (px)
DESCRIPTION
Learn different ways to integrate HTML5 into native apps, what tools you can use, and when to build your own. We'll cover achieving high graphics frame rates, touch responsiveness while conserving battery life. Learn the benefits and tradeoffs of mobile graphics hardware acceleration in animation and emulating native UI in mobile web browsers. We'll also touch on Flipboard's use of HTML5.We'll cover these specific technology areas: WebKit and JavaScriptCore; native view system architecture, animated scene graphs; and hardware accelerated graphics drawing and compositing.
Citation preview
Best Practices: Hybrid Mobile Apps
Charles YingDeveloper @ Flipboard
#NativeWeb
© 2012
Flipboard is a Hybrid App
Web App Native AppHybrid App
Simple WrapperWeb UI with
Native API accessJavaScript logic with Native UI
Web App Native App
High performance
Native user experience
Rapid development
Instant update
Use the best qualities of each technology
Don’t emulate native UI
Document-oriented content and UI
Varying presentation and layout
Rapidly updated parts
Cross platform parts
Web
Native UI
Performance critical parts
Hardware intensive operations
Effects and Animation
Native
Bridging Web and Native
iOS UIWebView
Native Code JavaScript
URL encoded data
JSON data
• Request queue
• Storing string data in JavaScript global
• Suf!cient for most applications
iOS Custom JavaScriptCore
Direct JavaScript Calls
• High performance
• Direct JavaScript object access and bindings
• Ideal for games
Native Code JavaScript
Keep integration points simple, loosely coupled
Detect and version features in your native API - degrade gracefully
Avoid making calls in performance hotspots
Bridging Tips
Profile before optimizing
Always respond to user input
Save power: Do fewer, simpler things
Build a HTML simulated environment for debugging
Move hotspot areas into native code
See what your JavaScript libraries are doing
Consider what the browser has to draw and composite
Browser bugs
Working with Web Code
Aim for 60 FPS
GPU acceleration is key to fast animations and UI
Use CSS3 Animation + Transitions
Watch graphics memory use
Shadows and gradients typically slower CPU operations
Consider compositing and overdraw
Mobile Graphics
Existing Frameworks
UIWebView bridge PhoneGap, trigger.io
Custom JavaScriptCore Appcelerator
Gaming Spaceport, ImpactJS, CocoonJS
Examples
CSS3 Cover!ow at 60 FPShttp://www.satine.org/archives/2008/11/06/cover!ow-for-safari-on-iphone/
Sony Video Unlimited for PlayStation 3http://www.satine.org/archives/2011/09/27/playstation-web-app/
Flipboard for iPad and iPhonehttp://!ipboard.com
References to Example Videos
Use the best qualities of each technology
Bridge Web and Native code with simple, loosely coupled APIs
Pro"le "rst, be responsive, save power
Consider what your code, libraries, and platform are doing
Use hardware acceleration where possible
Summary
“Is it a web app or a native app?”
It’s a great user experience
Thank You
http://satine.org
@charlietuna
Lanyrd page with link to notes
Of!cial Session Page
