What is a Hybrid Mobile App?
- Opinion by
John Bristowe - March 25, 2015
- 29 Comments
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, as evidenced by Basecamp’s approach towards hybrid mobile app development.
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:
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. For more context about this history, check outPhoneGap, Cordova, and what’s in a name?
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. A curated subset of these plug-ins that have been throughly tested, documented, and extended can also be found at the Telerik Verified Plugins Marketplace.
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. That stated, developers can still leverage IDEs like Visual Studio and solutions like the Telerik Platform to further enhance productivity.
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 (more on this later).
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. Check out What Android 5.0’s Auto-Updating WebView Means for Mobile Apps for more information about this recent change and the impact it will have for hybrid mobile development.
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#.
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.
If you find yourself developing an app that needs numerous native features, or an app where performance is critical to the success of the app, you may find the hybrid development model limiting. In this situation normally you would be forced to go all in with native development technologies, however, nowadays there are alternative approaches that let you build performant native apps without learning the ins and outs of tools like Xcode and Android Studio.
The JavaScript-based NativeScript framework, for instance, allows you to build iOS and Android apps that forego the WebView for enhanced performance. NativeScript also provides 100% access to iOS and Android APIs, removing the reliance on plugins that can prove limiting when developing hybrid apps. That being said, NativeScript is also not the be-all end-all approach for developing native apps. Although NativeScript’s approach to app development is more powerful, that power comes with a higher learning curve, as with NativeScript you’re no longer using HTML to build your user interfaces. Nevertheless, NativeScript is a serious option to consider if you’re building an app with non-trivial performance requirements.
If you’d like to give NativeScript a shot, start with one of the framework’s getting started tutorials.
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.
Start Your Journey with Telerik AppBuilder
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. I would also recommend checking outTelerik AppBuilder. It offers solutions to many challenges that crop up in the world of mobile application development. It’s an environment that can integrate with many popular IDEs like Visual Studio and Sublime Text, and it has a number of project templates to get you up & running quickly.
The thing to remember about hybrid mobile application development is that it’s not a single approach; rather, it’s a spectrum of options ranging between web and native. Determining if it’s the right choice for you requires evaluating the options presented in this article.
Header image courtesy of Luke Wroblewski
John BristoweJohn Bristowe (@JohnBristowe) is a Principal Developer Advocate with Telerik and lives in Australia. Prior to joining Telerik, he was a Senior Developer Evangelist with Microsoft.
COMMENTS
Commentaires
Enregistrer un commentaire