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.
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.
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.
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.
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.