Best Practices: Hybrid Mobile Native + Web Apps
-
Upload
charles-ying -
Category
Technology
-
view
19.764 -
download
4
description
Transcript of Best Practices: Hybrid Mobile Native + Web Apps
![Page 1: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/1.jpg)
Best Practices: Hybrid Mobile Apps
Charles YingDeveloper @ Flipboard
#NativeWeb
© 2012
![Page 2: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/2.jpg)
![Page 3: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/3.jpg)
![Page 4: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/4.jpg)
![Page 5: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/5.jpg)
![Page 6: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/6.jpg)
Flipboard is a Hybrid App
![Page 7: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/7.jpg)
Web App Native AppHybrid App
Simple WrapperWeb UI with
Native API accessJavaScript logic with Native UI
![Page 8: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/8.jpg)
Web App Native App
High performance
Native user experience
Rapid development
Instant update
![Page 9: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/9.jpg)
Use the best qualities of each technology
![Page 10: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/10.jpg)
Don’t emulate native UI
![Page 11: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/11.jpg)
Document-oriented content and UI
Varying presentation and layout
Rapidly updated parts
Cross platform parts
Web
![Page 12: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/12.jpg)
Native UI
Performance critical parts
Hardware intensive operations
Effects and Animation
Native
![Page 13: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/13.jpg)
Bridging Web and Native
![Page 14: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/14.jpg)
iOS UIWebView
Native Code JavaScript
URL encoded data
JSON data
• Request queue
• Storing string data in JavaScript global
• Suf!cient for most applications
![Page 15: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/15.jpg)
iOS Custom JavaScriptCore
Direct JavaScript Calls
• High performance
• Direct JavaScript object access and bindings
• Ideal for games
Native Code JavaScript
![Page 16: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/16.jpg)
Keep integration points simple, loosely coupled
Detect and version features in your native API - degrade gracefully
Avoid making calls in performance hotspots
Bridging Tips
![Page 17: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/17.jpg)
Profile before optimizing
![Page 18: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/18.jpg)
Always respond to user input
![Page 19: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/19.jpg)
Save power: Do fewer, simpler things
![Page 20: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/20.jpg)
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
Working with Web Code
![Page 21: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/21.jpg)
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
Mobile Graphics
![Page 22: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/22.jpg)
Existing Frameworks
![Page 23: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/23.jpg)
UIWebView bridge PhoneGap, trigger.io
Custom JavaScriptCore Appcelerator
Gaming Spaceport, ImpactJS, CocoonJS
![Page 24: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/24.jpg)
Examples
![Page 25: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/25.jpg)
![Page 26: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/26.jpg)
![Page 27: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/27.jpg)
![Page 28: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/28.jpg)
CSS3 Cover!ow at 60 FPShttp://www.satine.org/archives/2008/11/06/cover!ow-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://!ipboard.com
References to Example Videos
![Page 29: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/29.jpg)
Use the best qualities of each technology
Bridge Web and Native code with simple, loosely coupled APIs
Pro"le "rst, be responsive, save power
Consider what your code, libraries, and platform are doing
Use hardware acceleration where possible
Summary
![Page 30: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/30.jpg)
“Is it a web app or a native app?”
![Page 31: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/31.jpg)
It’s a great user experience
![Page 32: Best Practices: Hybrid Mobile Native + Web Apps](https://reader034.fdocuments.net/reader034/viewer/2022042513/55498ea7b4c905b96a8b527e/html5/thumbnails/32.jpg)
Thank You
http://satine.org
@charlietuna
Lanyrd page with link to notes
Of!cial Session Page