What Is Hybrid Mobile App Development And Why It's So Important For Web Developers To Know About It ?

Screens are small, apps are big, and life as we know it is on its head again. In a world that's increasingly social and open, mobile apps play a vital role, and have changed the focus from what's on the Web, to the apps on our mobile device. Mobile apps are no longer an option, they're an imperative. You need a mobile app, but where do you start? There are many factors that play a part in your mobile strategy, such as your team’s development skills, required device functionality, the importance of security, offline capability, interoperability, etc., that must be taken into account. In the end, it’s not just a question of what your app will do, but how you’ll get it there.

Hybrid mobile apps are like any other apps you’ll find on your phone. They install on your device. You can find them in app stores. With them, you can play games, engage your friends through social media, take photos, track your health, and much more.

Like the websites on the internet, hybrid mobile apps are built with a combination of web technologies like HTML, CSS, and JavaScript. The key difference is that hybrid apps are hosted inside a native application that utilizes a mobile platform’s WebView. (You can think of the WebView as a chromeless browser window that’s typically configured to run fullscreen.) This enables them to access device capabilities such as the accelerometer, camera, contacts, and more. These are capabilities that are often restricted to access from inside mobile browsers. Furthermore, hybrid mobile apps can include native UI elements in situations where necessary.

It can be very difficult to tell how a mobile application is built. Hybrid mobile applications are no different. A well-written hybrid app shouldn’t look or behave any differently than its native equivalent. More importantly, users don’t care either way. They simply want an application that works well. Trying to figure out if a mobile application is hybrid or native is like trying to differentiate rare grape varieties of wine. Unless you’re a sommelier or someone who really cares about it, it’s not terribly important. What matters is that the wine tastes good. The same can be said for hybrid mobile applications; so long as the application does what it’s supposed to do, who really cares how it was built? This point is underscored through an experiment we conducted where we wanted to see if people could tell the difference between a native application and a hybrid application:

So why hybrid web app ? Here are top reasons why:

1: Reduced cost of development across multiple platform

When developed across multiple platforms (iOS, Android, etc.), the same HTML components can be used for different mobile OS. This significantly reduces development costs and effort.

2: Retaining full use of device features while making maintenance easier

Unlike a pure web app, a hybrid app can fully utilize all the features available in the smart device. But while a purely native app can also use all of the features of the device, maintaining it is complicated for both users and developers. Updates have to be rolled out in the form of a new version, which requires users to upload. A hybrid App bypasses that, as maintaining the content is as simple as updating a webpage, and can be done when needed.

3: Combines the best of both worlds

When connected to the web, the hybrid app offers its full variety of features and content, but when offline, it still retains much of its advanced offline capabilities. It has increased visibility because the app can be distributed via app stores or via search engines.

How are hybrid mobile apps built?

Hybrid mobile applications are built in a similar manner as websites. Both use a combination of technologies like HTML, CSS, and JavaScript. However, instead of targeting a mobile browser, hybrid applications target a WebView hosted inside a native container. This enables them to do things like access hardware capabilities of the mobile device.

Today, most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of JavaScript APIs to access device capabilities through plug-ins, which are built with native code. As a side note, Apache Cordova originally started as a project named PhoneGap. These days, PhoneGap exists as a distribution of Apache Cordova that includes additional tools. 

These plug-ins include APIs for accessing the device’s accelerometer, contacts, camera, and more. There is also a number of plug-ins that are built and maintained by the developer community at-large. These can be found in the Apache Cordova Plugins Registry

Application assets like HTML, CSS, JavaScript are packaged through the tooling made available through Apache Cordova to target platform SDKs. Once built, you have an application that can run like any other kind of application on the device. The tooling provided by Apache Cordova is largely driven through a command line interface.

What are the motivations to go hybrid?

Hybrid mobile applications provide a way for developers to re-use their existing skills in web development. Developers don’t like the prospect of getting locked into proprietary platforms. This includes the programming languages and SDKs provided by platform vendors .

