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.jpg
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

onsen_ui.jpg
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

framework_7.jpg
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

react_native.jpg
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

jquery_mobile.jpg
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.jpg
NativeScript

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.jpg
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!

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

TJ VanToll

Hi Danny,

I'm TJ VanToll from the NativeScript team. Thanks for including NativeScript in this article; we really appreciate it. I just have one small nit: NativeScript actually doesn't have any dependency on TypeScript. You can write your code in TypeScript if you're a fan, but if you're not, you can write your code in plain old JavaScript. Our getting started guide uses straight up JavaScript to teach NativeScript for instance: http://docs.nativescript.org/getting-started.

Thanks again,
TJ

Danny Markov

Thank you TJ, we've corrected the article. NativeScript is great and we're looking forward to seeing more from the framework.

Enrique Martinez

Hi Danny,

Thanks for this great article!! Will definitely checkout NativeScript, it looks really interesting. Just one detail, being a Windows phone user myself I know its not as popular as iOS or Android but later this year Windows Mobile 10 will be launched, the next version of Windows Phone 8.1. I wouldnt call it on oldie :), but again thanks for this great article.

Enrique

Native Script site http://docs.nativescript.org/getting-started does not mention Windows:, they say it is "a cross-platform JavaScript framework for building native mobile apps, to build an iOS and Android app".

Great review, thanks. I would have loved to see some indication on how easy (or not) it is to add native features that are not supported from the get go in the frameworks, like creating plugins, and what kind on interfacing with the native platform is needed.

Cheers,

Fred

Interesting that you've said jQuery Mobile is very lightweight (and it is), but you didn't include this in "Pros".

Another thing strikes me that you say including tools in a framework is so important. Included tools can be nice, but there are free and generic tools that you can use for any project (e.g. Cordova).

Ionic includes tools only because it has to. It doesn't really use HTML and as such cannot be run directly in a browser. I see this is a drawback of Ionic rather then an advantage.

Hi Danny,

I'm from Monaca team, and thanks for including Onsen UI and Monaca.

Your description is very accurate. Indeed we will release Onsen UI 2.0, which includes Material design support and removing AngularJS dependencies very soon.

One small detail, Monaca also offers CLI and desktop app called Localkit, along with Visual Studio extension. Those might be a bit hard to find, and we will improve our Website to let them know more easier.

As you mentioned, Onsen UI need to work on more in the community development, and we'll do it. Please stay tuned!

Best,

Masa

Hey guys,

Neat comparison, but how about AppGuyver Steroids? It's a setup similar to Ionicframework toolwise, but they use native animations and native side integrations somewhat more extensively. That's a different angle than Ionic is taking since they promote web tech more as a first citizen under the hood :)

I'm into Ionic myself right now but just wanted to add this option to the comparison. Cheers

Marc Greiner

Hi Danny,

We use DevExtreme by DevExpress:

http://js.devexpress.com/MobileDevelopment/NativeUX/

It has all the expected controls, with native look and feel for Android, iOS, etc. and top notch support.

Exactly what i'm looking for! Thx!
But what about Meteor? Can i have your opinion on it?

Momchil Gorchev

Hi, great article, but i can see one big player missing, that is MeteorJS, which opposed to Famouse is a full-stack JS platform able to "compile" your webapp into native iOS or Android app using Cordova under the hood.

Hi Danny,
You can also add KendoUI mobile framework
http://demos.telerik.com/kendo-ui/m/index
and Sencha Touch
https://www.sencha.com/products/touch/

Dear Danny,

First of all, thank you for the interesting and useful article.
Second of all, Native Script site http://docs.nativescript.org/getting-started does not mention Windows, hey say it is "a cross-platform JavaScript framework for building native mobile apps, to build an iOS and Android app". Does this mean NativeScript is not of any good for a Windows Phone developer??

Guillaume

Hi,

There is a new framework that may interest you : Cobalt ? (cobaltians.org)
It's an hybrid framework that is not based on Cordova (we believe we can do lighter) and that provide a real native navigation between web pages. no more laggy transitions ! We provide native navigation bars and action bars too and allow the teams that have native and web developers to work together and build more advanced hybrid apps. You should check it out :)

Cheers,
Guillaume

The list does not even have ext.js mobile now called sencha touch framework? if react is on the list, that one will definite be included as well