Welcome to my blog, if there’s something I didn’t cover feel free to leave me a comment below and I will respond as soon as humanly possible. Topic of today’s article is an in-depth review of AppGyver Supersonic framework.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.

Link Getting Started GitHub Repo


This is Part 7 in a multipart series called: “Best HTML5 Mobile App Frameworks”
Note: I have no intention of stopping writing after I review Supersonic. If you want me to review a framework you like or know about just write me a comment below.

What Is Supersonic?

Appgyver developers are calling this framework a game-changer. It’s an Ionic framework fork that tries to change the way you’re thinking about hybrid app performance. Supersonic’s declarative UI style makes building complex mobile apps an easy task. What’s more interesting, the seamless interplay of native UI and HTML5 results in almost native-like app look and feel.
One of the greatest framework features is a Supersonic Data feature which provides you with a simple JavaScript syntax to interact with any data set in your backend. It’s a complete framework with a wizard for integrating any REST API, a data browser to view and modify your backend data and CRUD scaffold generator to get you going. If you are willing to subscribe, you will also receive a free development database to go with your app. Supersonic Data has been designed to work seamlessly with AngularJS.
Another great thing, you don’t need to use Cordova/Phonegap anymore. Instead, Supersonic gives you a slick set of APIs for interacting with the native capabilities of your mobile device. You can still use core Cordova APIs in combination with AngularJS directives. Access features like Facebook login and push notifications via AppGyver-maintained plugins – the whole native side is at your fingertips. Wrapping service is not limited to Supersonic, Ionic framework, Famo.us, and OnsenUI will work just as well.
Supersonic provides you with a great selection of CSS components (everything available to Ionic framework is also available here), though few components (Slide Menu, Tab Bar, Navigation Bar) are also available in native form. You can still style native components with CSS, and some of them are even available as special HTML elements.

What Supersonic is not?

Supersonic suffers from the same problem like jQuery Mobile and Ionic framework. If you’re not willing to heavily modify application UI, the final product will look like a clone of every other non-modified Ionic framework application..
If you like HTML5 markup based frameworks then this is not a framework for you.
Another big problem is black-boxing. Supersonic is useful only if used with Appgyver cloud services. You cannot build your apps outside of the cloud. Are you really ready to send your code to 3rd party company (service)? Many developers would shriek at the thought of that. It screams a security risk.
At the same time, you are locked with Appgyver services. What will happen if they update their user policies, or if they include paying services?
Note: Appgyver will soon provide a local build support. We should also be rest assured that they won't do anything crazy with your code in our cloud build service.
Supersonic is not a day by day fork of Ionic Framework though they’re catching pretty fast.

Main features

  • Free (Open Source)
  • Simple to Use
  • One of the fastest mobile frameworks; framework uses Web Components that map your HTML to fully native interfaces
  • iOS and Android support
  • Built around AngularJS and Ionic framework UI fork.
  • Theme Roller available through Ionic framework
  • Appgyver application wrapper (if I understood we’re offered with PhoneGap Build for free)
  • ngCordova is supported
  • Usable for mobile only development
  • Integrated Crosswalk support
  • Support for different backend databases
  • Native animations
  • Great CLI support (Open Source)


This part is problematic. Supersonic heavily depends on its backend services so I can show you only UI, which is build around Ionic UI. Because Supersonic applications are not meant to be executed in desktop browsers I will show you an Ionic Framework example; you will at lease be able to see how it looks like.
Don’t bother looking at JavaScript part, Supersonic uses a different logic of page/view handling. I’ll talk about it later.

Working Example

Embede working example:
Ionic Master Detail Pattern

UI and visual impression

I already told you that Supersonic is built around Ionic framework UI. Ionic UI can stand on its own, but nothing prevents you from doing some enhancements of yours own. Even better, CSS customization is recommended if you don’t want for you application to look distinctively “iOS 7” like (which is Ionic UI default look and feel ). For even more power and flexibility, the core is written with SASS and includes easily customized variables and mixins. The CSS is stand-alone, making it independent of Angular.
While Ionic’s appearance is very “iOS 7”, it purpose was not to be a “pixel-perfect” replication of it, idea was not to have an application that looks like everyone else (which is probably jQuery Mobile biggest problem, I’m mentioning it because it is still mostly used mobile framework). UI is flat, without unnecessary shadows, rounded corners, or gradients. It is clean, simple and extremely fast. All animations are fully native driven, making them way better than current vanilla Ionic framework can support.
Look at this example: Navbar after fix
All images © 2015 www.appgyver.com
Continue Reading

  • Igor

    Thank you for all your reviews.
    Very interested to read your opinion on Framework 7: http://www.idangero.us/framework7/

    • I'm just reviewing and writing an article about F7.

      It will be published by the end of this week. I will also update this article with F7 and supersonic while at the same time removing Titanium.

  • Thank you for all your reviews.
    I am very interested to read your opinion on Framework 7: http://www.idangero.us/framework7/ – have you tried it?

    Also why do you think most html5 hybrid frameworks are integrated with Angular? I personally dislike Angular, and prefer more frameworks like Backbone. So far I only found one html5 mobile framework that is based of Backbone – Junior framework: http://justspamjustin.github.io/junior/#

    • It all comes to marketing.

      If you're working on something (in our case it's a mobile framework) you will want to have as much exposure as humanly possible in a shortest amount of time.

      In this case, it was done using AngularJS. I'm not saying it's better than Backbone, it simply has a much bigger developer community, and numbers are only the thing that counts here.

      Let's look at it from the perspective of jQuery. jQuery was not the best DOM manipulation framework of its time, but they first reached a success tipping point, everything else is history. Same thing happened to jQuery Mobile. It's a bad framework (or it used to be) but it still managed to crush its competition. It used to be mobile framework of choice, it doesn't matter it sucked.

      Same thing translates to AngularJS. It's not that good (AngularJS 2 will probably change that) but it attracted a huge following. Basically, it became a new jQuery.