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

23,135 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
  • Best dissertation help you can get, thank god a friend suggested me ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ otherwise I could have never completed my dissertation on time.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ⇒ www.HelpWriting.net ⇐ This service will write as best as they can. So you do not need to waste the time on rewritings.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Did u try to use external powers for studying? Like ⇒ www.WritePaper.info ⇐ ? They helped me a lot once.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Loving the plans. Got lots of different ideas and inspiration. I'm sending you a photo of a bed frame I did for my daughter! ➣➣➣ https://url.cn/xFeBN0O4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Celebrated pianist Scott Henderson says: "I am thoroughly impressed by the system's ability to multiply your investment! ♣♣♣ https://bit.ly/2TSt66k
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×