Best HTML5 Mobile App Frameworks: Supersonic

Written by on April 4, 2015

Best HTML5 Mobile App Frameworks: Supersonic

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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to Thanks and have a nice day!

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

Continue Reading


4 thoughts on “Best HTML5 Mobile App Frameworks: Supersonic”

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

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

Leave a Reply