Hybrid Mobile Apps

Overview of hybrid mobile apps

Hybrid mobile apps are an attempt to reduce the cost and barrier to entry for mobile app development. They do this by targeting multiple platforms using a single codebase written in HTML, CSS, & Javascript. Apps that take this approach are created much in the same way that modern websites are made, but rather than being viewed in a mobile web browser, the app is placed inside a small native wrapper that allows it to be submitted to app stores and installed like any other mobile app. If all goes according to plan, developers will never have to write a single line of native code and users will not have the faintest idea that they are using a hybrid app.

The hope is that hybrid mobile apps can significantly reduce development costs and drastically increase the number of developers who are capable of developing apps. This article will explore how close hybrid apps come to achieving this dream, explain several key limitations of hybrid apps, explore their ramifications in the industry, and finally outline how hybrid mobile apps fit into our overall mobile app development approach.

What is so great about hybrid mobile apps?

Recently there has been a surge in popularity of hybrid mobile apps. But what really makes them so great? One of the biggest advantages is that they open the door for web developers to the mobile app stores. JavaScript, the primary client-side language of web development, is the eighth most popular programming language according to tiobe.com. Java, the primary language for Android, and Objective-C, the primary language used for iOS, rank 1st and 14th respectively. Since hybrid mobile apps allow developers to use JavaScript instead of the individual native platform languages, this creates a huge influx of developers. Additionally, companies that once only offered web development services can now begin offering mobile app development services as well. With a larger supply of capable developers, the cost of development will decrease and the number of apps in the stores will continue to grow.

Another massive advantage is that traditional mobile app development requires separate codebases for each platform the app targets. With multiple codebases, development time is increased and so too is the time required to QA each version. This also means that your development team will be larger and thus increases the likelihood that the app behaves differently on each platform. By building a hybrid mobile app, all versions are kept in sync. You will still have to QA the app on all targeted platforms, but the versions should behave the same in almost all cases.

A final triumph of hybrid mobile apps is their ability to convert existing web apps to mobile apps. This will not work in all cases and the time needed can vary significantly, but if you already have a web app that works well on mobile browsers, odds are you can fairly easily convert it to a hybrid mobile app. This works best if you planned to do this all along, but we have had great success taking web apps we built within the last few years and bundling them as a hybrid apps well after the original web app launched. Since creating a hybrid mobile app is so much like making a mobile website, often you simply have to go back and repackage what you already built.

Who uses hybrid apps?

it is generally a good idea not to hop on the latest technology trend too soon. Early adopters often have significant growing pains, have to respond to frequent updates and changes, and risk buying into something that might not last more than a year. But, identifying a new technology that can significantly reduce your costs and help get your app live sooner can put you ahead of your competition. So, it is often a good idea to look at other top companies and see how they are approaching and adopting new technologies. With this in mind, here are a list of some highly successful hybrid mobile apps:

• Instagram
• Uber
• Untappd
• Yelp

It is equally important to understand why these companies chose to go with the hybrid app approach. Still more important is finding companies that choose to go in a different direction or ones that once had a hybrid app, but abandoned it in favor of another approach. Finding these stories will help you understand the shortcomings of hybrid apps and better understand if going hybrid is the proper approach for your app.

What are some common problems with hybrid mobile apps?

Many apps begin down the hybrid path, only to realize too late that there is going to be a serious problem with the chosen approach. For this reason, it is paramount that decision makers understand the shortcomings of hybrid apps before getting started. Here are some common issues faced when working with hybrid mobile apps:

• UI sluggishness on animations.
• Memory related issues on memory-limited devices.
• Lack of packages or built-in support for desired native functionality.
• UI/UX uniformity between platforms, rather than a platform-specific look and feel that many users expect.
• A later project milestone will add to the project scope, something that is very difficult or impossible to do with a hybrid app.

These issues vary in severity from project to project and between hybrid app libraries. Some of these are deal breakers, whereas some are an inconvenience that is justified by the project's lower budget. It is important to get an informed and unbiased opinion prior to selecting the approach and technology before beginning any mobile app project.

How much do hybrid mobile apps cost?

Hybrid apps should be moderately less expensive than native apps, IF you are targeting more than one platform. They should also be cheaper to maintain and test since they use a single code base. They also might be more cost effective if you already have web developers on payroll, since now they will be able to work on your mobile app as well. It is not always true that going hybrid will save you 50% when targeting iOS and Android, but in our experience you can expect to save around 30% to 40%. This of course is reliant upon a hybrid app being a good fit for the project.

