5 Best Mobile Web App Frameworks: Ionic (AngularJS)


Ionic Framework

Ionic framework is the youngest in our top 5 stack, as the alpha was released in late November 2013. Built on top of the popular AngularJS framework from Google, Ionic utilizes AngularJS to provide the application structure, while Ionic itself focuses on the user interface. In other words, we see a match between the power of Angular and the beauty of Ionic UI.

Ionic provides a set of Angular directives (custom HTML elements) for it’s own components, making it as easy to use the widgets as writing a line of HTML code. In addition to directives, Ionic uses Angular’s touch recognizers, view animation logic, HTML sanitation, and asynchronous communication.

While you can use Ionic straight after cloning or unpacking the library zip, you can also install their Node.js-based CLI through NPM and start quickly with their seed project.

Even though Angular is currently the Ionic’s workhorse, the developers are keeping their (and ours) options open with plans to support other frameworks such as Knockout or EmberJS. This particular review is strongly influenced by AngularJS and it doesn’t vouch for the accuracy with other frameworks when Ionic support emerges.

MV* Pattern

Angular JS used to be an MVC framework, but over time it became closer to MVVM where the $scope object acts as a ViewModel, manipulated through a Controller function. With such a flexible approach developers can use MVC or MVVM per their liking, as long as the goal is achieved: separating presentation from business logic while boosting maintainability and productivity.

Class System

Neither Angular JS or Ionic are object oriented JavaScript frameworks so they don’t make use of a class system. This can (but shouldn’t) be observed as a weakness or a strength, depending on the level of simplicity requested on the JavaScript front end.

DOM control

Angular embeds jqLite, a fraction of jQuery that allows DOM manipulation in a cross-browser compatible manner, leaving a very small footprint. For extended functionality, jQuery can be loaded with the document.

UI and Theming

When it comes to UI, Ionic shows its potential. Ionic’s true beauty is its simplicity. In almost Google-like (but not Android-like) style it uses the existing HTML5 and CSS3 capabilities to deliver fast experiences. The speed is exactly in its simplicity – no unnecessary shadows, rounded corners, gradients but just flat, clean simple, powerful, unadulterated HTML5. Ionic doesn’t promise you native-looking UI, but it does deliver very fast and consistent interface, even on the devices you considered to be slow with rendering HTML5 apps.


Customizable through SASS, Ionic comes with handy variables and mixins to extend for customized appearance. Additionally, it’s packaged with its own open sourced icon library featuring over 440 icons to chose from.


Ionic’s components are powerfully simple. They are custom HTML elements, as per Angular directive principles, but Ionic also provides Controllers to complement configuration and interaction. While some frameworks may provide more complex widgets, Ionic offers somewhat simpler building blocks that can be combined to deliver rich user interfaces. As of alpha version, the framework provides with a plethora of form elements, header and footer bars, buttons, a simple list with customizable items, grid elements, and more.

Responsive Design (RWD)

Internally, Ionic leverages Responsive Web Design principles to yield optimized experience such as based on screen size or pixel density. Any app-specific RWD scenarios are welcome and will play very nicely with Ionic.

Desktop support

Meant for hybrid mobile applications (installable on a mobile device through an app store), Ionic is not meant to be be used for desktop web apps/sites. While the content will be displayed nicely, it will be optimized for its intended purpose. Those wishing to create apps that fit both environments can stay with Angular JS, but use Zurb Foundation, Twitter Bootstrap or similar UI library.

Third party plugins

No third party plugins or extensions are available at the moment.


Much of extensibility in Ionic will come either from (S)CSS or creating Angular directives and controllers. That makes extensibility an integral part of application development – unavoidable, but not demanding at all. Even the developers new at Ionic and Angular won’t struggle.

Building tools

Gulp is used for building Ionic making that #1 JavaScript building tool that much more attractive for your project’s purposes.

Packaging (native)

Ionic apps will require external tools for packaging purposes. It is tested to work with PhoneGap, Cordova, and Trigger.io.

Device API

Ionic does not support device APIs.


Ionic’s documentation is decently complete considering the alpha stage of the framework. Example rich, the docs show a preview of what most of components will do on a mobile device. And the preview is very attractive, too.

Angular’s documentation will satisfy beginner developers, but may soon become insufficient. As the appetites for information grow to expert levels, developers may be forced to resort to the source code or elsewhere.


Both Ionic and AngularJS are available under the MIT license.


Since it’s in a very early stage of life, Ionic still doesn’t have a mature community. However, given the same circumstance, its popularity is raising faster than for many other (and older) frameworks.

What would they say?

JavaScript developer:
A refreshing and straight forward way of building rich apps no matter the size. The MVC and MVVM patterns are done cum grano salis, as the old latin would say had they had the opportunity to work with Angular JS. Additionally, as views are defined using HTML and data models as simple as plain JavaScript objects, the developers will easily end up writing less code and use less of the expensive time to produce high quality apps.