Hybrid mobile application development looks appealing to an organization’s bottom line. Why hire a developer for each platform when you can hire one developer and target all of them through HTML, CSS, and JavaScript? Well, the reality is a bit more complicated.

Yes, it’s true that hybrid mobile application development enables developers to target more than one platform. However, each platform comes with a set of caveats when it comes to its web runtime or WebView. This is especially true with Android, which is inconsistent between OS versions.

Moreover, there might be unique capabilities of platforms to which a developer may wish to target. In those instances, a combination of plugins and platform-specific code must be utilized in order to take advantages of those capabilities. Alternatively, developers can take advantage of 3rd party web runtimes like Crosswalk that can be embedded in your hybrid app.

It should be noted that Android 5.0 introduced updatable WebViews via the Android System WebView. 

When should you build a hybrid mobile app?

Before committing to a platform strategy, it’s important to evaluate the technical and non-technical merits of hybrid versus alternatives like web and native – especially as it relates to your mobile application’s requirements. For example:

• Which mobile platforms do you wish to target?
• Do you want to distribute your application via app stores?
• Are you looking to utilize the capabilities of the mobile device?
• What are the technical abilities of your development team?
• Does the one-size-fit-all approach of hybrid really live up to its promise?

These and other questions are worth asking before embarking upon development of a mobile application. To elaborate on this, let’s examine a few of these questions in more detail.

Which Mobile Platforms Do You Wish To Target?

If you wish to target more than one platform, you have a number of choices. Clearly, the web offers a highly attractive solution for this requirement. Your target is the mobile browser. Hybrid lends itself well to this approach as well because of its reliance upon the WebView.

Native – on the other hand – finds itself in a unique space. If you are reliant upon the vendor SDKs and platform-specific programming languages then you are essentially coupled to the platform. In the case of iOS, it’s Objective-C or Swift; for Android, it’s Java; and for Windows Phone, it’s C#. It should be noted that native deliverables can built using cross-platform technologies like Xamarin, React Native, and NativeScript.

Do you want to distribute your application via app stores?

If you want to distribute your application via an app store, you must build a hybrid or native application. You cannot distribute websites through app stores; that’s what your browser’s address bar is for! Despite this restriction, whether you build a hybrid or native application, it’s highly recommended that you have a website available for your mobile application. This will be the first place your users will expect to go if/when they encounter problems.

Are you looking to utilize the capabilities of the mobile device?

Websites have a restricted set of abilities as opposed to hybrid and native applications. These restrictions are enforced by browser, effectively sandboxing it away from the mobile operating system. Recent developments with mobile browsers have exposed more device capabilities through HTML5 such as the camera, geolocation, and others.

Despite these advancements, support for advanced functionality is quite limited. For example, media capture and streaming remains unsupported in various mobile browsers. Because limitations like this remain in mobile browsers, many developers are compelled to evaluate hybrid and native as alteratives. Both offer the ability for developers to access device APIs – in the case of hybrid, this ability is supported through plug-ins.

It’s often asserted that native is best suited for applications where graphics performance is paramount. Mobile games are a class of mobile application almost entirely reliant upon complex visual interactions on the screen. Even if a game operates flawlessly from a functional perspective, you should expect it to have a very low app store rating if it feels slugglish. For that reason, developers have long-argued against using hybrid as an approach to build games.

That stated, a number of solutions for hybrid mobile applications exist. These include HTML5 Canvas and WebGL, both of which are well-suited for building applications like games. Furthermore, technologies like these are more approachable for developers through libraries like Paper.js,EaselJS, and others. And it’s not just for game development. For developers building more traditional, line-of-business applications, there are frameworks like Famo.us and Kendo UI.

What are the technical abilities of your development team?

Another factor to consider when evaluating your development options for mobile is your team’s technical abilities. If you decide to build a native application, you will require developers who are experienced with the platform SDKs and programming languages of every platform you wish to target. On the other hand, web and hybrid applications are built using web technologies like HTML, CSS, and JavaScript. You can have a team that can target multiple platforms with a single set of technologies. This is something worth considering when evaluating your opinions.

