The Do’s and Don’ts of Building HTML5 Hybrid Apps


By

In the beginning there was native code and it was good. Then PhoneGap, Appcelerator, Trigger.io, AppGyver and others emerged, ushering in the “native or hybrid” debate.

If you aren’t familiar with the term, a hybrid app is a mobile app written using languages such as HTML5, CSS3 and JavaScript, then compiled into native iOS, Android or other mobile platform code using wrapper technologies such as PhoneGap/Cordova. Additionally, these frameworks have APIs allowing access to native functions such as the camera, GPS, etc.

The allure of HTML5 is hard to deny. If you’re proficient in building web apps, you’re 90% of the way to creating hybrid mobile apps. You can spend weeks learning Swift or Objective C to write your first iOS app or starting building something today that will also run on Android.

Native proponents are quick to say there’s no substitute for natively written apps. Aspects such as speed, stability, smooth transitions and ease of maintenance are major selling points.

Mobile apps concept

Dismal early experiences developing hybrids placed me in the native camp. In 2010, smitten with the promise of “write once deploy everywhere,” I led a team that decided to give PhoneGap a whirl. It didn’t take much time to realize PhoneGap’s limitations. Our client wanted that “native feel,” but it wasn’t possible. Scrolling, fixed headers and transitions were an issue. Performance was awful. The entire project felt like swimming upstream.

That experience forced me to accept that unless we were willing to compromise aspects native apps take for granted, hybrid wasn’t ready for prime time.

Fast forward to 2013. PhoneGap 3 was released. Smartphones such as the iPhone 5 and Nexus 3 demonstrated exponential advances in processing power. OS support of CSS3 had come along considerably. It was time to give hybrid another try at bat.

The result? Mixed. We produced two apps. The first was a relatively simple calculator-style app with some reporting. We purposely avoided transitions between views and other processor-intensive actions. It turned out well—outputting to both iOS and Android was mostly painless. Unless you’re a seasoned mobile developer, you wouldn’t know it was a hybrid.

The second attempt was more challenging. The app was complex and the client had specific requests on how it needed to work. In hindsight, it wasn’t a good hybrid candidate. Despite this, we successfully completed the project. We also learned a ton along the way.

Having since been part of numerous native and hybrid projects, I’ve gained a pretty good perspective on the Do’s and Don’ts of taking a hybrid approach.

First, the good news: yes, hybrid is a viable solution (sorry, native evangelists). Advances in smartphone processing and memory, along with improved frameworks have helped level the playing field. However, there are guidelines one should follow when considering hybrid. Let’s start with the Don’ts.

The Don’ts…

1. Don’t Use Heavy Libraries, Frameworks or Plug-ins
If avoidable, Don’t use heavy libraries like jQuery. If you must use jQuery, opt for the much lighter Zepto.js. Completely avoid jQuery UI and jQuery Mobile. Both these libraries are performance hogs when compiled into mobile apps. jQuery Mobile in particular imposes a lot of rigidness.

2. Don’t Use HTML5 for Apps that are Multi-purpose or Complex
When it first launched, Facebook used a hybrid approach and it was a dismal failure due to performance. Facebook crammed a lot of functionality into the app, weighing it down considerably. When considering hybrid, your concept should be simple.

3. Don’t Load Views All at Once
If your views are a mix of text and graphics, load the text first and the graphics as separate data calls that load sequentially. Speed and performance are paramount to creating an engaging user experience.

4. Don’t Use Hybrid for Animation or Graphic-intensive Apps
For example, interactive games or rich-media.

5. Don’t Expect Your App to Run Perfectly in iOS and Android Out of the Gate
We’ve consistently developed for iOS first, and then re-factored for Android. The “write once run everywhere” mantra just isn’t that simple. Prepare to spend time adjusting your CSS and other formatting to accommodate each OS.

The Do’s…

1. For Data-driven Apps, Do Use Javascript MVC Frameworks Like AngularJS
Angular is particularly well-suited for hybrid apps because it doesn’t rely on heavy libraries like jQuery. Backbone.js has some nice helper libraries like Thorax and Marionette. App.js is a lightweight framework designed for hybrid apps.

2. Do Consider Using a UI Library such as Ionic

Ionic excels at delivering native-like transitions and pairs well with AngularJS.

3. Do Minify HMTL/CSS/JS to Reduce File Size and Improve Performance
Use tools like jscompress.com for Javascript files, and cssminifier.com for CSS. Will Peavy’s HTML minifier will compress your HTML nicely. Be sure to test your app thoroughly after minimizing to ensure everything works.

4. Do Crunch All Your Graphics
There are plenty of graphics optimizers out there. Tinypng.com is great at reducing PNGs without compromising quality.

5. Do Test for Performance
Clunky or inconsistent view transitions and slow load times make an otherwise great app unpolished. If you’re using PhoneGap/Cordova, test your hybrid apps using a tool like Browser-perf. Third-party services like New Relic’s mobile monitoring pinpoints issues across response times, errors, carrier performance and versioning optimization.

6. Do Use Chrome Canary to Emulate Different Environments
Canary’s Developer tools will emulate different devices and network speeds when testing your app.

Business concept

7. Do Take Advantage of Local Storage
By leveraging local storage, your app can re-render views and reduce service calls. Speed is a big issue for hybrid apps and local storage increases performance.

8. Do Consider Learning a Hybrid Development Framework
There are numerous frameworks and platforms out there for developing hybrid apps. I’m particularly impressed with the offerings from AppGyver. Their platform uses a mix of native and hybrid components and is rooted in AngularJS. In evaluating several hybrid frameworks, I’ve found AppGyver’s Steroids platform produces incredibly responsive, native-like apps.

Conclusion

Native has clear advantages, but hybrid apps have come a long way. Recent platforms and frameworks have brought powerful new ways of building apps to the forefront of mobile development. If you’ve tried hybrid in the past with less than spectacular results or are considering it for the first time, there’s no better time in history to give it a try!


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.