Best Practices: Hybrid Mobile Native + Web Apps
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Best Practices: Hybrid Mobile Native + Web Apps

on

  • 20,212 views

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 ...

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.

Statistics

Views

Total Views
20,212
Views on SlideShare
16,132
Embed Views
4,080

Actions

Likes
39
Downloads
518
Comments
0

29 Embeds 4,080

http://econsultancy.com 3363
http://lanyrd.com 441
http://join5works.com 77
https://econsultancy.com 76
http://storify.com 21
http://apps.synaptive.net 17
https://www.linkedin.com 11
http://5works.co 10
https://twitter.com 10
http://translate.googleusercontent.com 10
http://www.5works.co 6
http://www.linkedin.com 5
http://www.hanrss.com 5
http://core.traackr.com 4
http://www.encarolina.com 3
http://us-w1.rockmelt.com 3
http://www.slashdocs.com 2
https://si0.twimg.com 2
http://ebulletin.collected.info 2
http://www.newsblur.com 2
http://bo.lt 2
http://www.diffbot.com&_=1356882912448 HTTP 1
http://www.diffbot.com&_=1356882942783 HTTP 1
http://www.diffbot.com&_=1356882926461 HTTP 1
http://bundlr.com 1
http://131.253.14.250 1
http://electrosmart.com 1
http://faavorite.com 1
http://dev.lanyrd.org 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • But Sencha Touch is a great library, very fast.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Minimize amount of data sent\n
  • Minimize amount of data sent\n
  • Minimize amount of data sent\n
  • \n
  • \n
  • \n
  • Memory leaks, memory usage, race condition crashes, rendering bugs\n\n
  • Memory leaks, memory usage, race condition crashes, rendering bugs\n\n
  • Memory leaks, memory usage, race condition crashes, rendering bugs\n\n
  • Memory leaks, memory usage, race condition crashes, rendering bugs\n\n
  • Memory leaks, memory usage, race condition crashes, rendering bugs\n\n
  • Elements detached from DOM also unload their texture memory.\n\n\n
  • Elements detached from DOM also unload their texture memory.\n\n\n
  • Elements detached from DOM also unload their texture memory.\n\n\n
  • Elements detached from DOM also unload their texture memory.\n\n\n
  • Elements detached from DOM also unload their texture memory.\n\n\n
  • Elements detached from DOM also unload their texture memory.\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n
  • \n
  • \n

Best Practices: Hybrid Mobile Native + Web Apps Presentation Transcript

  • 1. Best Practices:Hybrid Mobile Apps Charles Ying Developer @ Flipboard #NativeWeb © 2012
  • 2. Flipboard is a Hybrid App
  • 3. Web App Hybrid App Native App Web UI with JavaScript logic Simple Wrapper Native API access with Native UI
  • 4. Web App Native AppRapid development High performance Instant update Native user experience
  • 5. Use the best qualities of each technology
  • 6. Don’t emulate native UI
  • 7. Document-oriented content and UIWeb Varying presentation and layout Rapidly updated parts Cross platform parts
  • 8. Native UINative Performance critical parts Hardware intensive operations Effects and Animation
  • 9. Bridging Web and Native
  • 10. iOS UIWebView URL encoded data Native Code JavaScript JSON data• Request queue• Storing string data in JavaScript global• Sufficient for most applications
  • 11. iOS Custom JavaScriptCore Direct JavaScript Calls Native Code JavaScript• High performance• Direct JavaScript object access and bindings• Ideal for games
  • 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. Profile before optimizing
  • 14. Always respond to user input
  • 15. Save power: Do fewer, simpler things
  • 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. 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. Existing Frameworks
  • 19. UIWebView bridge PhoneGap, trigger.ioCustom JavaScriptCore Appcelerator Gaming Spaceport, ImpactJS, CocoonJS
  • 20. Examples
  • 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. 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. “Is it a web app or a native app?”
  • 24. It’s a great user experience
  • 25. Thank You http://satine.org @charlietunaLanyrd page with link to notes Official Session Page