Recipe For Building A Hybrid Mobile App

Building a Hybrid mobile application is a very opinionated exercise. If you have little or no experience with this process, looking online for the right way to do things normally gets you into more trouble than needed. It seems everywhere you look for help, people are claiming that their own way is the one true way and every other way is crap. For example searching for something as simple as how to store your apps data locally is a minefield. Different people will tell you to use different things and downplay other alternatives.

I personally think that this is not a correct way to go about things because different use cases require different tools.

There is no one true way on how to do things

In this post however, I will aim to highlight some of the more important factors that add up to make an excellent hybrid app. In each factor, I will highlight tools that make the process even much more simpler. All tools that will be discussed here are based on my own personal experience and I am in no way playing down any other tool not mentioned.

Use A Framework

This is probably the most important feature when building a hybrid mobile app. The number of things to worry about when building a hybrid mobile app without a framework are just unimaginable. For example, you have to worry about the 300ms delay, browser engine differences, navigation history etc. Instead of spending time worrying about these, why not just use a framework created for hybrid mobile app development that takes care of these for your.

Some Great Frameworks

Frameworks You Should Probably Not Use

  • J-Query / JQM
  • Bootstrap

The reason I have explicitly written against these 2 is that firstly they are very popular on the traditions web development scene. They are great tools for the web but for mobile they are probably not the best. J-Query for example is not very performant and this can be a problem for mobile apps considering they have less memory and smaller processing power available. Also a CSS framework like bootstrap is excellent for websites on the web but it is a tool built for responsiveness not for hybrid mobile apps.

Build For Offline

In my personal opinion, this is a very important area that most apps both native and hybrid do not pay attention to. Think of your Facebook or Mail apps on your phone. What makes them great especially Mail apps on mobile devices is that you can access content you have already accessed before when you are offline. It sounds very trivial but its something not enough developers pay attention to.

Some Great Tools For Offline

  • Local-Forage : This is a great tool that encapsulates web technology based storage. It provides you one interface to access IndexedDB, WebSQL & Local-storage.
  • Pouch DB: This is another great tool that also provides you with a simple interface for storing data on mobile devices. Pouch DB also lets you use the Cordova SQL lite plugin to have your data saved in the native container.

There is one practice I must warn against. This is the practice of using Local-Storage as the default data store. Local-Storage must be used only to save very light data like tokens and not a lot of big data like images because it is limited to 5mb and it is not an asynchronous interface. Also be careful the way you use the File API and I recommend using the File API interface for non changing long lasting data like Videos.

Platform Specifics

When using a tool like Cordova, it is easy to buy into the build once run everywhere dream. Web developers are used to writing one UI for a website on the web, and have it run on any web browser. On mobile, the story is a bit different. Each platform has its own platform specific implementation for everything from UI components, sounds to transitions/animations. You need to be aware of these differences and adhere to them. The last thing your user wants is to see an experience meant for IOS on their android device and vice versa.

A framework like Ionic for the most part takes care of some of these for you automatically.

Difference Placement of tabs automatically by Ionic

Knowing these differences is very important as it ensures that your user has a great experience using your application and this is the single most important feat.

Tools For Hybird Apps

When it comes to tools, it seems vendors dont pay enough attention to Hybrid apps. They create great SDKs for native and leave hybrid to rot. This means when you want to use things like Analytics in your app, you are very much left to rue why you chose the hybrid way. There are some vendors that care and I will put them under categories.

Backend Tools

When developing a mobile app, most of us dont really care about developing the backend and the specifics. We really just want something that works and works well serving our needs to persist data.

These backend tools easy integration with storage and other tools. From my own personal experience, I find Firebase to be very easily bound to any hybrid app and supports a lot of frameworks. Firebase also has a killer authentication process that is dead easy. Parse is really good and has some other features like Push service. Azure is very easy and they have Cordova a template to get you started.

Analytics

This is another area that hybrid apps are limited because vendors fail to create an easy interface for hybrid apps. Although most have a normal web library, sometimes these libraries are just not fully designed with hybrid apps in mind and this can be problematic.

  • Appsee : Appsee is a tool I particularly like because it not only gives you data about what your users are doing, but also data about your User Interface and heat maps. It has a killer feature that shows you recorded videos of your users using your app. It also has the easiest one line integration thanks to its great Cordova plugin. It does have a steep pricing range if you want to go premium but its well worth it.
  • Google Analytics : This is another cool tool for analytics in the hybrid world. It is more data centric and can show you live data of what users are doing.
  • App Annie: This is a tool for app store analytics. It shows you good data about your user base and you can also get advice on how best to improve downloads and acquire users.

As you may have noted, I particularly like Appsee because of its easy integration and video recording feature. Google analytics is great too and very intelligent for getting data. App Annie is a very great and niche because it focuses on just app store analytics which Appsee & Google Analytics dont really focus on.

Push Notification

Push is a great feature for user engagement and the tools listed here are some great services you can easily integrate into your hybrid app for push notification.

Pushwoosh is the tool I personally rely on for my Push notification needs. It has a great cordova plugin, easy set up and generous pricing. Ionic Push is a new tool still in early stages but looks very promising. The one thing I like about Ionic push is the ability to test while developing on the browser. This comes in very handy for testing while developing.

Roundup

As noted in the beginning of this article, these tools are a bit opinionated and based on my own personal experience. I am in no way bashing any tool not listed on here. All I am saying is I have used some of these tools and from the perspective of a Hybrid mobile app developer, they rock and you should try them.

Worthy Mentions

  • HTML5-GL : Great tool for using WebGL Dom style.
  • Famo-us : Great technology for javascript animations
  • Crosswalk : A must use for android. Solves a lot of the android fragmentation issues.