Passionate designers will love Ionic as it allows them to customize the layout to their liking, without having to modify someone else’s complicated widgets and potentially break the app’s functionality. Customizing the UI may remind of working with Zurb Foundation or Twitter Bootstrap.

Product manager:
The initial barrier to get started with AngularJS is very low, without needing to know the entire framework in order to build an easy app. However, beginners faced with more advanced tasks in a complex application will face an increasingly steep learning curve. Also, Angular is built with testing in mind. Make use of it early in the game.

Keep in mind that Ionic is meant to be used for hybrid apps and not mobile websites.

Five Best Mobile Web App Frameworks

  • I like Ionic the best.

    • Hiber Tadeo Moreno Tovilla

      Yep you are right.

  • Pingback: 5 Best Mobile Web App Frameworks: jQuery Mobile + Backbone | Modus Create()

  • Andy Zhou

    I’ll try it

  • Juukie14

    I thought it uses Gulp instead of grunt

  • sixman9

    Hi, could you expand on your “Ionic does not support device APIs.” comment, as I’m led to believe otherwise?

    I’m new to Ionic myself, but one of the things that drew me is its direct integration with Cordova/PhoneGap and the level of device integration that affords a developer.

    Please take a look at Ionic’s own demo (Android) @ https://play.google.com/store/apps/details?id=com.ionicphonegap.demo which highlights device API interaction, such as Camera capture, etc.

  • Mangap
    • Marek

      A single look at their ugly website convinced me otherwise.

  • Zakir Hossain

    If your services or products already on the net, you must update your
    system up to the mobile access enable. It is so important to instant
    communicate as well as for instant advertising and marketing.

  • Nathanael Montgomery

    Wondering why AppGyver Steroids has been left out of this article? Seems to me it would be of interest to people looking at the top frameworks. It hits on all of your discussion points. On top of that, Steroids employs Angular and the ionic framework CSS library.

  • Hiber Tadeo Moreno Tovilla
  • its awesome for making a android app 🙂

  • A list of Java frameworks would be great, too! Start with Grails 🙂

  • ZAchary Initial Z

    None of them better than Adobe AIR + Apache Flex

  • kevinsproles

    Can you elaborate on why you said “Keep in mind that Ionic is meant to be used for hybrid apps and not mobile websites.”? Wouldn’t Ionic be good if you want a single codebase for the hybrid app (phone & tablet app in app store) plus a responsive website (phone, tablet, desktop)? Or are there things in the Ionic Framework that will be broken or poor outside the phonegap wrapper, or on desktop?

  • Vellanki Ganesh

    Good information thanks…

  • Macheyeki Isack

    where is appzillion in the rank?

  • what is prerequisites of ionic ?
    does it require php knowledge .?

    • nobo

      nope, js and angulalrjs

  • ∆ [c0d3r28] ∆

    Whats happening with the Advent of Angular 2.0, there will be many changes, and things like controllers, services, and $scope are tabled to be depreciated?

    • disqus_yrWsRcWlKX

      illuminato isconfirm

  • Paul Spieker

    I was reading this post when I was looking for a mobile app CSS framework to use with Ember JS. Since I didn’t find one, I adapted Framework7 to Ember. Maybe someone of you is interested.


  • Bin Sand


    This is really an informative blog for all the beginners as well as app developers & web developers.

    I am an iOS app developer, I have tried most of the mobile app development platforms. I have developed more than 50 apps till today with the help of Phonegap, Telerik, Configure.IT etc. They are running successfully on app store.

    As per my experience in this field, I recommend developers as well as beginners to use mobile app development platform like Configure.IT, because it provides automatic coding, app preview facility, direct API connect and a lot more features. These things save a lot more development time and provides fast and well designed app in much less time.

    Read more: http://www.configure.it/features/mobile-app-configuration/

    • Zoo Keeper

      Ionic is free, the stuff you mentioned is not, we would generally prefer to use open source than a paid service.

      • Rashid NK


      • Jacques Santos

        Ionic as I know is not free if you really want to develop application professionally. It’s free just if you are beginner and don’t need so much functionalities. http://ionicframework.com/pricing/index3.html

        • Zoo Keeper

          That’s actually not true you can build a complete professional app with the free version, I have done it. The pricing is just for extra features some of which any developer who knows what they’re doing can integrate themselves for free.

  • Hi,

    I really believe Ionic is the way to go when you start out and need a product fast. In a lot of cases Ionic will do the trick and is reliable enough to do 90% of what you need to do with a mobile app. I really believe in Ionic but I am always routing for native implementations when it comes to good UX design. Good article, though!

  • dawesi

    have to totally disagree. using best practice coding results in lighting fast transitions.

  • clopuphuro@thraml.com

    I am using Xposed Framework, its has many useful module. If you want to fully customize your android phone once try Xposed. Note that root access is required to install this framework.

  • Thank you for sharing your article. This is very informative article to mobile web apps frameworks.
    Keep it up.

Like What You See?

Got any questions?