Comparing The Top Frameworks For Building Hybrid Mobile Apps

Only a few years ago, developing mobile apps via JavaScript was nothing more then a quirky experiment. The idea that you could build iOS and Android apps, without having to operate with Java and Objective C, seemed appealing to many web devs. Now we have a plethora of frameworks bringing us closer than ever to creating a native mobile experience using only web technologies.

What are Hybrid Mobile Apps?

A hybrid app is just a regular mobile optimized website, written in CSS, HTML and JavaScript, that is displayed in a webview (this is a basically a stripped down web browser). The advantage is that you only need to write a single application, which in most cases runs unmodified on Android, iOS and Windows Phone. Most of the frameworks listed in this article do this using Cordova or PhoneGap, which give you a bridge to the device APIs in JavaScript.

In this article we're going to compare the most popular JavaScript frameworks for building hybrid and native mobile apps. Scroll to the bottom of the article to see the scores.

1. Ionic

Ionic is the most popular framework on our list and probably the first choice of many developers. You can use the CSS portion of the framework to create native looking designs, but to harness the full potential of Ionic, it's best to pair it with AngularJS. A big bonus you get with Ionic is the command-line interface which is full of awesome features including integrated emulators and a Cordova based app packager.

Pros:

• Works with predefined components
• Great community
• Command Line Interface with lots of useful features

Cons:

• You need to know AngularJS to do anything complex

2. Onsen UI

This is an open source framework that allows developers to build apps by combining native-looking components. It's fairly simple to use, can work with or without AngularJS, and has great documentation that includes lots of examples and layouts for the most common app structures. A disadvantage of Onsen UI is that it currently offers only an iOS theme, although the next version promises Material Design support.

Pros:

• Works with predefined components
• Excellent documentation with examples

Cons:

• PhoneGap/Cordova builder not included, but supported
• No support for Material Design (yet)

3. Framework 7

The cool thing about Framework 7 is that it is completely framework agnostic (doesn't have external dependencies like Angular or React) and still manages to make apps look and feel native, with properly styled components and animations. Anyone who understands HTML, CSS and JavaScript can create an app without making the code convoluted. Framework 7 doesn't include any tools for emulation or app packaging so you will need to combine it with Cordova or PhoneGap.

Pros:

• Simple to use, relies only on HTML, CSS and JavaScript
• Good performance
• Can be combined with any JavaScript framework of choice

Cons:

• PhoneGap/Cordova builder not included, but supported

4. React Native

As the name implies, React Native's purpose is to build proper native apps, instead of creating hybrid ones that run in a Webview. Development, however, is still done completely via JavaScript and React. This frameworks isn't tailored towards beginners in web development, but on the plus side, there is a huge community behind it that will help you in every part of the way. Recently the framework rolled support for Android, so you can have real cross-platform apps.

Pros:

• Native-like performance
• Huge community

Cons:

• Steep learning curve
• The development tools only work on OS X at the moment

5. jQuery Mobile

The grandpa of all mobile frameworks, jQuery Mobile doesn't try to make apps that look like Android or iOS. Instead, it's purpose is to help develop web apps that will work equally well on all mobile browsers (including oldies such as Windows Phone, Blackberry, and Symbian). As such, it is very lightweight, depends only on jQuery and is quite easy to learn, while still offering good touch recognition and PhoneGap/Cordova support.

Pros:

• Support for wide range of mobile browsers
• Simple to use

Cons:

• Dated styles that don't resemble either iOS or Android
• PhoneGap/Cordova builder not included, but supported

6. Native Script

Native script's biggest feature is that it allows you to write the functionality of your app in JavaScript once, which then will be transformed accordingly to Android, iOS and Windows Phone. Packaged, the compiled applications start in a native fashion, without opening and running in a browser. This frameworks does require some coding skills, but compensates for it with an extensive, in-depth documentation.

Pros:

• Write once, use everywhere approach.
• Great documentation

Cons:

• Steep learning curve
• Small community

7. Famous

Famous has a unique approach to web and mobile development. It combines the DOM tree (your HTML) with WebGL, displaying everything in a canvas, similar to what HTML game engines do. This novel technique allows the framework to run your apps in 60 fps, which is as smooth as most native apps. Sadly, this project is no longer being actively developed and doesn't have good docs for reference.

Pros:

• Native-like performance

Cons:

• No longer actively developed
• Documentation not full
• Small community

The Rundown

Conclusion

There is no best framework - all of them have their pros and cons and it's up to you to decide depending on what you plan on using them for.

We hope this quick comparison has been of great use to you! If you have experience with any of the listed frameworks or similar ones, please leave a comment and share your opinion on hybrid app development!