Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Best Practices: Hybrid Mobile Native + Web Apps

22,691 views

Published on

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.

Published in: Technology
  • Be the first to comment

Best Practices: Hybrid Mobile Native + Web Apps

  1. 1. Best Practices:Hybrid Mobile Apps Charles Ying Developer @ Flipboard #NativeWeb © 2012
  2. 2. Flipboard is a Hybrid App
  3. 3. Web App Hybrid App Native App Web UI with JavaScript logic Simple Wrapper Native API access with Native UI
  4. 4. Web App Native AppRapid development High performance Instant update Native user experience
  5. 5. Use the best qualities of each technology
  6. 6. Don’t emulate native UI
  7. 7. Document-oriented content and UIWeb Varying presentation and layout Rapidly updated parts Cross platform parts
  8. 8. Native UINative Performance critical parts Hardware intensive operations Effects and Animation
  9. 9. Bridging Web and Native
  10. 10. iOS UIWebView URL encoded data Native Code JavaScript JSON data• Request queue• Storing string data in JavaScript global• Sufficient for most applications
  11. 11. iOS Custom JavaScriptCore Direct JavaScript Calls Native Code JavaScript• High performance• Direct JavaScript object access and bindings• Ideal for games
  12. 12. Bridging Tips Keep integration points simple, loosely coupled Detect and version features in your native API - degrade gracefully Avoid making calls in performance hotspots
  13. 13. Profile before optimizing
  14. 14. Always respond to user input
  15. 15. Save power: Do fewer, simpler things
  16. 16. Working with Web Code 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
  17. 17. Mobile Graphics 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
  18. 18. Existing Frameworks
  19. 19. UIWebView bridge PhoneGap, trigger.ioCustom JavaScriptCore Appcelerator Gaming Spaceport, ImpactJS, CocoonJS
  20. 20. Examples
  21. 21. References to Example Videos CSS3 Coverflow at 60 FPS http://www.satine.org/archives/2008/11/06/coverflow-for-safari-on-iphone/ Sony Video Unlimited for PlayStation 3 http://www.satine.org/archives/2011/09/27/playstation-web-app/ Flipboard for iPad and iPhone http://flipboard.com
  22. 22. Summary Use the best qualities of each technology Bridge Web and Native code with simple, loosely coupled APIs Profile first, be responsive, save power Consider what your code, libraries, and platform are doing Use hardware acceleration where possible
  23. 23. “Is it a web app or a native app?”
  24. 24. It’s a great user experience
  25. 25. Thank You http://satine.org @charlietunaLanyrd page with link to notes Official Session Page

×