Does the one-size-fit-all approach of hybrid really live up to its promise?

Finally, it’s important to recognize that hybrid isn’t the be-all and end-all approach for mobile application development. Earlier in this article, I cited the challenge of overcoming the inconsistencies between WebViews. Other challenges remain. In fact, with hybrid, you can find yourself targeting the features of a mobile platform only to discover that they’re inaccessible because the plug-ins for them are out-of-date, unreliable, or (even worse) missing altogether. In this scenario, you are faced with the dilemma of either removing an application feature or writing the plug-in yourself.

This scenario is more pronounced when new versions of a mobile platform are introduced. If you wish to leverage these new capabilities, you either have to wait for someone in the community to write the plug-in or develop the plug-in yourself. My advice is to know what plug-ins are available and reliable before proceeding with development.

 

Who is building hybrid apps?

There are a number of well-known hybrid mobile applications available in app stores. Some of my favorites include Basecamp, Instagram, Yelp,Untappd, and SydJS. If you’re looking for more examples, you can check out the showcases for PhoneGap, Ionic, Telerik Platform, and AppGyver. They list applications that cover a wide range of categories, including line-of-business applications, games, and more.

Hybrid Mobile App Development Frameworks

If you’re curious to learn more about hybrid application development, I would encourage you to check out Apache Cordova, build a prototype, and evaluate the results for yourself. There are many framework out there to develop Hybrid mobile Applications , best of them are below: 

Ionic

Over the last couple of years, ionic has established itself as leader in the hybrid mobile apps development space. Ionic team keeps the framework updated by adapting to the latest trends, ahead of the competitors. Its closest competitors sell commercially while Ionic is free to use and open source, moreover, its ecosystem has grown so huge that you can easily find tons of development resources from the community to get started within no time.

Recently, ionic folks upgraded the framework by adding out of the box support for material design. Under the hood, ionic is wrapping Angular framework and that is what gives this framework most of the hidden superpowers. Like most of the other hybrid app frameworks, Ionic also utilizes Cordova to go native for iOS, Android, windows phone and other platforms.

Ionic framework is maintainable and scalable, uses clean and easy to read markup, comes packed with highly mobile-optimized library of CSS (Powered by Sass), HTML and js components. It also features tools and gestures to ensure interactive apps development with ease. 

You can read more about Ionic at - ionicframework.

Meteor

Meteor gives you a radically simpler way to build realtime mobile and web apps, entirely in JavaScript from one code base.

It's superfast and pretty much stable as it's build upon top of node.js environment.

Meteor is radically ambitious: By default, every page it serves is actually a Handlebars template that's kept in sync with the server. Try the Leaderboard example: You create a template that simply says "List the names and scores," and every time any client changes a name or score, the page updates with the new data—not just for that client, but for everyone viewing the page.If you love playing with new technologies, give Meteor a spin.

 You can read more about Meteor at - Meteor site.

Mobile Angular UI

Mobile Angular UI is an HTML 5 framework which uses bootstrap 3 and AngularJS to create interactive mobile apps.

The main features of Mobile AngularUI include:

• Bootstrap 3
• AngularJS
• Bootstrap 3 mobile components such as switches, overlays and sidebars which are missing in normal bootstrap.
• AngularJS modules such as angular-route, angular-touch and angular-animate

Responsive media queries are stripped out of bootstrap as separate files, you only need to include what you need. Mobile Angular UI doesn’t have any jQuery dependencies, all you need are some AngularJS directives to create awesome mobile user experiences.

Onsen UI

Onsen UI is relatively new but giving a tough competition to Ionic. It is open source and available under Apache license. Onsen UI also utilizes Angular directives and Topcoat framework for most of its UI components.

For jQuery fans, it comes packed with jQuery based components. One can choose not to use Angular in favor of jquery to build hybrid apps. Onsen UI features a large collection of ready to use components, responsive out of the box that allows you to build mobile, tablet as well as desktop versions of your apps, Allows you to write apps in HTML5 and JavaScript and push through Phonegap & Cordova to go native.

