Best Practices: Hybrid Mobile Native + Web Apps

Download Best Practices: Hybrid Mobile Native + Web Apps

Post on 06-May-2015

19.745 views

Category:

Technology

4 download

DESCRIPTION

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.

TRANSCRIPT

  • 1.Best Practices:Hybrid Mobile Apps Charles Ying Developer @ Flipboard #NativeWeb 2012

2. Flipboard is a Hybrid App 3. Web AppHybrid App Native App Web UI with JavaScript logicSimple Wrapper Native API accesswith Native UI 4. Web App Native AppRapid developmentHigh performanceInstant update Native user experience 5. Use the best qualities of each technology 6. Dont emulatenative UI 7. Document-oriented content and UIWeb Varying presentation and layoutRapidly updated partsCross platform parts 8. Native UINative Performance critical parts Hardware intensive operations Effects and Animation 9. Bridging Web and Native 10. iOS UIWebViewURL encoded dataNative CodeJavaScript JSON data Request queue Storing string data in JavaScript global Sufficient for most applications 11. iOS Custom JavaScriptCoreDirect JavaScript CallsNative 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 CodeBuild a HTML simulated environment for debuggingMove hotspot areas into native codeSee what your JavaScript libraries are doingConsider what the browser has to draw and compositeBrowser bugs 17. Mobile GraphicsAim for 60 FPSGPU acceleration is key to fast animations and UIUse CSS3 Animation + TransitionsWatch graphics memory useShadows and gradients typically slower CPU operationsConsider compositing and overdraw 18. Existing Frameworks 19. UIWebView bridge PhoneGap, trigger.ioCustom JavaScriptCore Appcelerator Gaming Spaceport, ImpactJS, CocoonJS 20. Examples 21. References to Example VideosCSS3 Coverflow at 60 FPShttp://www.satine.org/archives/2008/11/06/coverflow-for-safari-on-iphone/Sony Video Unlimited for PlayStation 3http://www.satine.org/archives/2011/09/27/playstation-web-app/Flipboard for iPad and iPhonehttp://flipboard.com 22. SummaryUse the best qualities of each technologyBridge Web and Native code with simple, loosely coupled APIsProfile first, be responsive, save powerConsider what your code, libraries, and platform are doingUse hardware acceleration where possible 23. Is it a web app or a native app? 24. Its a great user experience 25. Thank You http://satine.org@charlietunaLanyrd page with link to notesOfficial Session Page