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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Best Practices: Hybrid Mobile Native + Web Apps

19,831

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 …

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
0 Comments
42 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
19,831
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
592
Comments
0
Likes
42
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \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
  • 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

    ×