Like almost anything else in web and mobile development, there is not a one-size-fits-all cost equation and the total cost of a project could be less if you go native. It all depends on understanding the options and choosing the best one for your app. Hybrid apps have the potential to be cheaper, but that is not always the case.

How do hybrid apps compare to native mobile apps?

Hybrid app advocates would like you to believe that they deliver the exact same experience as native apps but with a substantially smaller price tag. For the most part, they are correct. Hybrid apps can be submitted to the app stores just like native apps. They can be downloaded by users just like native apps. They perform much in the same way as a native app and as we have already discussed they can be significantly less expensive to make than native apps.

However, there are some differences when it comes to performance, inter-app operability, animations, and native functionality. Since hybrid apps are basically a web view, they can be a bit sluggish and less responsive than native apps. This is particularly apparent with animations (such as the iOS tray open and close animation). Additionally, when a hybrid app wants to use native functionality, like accessing contacts or calendars, they have to rely on various packages. If there is not an existing package that performs your desired task, you might have to make your own. This is made more difficult by the fact that these packages must be written natively for each platform you are targeting. So much for not having to learn Java or Objective-C! A few other ways hybrid apps fall short of native apps include offline functionality, memory usage, and overall developer support and documentation.

How do hybrid apps compare to responsive websites?

Responsive websites are actually quite similar to hybrid apps. In many ways, you can consider the mobile form of a responsive website as the core of a hybrid app. A responsive website has the HTML, CSS, & Javascript needed for the site to be functional on mobile devices. The content, styling, and logic can be the exact same for both. The hybrid app simply involves taking a web app and packaging it in a native wrapper. You have to ensure that the user experience still works in this form, but it is very possible that no additional work is needed to convert your responsive website (or mobile website for that matter) to a hybrid mobile app.

This means the most significant difference between the two is how they are accessed. Responsive websites are viewed in mobile browsers and benefit from your traditional Google SEO. Hybrid apps on the other hand are found in app stores and installed to your phone’s home screen. This has a huge array of benefits, many of which I discuss in my previous article on mobile engagement.

How do hybrid apps compare to cross-platform native apps?

Cross-platform hybrid apps are apps built using a single codebase, but compile to native code for each platform. Popular cross-platform technologies include Xamarin and NativeScript. These technologies compile code to native binary, making them true native apps. Being native, they have the ability to have better performance, can take on the platform specific native UI/UX, and can make better use of other native functions. The downside is these approaches often have a steep learning curve. So, although you can save money and effort when compared to platform-specific native approach, cross-platform native will likely be more expensive than going hybrid.

Deciding between these two options will largely come down to your development team’s skill set. If they have .Net and C# experience, Xamarin might be a great fit. But, they will have to learn a fair bit about native app processes along the way. If you do not fit in this group, it might be a good idea to consider going hybrid. Many would likely argue that if you have to invest time to learn a cross-platform native approach, maybe you should invest just a bit more and go platform-specific native, since ultimately that will always be the most performant and provide the best user experience.

What do hybrid apps mean for web developers?

On the surface, the emergence of hybrid mobile apps is fantastic for web developers. With the explosive growth in smartphones & tablets, there is an enormous opportunity for app developers. But learning native development (let alone development for multiple platforms) has historically been a large barrier to entry. Hybrid apps, in theory, remove this barrier and allow web developers to enter this very profitable market. However, web developers should make sure to understand the limitations of hybrid apps and be willing to step into native code where necessary.

There is yet another interesting angle for web developers thanks to hybrid mobile apps. For freelance or consultant developers, you might be bidding against other developers who only offer native development. Since hybrid apps are usually cheaper, web developers can have a significant competitive advantage when pricing projects. This is increasingly true for apps that are targeting multiple platforms. Savvy web developers might be able to increase their rates and still be a competitively priced option. If you are a web developer, it makes a ton of sense and might require limited effort to begin offering hybrid app development services. Web developers should also keep an eye on React Native. It has allowed us to use experienced web developers on native mobile projects.

What do hybrid apps mean for mobile developers?

As a mobile developer, I would carefully read and understand the preceding paragraph. I would research and understand the current state of hybrid app development and pay particular attention to its shortcomings. If you are a freelance or consultant mobile developer, you will soon be or likely already are competing against web developers for mobile app projects. This could mean that you have to more competitively price your projects and that every one of your proposals is being compared to a whole new set of competitors. But, if you can explain and demonstrate the advantages of native mobile apps and know what apps are a better fit for your approach, you should be able to avoid losing any business to web developers employing the hybrid app approach.

Additionally, mobile developers could instead leverage their native development experience, learn some web development (if they don’t already), and become a world-class hybrid app developer. As already discussed, most hybrid apps rely on packages written natively. Developers with this cross-section of skills can really set themselves apart by mastering both native and hybrid app approaches.