I am personally very impressed with the ease of use, flexibility, semantic markup and performance that Onsen UI brings on table. Onsen UI like Ionic is open source and free to use, read more about Onsen UI at - onsen.io.

Intel XDK

Intel XDK is a cross platform application tool developed by Intel. Getting started with Intel XDK is easy, all you need is to download their application which is free and available for Linux, Windows and Mac. It provides a number of templates to get started and supports a number of UI frameworks such as Twitter bootstrap, jQuery Mobile and Topcoat.

Intel XDK provides a live preview on the connected device whilst you are developing along side many other useful tools.

On a personal note, I think development using Intel XDK was the easiest. It uses a drag and drop approach, although it does create a lot of unnecessary code.

Read more about Intel XDK at - intel-xdk.

Sencha Touch

Sencha Touch is an enterprise grade product for building cross platform end to end mobile web apps with HTML5 and JavaScript. You can call it as the big daddy of mobile application development platforms in the commercial space, mostly enterprises. Sencha has a wide range of products that work hand to hand with Sencha Touch, most of these products carry heavy price tag.

For individual developers and freelances, ionic would make a better choice but for Enterprises, Sencha Touch easily leads the way.

ExtJS, one of the most popular JavaScript frameworks is at the core of Sencha touch platform which helps create high performance apps with near native experience. Sencha Touch packs ready to use widgets with native look and feel for all leading platforms including iOS, android, Windows Phone and Blackberry. Sencha also features a drag and drop HTML5 visual application builder with tons of ready to use templates. Custom components can also be built and added to the library for reuse across apps.

You can read more about Sencha Touch at its official website - Sencha overview.

 

Kendo UI

Telerik’s Kendo UI is an HTML 5 framework for creating cross platform mobile applications. Kendo UI relies heavily on jQuery and has a number of jQuery based widgets.

Learning Kendo UI is not difficult, developers familiar with jQuery will find Kendo UI easy to learn. Kendo UI has open sourced most of Kendo UI’s toolset and JavaScript framework features. However most of the commonly used widgets are still under a commercial license.

To get started developing with Kendo UI, refer to the official documentation. They also have a number of video tutorials to help learn the framework.

Famo.us

Famo.us is another powerhouse html5 apps development framework and targets to provide near native experience in hybrid apps. The main difference between famo.us and other hybrid html5 frameworks is that it focuses more on graphics rendering, 2d and 3d and hence is more suitable for games development.

Read more about Famo.us at official website - famous.org.

 

JQuery Mobile

jQuery suite is still in the game and holding the ground tight against the feature rich hybrid mobile app development frameworks like Ionic, Onsen UI and Framework 7. The die-hard jQuey fans community has built this minimalist jQuery Mobile package on top of solid jQueyr and jQuery UI foundation.

The focus of jQuery mobile is to empower developers to build web apps and mobile apps that run seamlessly and with unique user experience across mobiles, tablets and desktops. It doesn't focus much on providing native look and feel to apps for individual platforms like iOS or Android.

You can read more on jQuery Mobile at - jquerymobile.com.

Hybrid mobile app development is evolving day by day and there are always new options emerging, it's changing very rapidly with developers moving from native to HTML5 based hybrid app development options. The biggest advantage of hybrid mobile apps is “write once and run everywhere” approach.

Hybrid app development using javaScript "however" is not the only alternative to native mobile app development. There are other platforms also like Xamarin from Microsoft that let you write your application in c# and the compliers compile the application to native code of various mobile platforms including iOS, Android and windows.

While frameworks like Xamarin match native performance but none of these in my opinion beats the ease of building mobile apps with JavaScript, css and html – the hybrid way. 

Love the post? Hate the post? Do you know about other Hybrid App development frameworks that you would like to tell us ? Please Leave a comment below!

Thanks for reading! 

About the Author

Sandip is an Individual IT consultant / Sr. Web Application developer / JavaScript Architect , worked as a development team member, helped in development and in making IT decision for Multiple International IT firms and Tech-entrepreneurs  . 

More on Sandip here at LinkedIn