{"id":596,"date":"2012-03-10T10:48:02","date_gmt":"2012-03-10T16:48:02","guid":{"rendered":"http:\/\/www.techory.com\/blog\/?p=1480"},"modified":"2012-03-15T12:59:21","modified_gmt":"2012-03-15T18:59:21","slug":"best-practices-native-web-hybrid-mobile-apps","status":"publish","type":"post","link":"http:\/\/techory.com\/sxsw\/?p=596","title":{"rendered":"Best Practices: Native + Web Hybrid Mobile Apps"},"content":{"rendered":"

Saturday, March 10 – 11:00AM -12:00PM
<\/strong>Charles Ying Developer Flipboard<\/p>\n

Flipboard takes feeds and streams from all over the web and turns it into a beautiful magazine layout (for iphone and ipad).<\/p>\n

Flipboard is a hybrid application – it is a mix between a web app and a native app.<\/p>\n

Web App
<\/strong>Put a simple "app" wrapper around a website<\/p>\n

Native App
<\/strong>Has a native UI with hooks into the device<\/p>\n

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.<\/p>\n

Do NOT try to emulate native UI – they don’t feel right, and many times have too much overhead.<\/p>\n

Bridging Web and Native
<\/strong>Use a UIWebView with javascript calling the native code when necessary.<\/p>\n

Save power – do fewer simpler things.<\/p>\n

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.<\/p>\n

Mobile Graphics
<\/strong>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<\/p>\n

Existing Frameworks<\/strong><\/p>\n