Hybrid Mobile Apps

TABLE OF CONTENT

Mohammad Azhar Jan 17, 2024 App Development

Introduction

Hybrid mobile applications are apps that are built using web technologies and packaged as native applications. Just like other mobile applications, they have access to device features such as cameras and sensors. Since these applications are built using web technologies and not platform specific technologies, these are “Cross Platform” apps. Cross platform apps can be deployed to multiple platforms.

The main reason for people to opt for cross platform technologies is that instead of building multiple applications using disparate technologies and disparate teams, a single app can be built, leading to a more cost effective application with a smaller team and lesser dependencies, fewer bugs, ability to change more easily and ultimately giving the product a higher chance of success.

Cross platform apps can also be built using either web technologies or other technologies. In this blog we are going to focus on hybrid apps which are cross platform applications built using web technologies.

Types of hybrid applications

Hybrid apps can be broadly classified into two main types based on their underlying architecture.

Compiled Hybrid Apps

Example: React Native

In compiled hybrid apps, although the code is written using web technologies (such as JavaScript) part of it is compiled down to native code during the build process. This allows the app to use native components and APIs directly. React Native, for example, compiles all the rendered components (the view) down to their equivalent platform specific components. The business logic however, continues to be in JavaScript.In order to communicate between the view and the business logic, a bridge is used.

The components are native and therefore the rendering performance, interactivity and look and feel is exactly like that of an application that would be developed using native technologies.

Web-View Based Hybrid Apps

Example: Ionic with Capacitor / Cordova

In web-view based hybrid apps, the user interface is essentially a web view (a component that displays web content) that renders HTML, CSS, and JavaScript. The app’s core logic is written using web technologies. The web view is wrapped in a native container using a technology such as Cordova or Phonegap, allowing the app to access device features through plugins.

Since web-view based applications are pure web applications wrapped inside a native container, there interaction and performance is comparable to that of web applications. Access to device level features has to happen through plugins that are written using native technologies.

All capabilities can be built using either of the two choices above as well as native applications. The choice of technologies then generally boils down to a few factors such as Performance and Use Case, Time and cost of Development and Maintenance, Community and Support. Let’s dive further to explore these areas in more detail

Performance and Use Case

Performance is a critical factor and must be looked at seriously when evaluating technologies. A bad performing application can weight down heavily on a business. Having said that, it is a very broad area and not very well understood. It is often misinterpreted and too generalized. Let’s divide this into different areas to explore this parameter more objectively.

Native look and feel, animations and graphics

Since native as well as React Native type of applications use native components, there look and feel is expected to be native platform like and is expected to be high performance. However, Ionic and similar web-view based technologies have custom components built to look and feel exactly like their corresponding native counterparts. The components and animations are exactly as they would be on the corresponding native platforms and there is generally almost no noticeable difference to the human eye in terms of performance. Differences might arise when targeting use cases that require a lot of animations, such as gaming applications. A more detailed analysis of this is linked below in this blog from Ionic.

Execution of Business Logic

Since Javascript is used for both react native as well as Ionic, the performance is expected to be similar for both compiled as well as hybrid apps. An important factor to take note of is that business logic execution within a front end application is almost never a problem with the underlying technology since it is restricted to one user or business. It is generally a result of bad design or code. However, there are cases when an application needs to deal with extremely large amounts of data and heavy processing of such data. A closer look reveals that web-view based applications might be more efficient since they are able to use the Just In Time compiler that V8 uses to optimise run time performance as well as memory consumption. Regardless of whether we use native or JS based technologies, business logic is hardly ever a problem as long as it is written properly.

Smooth, Intuitive and Responsive

A lot of what makes an application pleasant to use has to do with the UX design as well as with minute details such as delegating rendering of components that do not need to be rendered immediately, optimistic updates, showing the right loading or progress indicators, applying caching and a lot of other things that truly make an application fast and responsive. Regardless of which technology is used, these techniques will need to be applied.

Other factors

Performance of an application depends not just on the animations and display, but also on the backend performance (dependencies on API’s), time taken to load resources such as images etc. Often times API’s (and consequentially database queries) as well as other network requests are far longer running operations and require optimisations regardless of the front end technology used. Since these factors are independent of the technologies used on the front end, the performance difference between front end technologies becomes even less relevant.

For a more detailed analysis of performance of hybrid apps and native apps, please take a look at this blog.

To summarise, for most practical purposes, the choice of technology in front end would not make any noticeable difference to the performance. However, there are exceptions where animations and rendering performance requirements are high and for those applications, choosing native or close to native technologies would be the best option.

Time and cost of Development

Time and cost of development and maintenance are critical factors to consider when planning to build a mobile application.

Developing applications using cross platform technologies such as flutter, react native or ionic means that the same code base can be used to build applications for multiple platforms. This has a few advantages as listed below.

  • Smaller Team Required

    A single team is required to build the application, rather than having dedicated teams for each platform. Apart from the obvious cost savings in hiring, this also reduces the overheads in cross team communications as well as costs associated with hiring.

  • More agile and a smaller maintenance effort required

    Applications keep evolving as businesses evolve and require continuous enhancements. A single code base and team would mean fewer bugs, more savings in the long run while being more agile.

If a cross platform is developed using web technologies, it can also have other potential benefits such as the following.

  • Web Development Skills

    Skills of existing web developers from other web development teams can be leveraged with a little extra effort to build mobile applications. It also makes it easier to hire people since there is a huge pool of people working on web technologies.

  • Rich Ecosystem

    A huge ecosystem of JS and CSS libraries provides a vast number of options for typical and atypical use cases, thereby saving a lot of time.

  • Over the air updates

    Over the air updates are possible with web technologies. This is great for quick bug fixes without having to wait for app store approval. For native technologies, this would require re-building the application and going through the app store approval process.

  • Unify backend and front end technologies and share code

    With NodeJS being a popular choice for backend development, specially API’s that are typically I/O heavy and not compute intensive, the same team can even work on backend technologies and can also share code by creating common libraries for complex business validation and computation logic that can be shared between front end and back end.

Hybrid application development results in a reduced time and cost of development and maintenance, which is very important if you need to be frugal and agile.

Community, Support and Comfort of existing teams

Community and Support

When developing modern day applications, we constantly require additional libraries and tools in order to be able to provide a rich functionality to users. For example in an enterprise app that requires support for analytics and reporting, charting libraries are essential. Web technologies and frameworks are huge and generally have very large communities and therefore a lot of options to build with. This also means more people to answer questions and a larger number of companies such as Ionic and Sencha that provide enterprise support.

Comfort of existing teams

If you already have a team that has an expertise in a certain area, it might be worth considering to stick to your existing tech stack since hiring a new team or training existing team members on new technologies has a cost too.

Conclusion

There are multiple ways to build mobile applications. While native applications promise a “native” look and feel, hybrid applications also offer a variety of tools and frameworks that have native look and feel as well as animations built in either by way of compiling down to the native elements or by way of doing this through web technologies such as CSS and Javascript. These hybrid applications provide a performance that is similar to that of native applications and it is very hard to notice any difference for majority of the cases.

Some popular examples of applications built using hybrid technologies are Microsoft Teams, Uber, X (formerly twitter), Discord and many other popular ones. This further goes on to cement the fact that applications built with web technologies can be equally well performing.

While picking your tech stack, consider all factors that matter since it is a long term commitment and could result in a lot of difference in terms of customer satisfaction, cost saving and maintenance.

All the best!