0
Best Practices:Hybrid Mobile Apps       Charles Ying   Developer @ Flipboard       #NativeWeb          © 2012
Flipboard is a Hybrid App
Web App                    Hybrid App                             Native App                             Web UI with      ...
Web App         Native AppRapid development    High performance    Instant update   Native user experience
Use the best qualities of   each technology
Don’t emulate  native UI
Document-oriented content and UIWeb   Varying presentation and layout      Rapidly updated parts      Cross platform parts
Native UINative   Performance critical parts         Hardware intensive operations         Effects and Animation
Bridging Web and Native
iOS UIWebView                              URL encoded data  Native Code                                    JavaScript    ...
iOS Custom JavaScriptCore                          Direct JavaScript Calls  Native Code                                   ...
Bridging Tips   Keep integration points simple, loosely coupled   Detect and version features in your native API - degrade...
Profile before optimizing
Always respond to   user input
Save power: Do fewer, simpler things
Working with Web Code  Build a HTML simulated environment for debugging  Move hotspot areas into native code  See what you...
Mobile Graphics  Aim for 60 FPS  GPU acceleration is key to fast animations and UI  Use CSS3 Animation + Transitions  Watc...
Existing Frameworks
UIWebView bridge           PhoneGap, trigger.ioCustom JavaScriptCore           Appcelerator       Gaming           Spacepo...
Examples
References to Example Videos  CSS3 Coverflow at 60 FPS  http://www.satine.org/archives/2008/11/06/coverflow-for-safari-on-...
Summary  Use the best qualities of each technology  Bridge Web and Native code with simple, loosely coupled APIs  Profile ...
“Is it a web app or a native app?”
It’s a great user experience
Thank You       http://satine.org        @charlietunaLanyrd page with link to notes    Official Session Page
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
×

Best Practices: Hybrid Mobile Native + Web Apps

20,137

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

No Downloads
Views
Total Views
20,137
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
598
Comments
0
Likes
43
Embeds 0
No embeds

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 of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×