What do hybrid apps mean for businesses?

Any experienced business person should have read the previous two sections with a big grin on their face. Since hybrid apps bring more developers to the table, you have many more options to consider when building a mobile app. More developers means increased competition for your business, which of course means you save money. Increased options does mean you will have to do more research to fully understand the correct approach. You need to consider what the app is and what it could be. Businesses would be wise to find someone or a company who truly offers a wide array of mobile app development approaches. That way, they can rely on their guidance and hopefully not be steered one direction because it is the only service that developer or company offers.

One other thing to consider is if you already have a web app, hybrid apps can likely parlay that site into a mobile app for a fraction of the cost a new app would cost. Having a mobile app is a fantastic idea for any business and thanks to hybrid apps, they are cheaper than ever.

What are your options when making a hybrid app?

As discussed, hybrid apps involve taking what is basically a website and wrapping it in a native package. There are several different frameworks that can make this process possible. Evaluating and choosing a framework can be overwhelming given the large number of options. Here is a list of some of the most popular options and a bit about each:

• Ionic - Ionic provides several built in UI components and is heavily reliant on AngularJS for two-way data binding.
• Cordova (Phone Gap) - Cordova is the least opinionated option. Rather than bundling a bunch of things together, Cordova is a framework that lets you define your tools and simply handles the packaging and releasing of the app.
• Appcelorator Titanium - Uses Alloy (a MVC framework), has a built-in API framework, and offers real-time analytics.
• Sencha Touch - One of the older hybrid app frameworks, Touch places an emphasis on mimicking native UI/UX.
• Kendo UI - Kendo is a great choice for fans of jQuery.

How much staying power do hybrid mobile apps have?

Buying into a new technology can be a risky endeavor. Early adopters often pay a hefty price to maintain their apps if the underlying technology changes or gets abandoned. But, one of the great things about hybrid apps is that they rely so heavily on web development technologies. Given the immense staying power of the web and websites, the languages used to make hybrid mobile apps will be taught and used for quite some time. So, odds are you will not find yourself in a position where you have to pay for some niche developer to maintain your app. But, there is some risk in which hybrid app technology you choose. It is possible that one or more of the current frameworks will fall out of favor and stop being maintained. A final risk is that other methods, such as cross-platform mobile app development (e.g. Xamarin), become increasingly more popular.

Ultimately the thing to consider is how long you expect your app to be used and if it is reasonable to think hybrid apps will be in use for that whole period. In most cases, that seems like a pretty safe bet to me.

Do we recommend taking the hybrid approach?

As a rule, we think having a single technology stack or approach and applying it to every project is a terrible idea. Companies and developers that do this will often force an ill-fitting solution on a project when another approach would have worked much better. So, we think anyone arguing that hybrid apps are a silver bullet or completely useless is dead wrong and we would encourage you to be very skeptical of such developers as it is likely they are either only capable of doing hybrid apps or do not have the capacity to do anything other than native.

In general, we think hybrid is a solid budget and convenience option. Here are some common cases in which we recommend going with a hybrid app approach:

• A project requires a responsive website and a mobile app would be a “nice-to-have.”
• An app will be deployed to multiple platforms, not contain too many or too involved animations, and a limited amount of native functionality is required.
• A project has a limited budget and we want to test an app’s viability for as small of an investment as possible.
• A web app version already exists and the mobile app would be very similar.

Here are some apps where we would be hesitant to go hybrid:

• The app relies on native functionality, such as extensive calendar, contacts, or photo utilization.
• The project budget is sizable and the goal is to have the best possible app.
• The app will only ever target 1 platform.
• The app will target multiple platforms and you want the app to follow each platforms standard UI and UX.
• The app will feature moderate to extensive animations.
• There is a possibility that down the road the app will need a feature or integration that isn’t possible or is prohibitively expensive with the hybrid app approach.

Obviously these lists are more guides than hard rules, but this is an example of the types of things we consider when deciding on a mobile app development approach.

Conclusion

Hybrid apps are an exciting and impactful new technology. Decision makers and developers should make sure they understand the what, how, and why of this new mobile app development possibility.

As a web and mobile development company, hybrid apps have given us a great new tool to use on some projects. But like any tool, knowing when to use it is every bit as important as knowing how to use it. I would make sure any company you work with understands, considers, and offers all available options. If not, your app might be taking a wrong turn right out of the gate. If you would like to speak with us about your next mobile app project, we would love to hear from you!

Let us know if you have any questions about this article or there are any other topics you would like us to cover related to hybrid apps or mobile development in general.