Ever wondered what does creating a hybrid app look like? What decisions need to be made, what is the end result and finally, can the app compete with the native ones? It would be best to answer these questions with a real-life example. In this post I’ll take one of my apps, Repeating What Simon Says, and describe the the making of process.

Motivation

In May 2014 I’ve been told that there’s no App Store equivalent of Simon toy that is faithful to the original. There were similar memory games but many have added their own gameplay elements, losing the retro spirit somewhere during the process. I thought that I could create an app inspired by Simon that would borrow from modern design trends but still offer similar gameplay and the same level of fun. The app didn’t require heavy computation, but intuitive UI and polished experience would be a must. Going hybrid was a natural choice for me to speed up the development process.

Development

I wanted to have a prototype as fast as possible; I’ve decided to release the Minimum Viable Product and focus on incremental updates later. My platform of choice was Cordova, a simple and proven open source solution. Some things worked out surprisingly well; I’ve picked Bootstrap and it helped me with layout work. It comes with Glyphicons, which were extremely useful in building clean, intuitive UI. Both of them were later replaced with simpler solutions (custom styles and Unicode icons), but they helped with building the first version. Also CSS in general proved to be a real time-saver. I’ve assembled some popular effects: used gradients, imitated glowing buttons via colorful shadows, applied 3D transforms, added animations and the end effect was visually appealing. The first version of the app was ready in one day and I was very happy with it.

Repeating What Simon Says screenshot

My story and the tools I’ve chosen might be different from yours. Since I’ve been dealing with a simple app, I didn’t use any of the hybrid app UI frameworks like Ionic, Onsen UI, Framework7 and many more. They’re great tools and I would have picked a UI framework if my project involved more complex user interaction.

Results

Not everything went smooth for me though. My initial pick for the audio engine was timbre.js, a JavaScript synthesiser. This was a risky choice and it turned out to be a bad one; although timbre.js worked great with my desktop projects, it didn’t perform well on mobile. Audio quality suffered during more intensive animations or caused app errors in the extreme cases. To fix it I’ve rewritten all audio logic in Objective-C and encapsulated it in a custom Cordova plugin. It wasn’t the only case when I’ve had to be flexible and try multiple approaches (although this was the most serious issue). It seems to me that agility and flexibility are must haves when working on a hybrid app.

On the other hand, the end result was just what I was after: a game with clean, pretty design that was quick to develop. The app feels no different than a native one; GPU-accelerated CSS transitions play a big role here. Also web technologies work well with varying screen dimensions. The app can adapt itself to any screen size and it currently works on both iPhones and iPads. Total JavaScript code for this app currently stays below 300 lines. With such small footprint the app was not only easy to write, but will be maintained and improved without great effort.

Wrap-up

I’ve picked a simple example, run into some problems but managed to solve them. I am overall happy with my choice. Repeating What Simon Says is now live in the App Store. Since it is a hybrid app, preparing a web version was extremely easy and you can preview it in your browser. If you want to hear news about the game, follow its Twitter account, @RepeatingWSimon.

Not every idea can be implemented with a hybrid app; but if it can, going hybrid is a great shortcut that with proper care will bring you native-like and visually pleasing apps.