iOS From HTML5 Back to Native

It's interesting to see the trend of iOS apps that moved from a pure native experience to an HTML5 hybrid experience and are now moving back to a pure native experience. Or in a few cases started out as an HTML5 hybrid experience first. Case in point is that Facebook has finally admitted how buggy and poor performing this exercise has been.

At Lolay we often get a first hand look at such bugs and performance issues with a hybrid experience. We often get asked to rewrite an HTML5 experience back to a native experience as the products just are not snappy enough of an experience for end users. Facebook is no exception, and we've often used the Facebook app as an example of what performance you can expect with a hybrid experience.

There are a number of issues we run into with hybrid experiences.

1. Too many applications try to replace the entire app logic with HTML5. They use the app as a shell rather than in key, strategic, critical places.
2. HTML5 Javascript and CSS downloads are way to heavy and large to download over mobile.
3. iOS WebView's have notoriously poor performance, and Android is not significantly better on a year old device.
4. Caching to prevent excessive downloads of CSS and Javascript can cause a large amount of bugs as Javascript and server side are not necessarily updated at the same time. This takes a strong asset versioning approach to get around these issues.

In all honesty, it's not that a hybrid application is bad. It's just that the HTML for a hybrid experience needs to be used strategically and as light as possible. Here are some our best guidelines for such an experience.

1. Abandon Javascript and a Web 2.0 interface in your apps. You're better off utilizing a very lightweight XHTML request/response interaction with minimal CSS and very minimal javascript (i.e. if it can't be inlined, then consider not using it).
2. Perform all navigation natively. Keep the HTML for content only that needs to be updated easily without an app update. A great example of this is Urbanspoon or Zite.
3. Perform no animations, scrolling, moving in the HTML itself. Keep that all native.
4. For any button actions or similar perform this as an in-app scheme (i.e. your-app://) that is handled natively.

Following these guidelines can lead to a successful hybrid application, although it can be challenging for an organization to think in a lightweight manner.