Information and Insights from Sessions at SXSW in Austin, TX

Best Practices: Native + Web Hybrid Mobile Apps

Posted: March 10th, 2012 | Author: | Filed under: SXSW '12 | Comments Off on Best Practices: Native + Web Hybrid Mobile Apps

Saturday, March 10 – 11:00AM -12:00PM
Charles Ying Developer Flipboard

Flipboard takes feeds and streams from all over the web and turns it into a beautiful magazine layout (for iphone and ipad).

Flipboard is a hybrid application – it is a mix between a web app and a native app.

Web App
Put a simple "app" wrapper around a website

Native App
Has a native UI with hooks into the device

The idea of a hybrid app is to take the best of both worlds and combine them into something that takes advantage of both worlds. Use the best parts of web and the best parts of native and combine them together.

Do NOT try to emulate native UI – they don’t feel right, and many times have too much overhead.

Bridging Web and Native
Use a UIWebView with javascript calling the native code when necessary.

Save power – do fewer simpler things.

Working with Web Code:
Debugging was difficult, so a simulated HTML environment was created for testing
Move hotspot areas into native code
Pay attention to what your JS libraries are doing, strip out the things you don’t need
Consider what the browser has to draw and composite on screen.

Mobile Graphics
Aim for high frame rates (60fps)
Use the GPU acceleration for animation and UI
Use CSS3 Animation + Transitions
Watch your graphics memory use
Shadows and gradients are typically slower on mobile devices
Consider compositing and overdraw – transparent elements have more overhead

Existing Frameworks

  • PhoneGap, trigger.io for UIWebView bridge
  • Appcelerator for Custom JavaScriptCore
  • Spaceport, ImpactJS, CocoonJS for Gaming