Comparing The Top Frameworks For Building Hybrid Mobile Apps

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

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

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

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

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

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

NativeScript

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

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!

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

15 Comments

  1. TJ VanToll says:

    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

    1. Danny Markov says:

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

  2. Enrique Martinez says:

    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

    1. Mike says:

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

  3. Fred says:

    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

  4. Nux says:

    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.

  5. Masa says:

    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

  6. EeKay says:

    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

  7. Marc Greiner says:

    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.

  8. Harold says:

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

  9. Momchil Gorchev says:

    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.

  10. Sergiu says:

    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/

  11. Mike says:

    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??

  12. Guillaume says:

    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

  13. Bruce says:

    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

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links