Super
sonic UI

The only hybrid-app first UI framework.

User interface

Supersonic-ui-native

It feels native because it is native


Getting a hybrid app to feel native has been near impossible. Solutions usually involve a combination of CSS tricks and JS hacks, with no guarantee of consistent performance across devices and platforms.

  <super-navigation-bar>
<title>Batcave Inventory</title>
<button onclick="addItem()">
Add
</button>
</super-navigation-bar>

Supersonic bridges the gap by using native UI elements when HTML and CSS just don't cut it. No more position: fixed; header bars, slow tabs or choppy animations. Page transitions, modals, navigation bars, tab bars, drawers – and a whole lot more – are fully native. That means unparalleled performance and no App Store rejections.



Supersonic-ui-components

Beautiful, declarative UI components


Yea, you want a unique look and feel for your app, that's cool. But often, when reality hits, you don't have time to spend on the visuals that make your code shine. And not all of us are blessed with the skills of a pro designer.

  <ul class="list">
    <li class="item">
      Batarang
    </li>
    <li class="item">
      Shark Repellent Spray
    </li>
  </ul>

Leveraging the awesome Ionic CSS framework, Supersonic UI has been crafted to display flawlessly on all mobile devices. It comes with all the popular components you'll need to craft beautiful apps.



Supersonic-ui-css

Style native elements directly from CSS


Sensible defaults are important, but we want you to have full control over how your app looks. This means styling the native UI elements, too.

  tab-bar {
border-top: 1px #D8D8D8 solid;
color: "#000000"
}

Supersonic integrates the brilliant Pixate Freestyle SDK, allowing you to style all native UI elements of your app with CSS (or SASS, if you're inclined). What's more, you can easily set different styles for iOS and Android, allowing you to get the perfect look-and-feel for both platforms.

native components & CSS working together

Architecture

Architecture Built to Handle Hybrids

Appgyver-single-page-app

SPA (Single Page App)


Single page apps (SPAs) are hard to manage. Difficulty in recreating error states makes bug hunting exceedingly hard. Ever-increasing DOM memory usage makes the apps slower and more sluggish the longer they run. While modern frameworks provide great helpers for routing and templates, re-rendering the whole page when the user navigates to a different view is still hacky and slow. This is especially true on mobile devices, where the whole UX paradigm is different from a browser app.

Appgyver-multi-page-app

MPA (Multi Page App)


That's why Supersonic introduces Multi-Page Apps, or MPAs for short.

With multi page apps (MPAs), all your views and controllers are neatly divided into separate HTML and JS documents. This allows for a clear, modular, MVC-based project file structure, superior memory management, easier bug reproduction, and much more. And if you're worried about things like global variables or AngularJS $scope, don't – we've got this figured out too.

Super-quote-author-hillarie-prestopine

Application developers can use Supersonic to create hybrid apps with native-like performance on Android.

Hillarie Prestopine

Director Software Experience Center / Intel

Icon-mvc

Modular, MVC-based project structure


When building any mobile app, a good structure is pivotal. Many of the existing frameworks are not really opionated enough on how you should structure your files, which can lead to messy projects.


app/
├── gadgets/
└── villains/
    ├── scripts/
    │   ├── indexController.js
    │   └── showController.js
    ├── views/
    │   ├── show.html
    │   └── index.html
    └── assets/
        ├── css/
        └── images/

The Supersonic project structure makes it simple to understand what goes where. In addition to common files like app-wide layouts, your app has modules that represent resources or concepts in your app (like "gadgets" or "villains" for a Batman app). Every module has a place for views, controllers and assets, with Supersonic Data providing the model part.

Supersonic controllers use AngularJS by default, but you can switch it out for any framework you love.

Icon-nav

Declarative Navigation


It makes a whole lot of sense to have your basic navigation logic in the view, not the controller. The increased prevalence of JavaScript functions over solid performers like the <a> tag have pushed navigation logic into the controller. We're bringing it back.

<super-navigate action="click"  location="villains#poison-ivy">
Poison Ivy
</super-navigate>

With Supersonic, all you need to write is the above, no JavaScript functions required, and you have a fully-functioning navigation link, complete with a native page transition. You don't even have to type out the full URL for the view – there's built-in routing support.

Naturally, all the navigation functions are available as programmatic API calls, and features like modals, persistent views, a native navigation stack, drawers, tabs and more make building complex apps a breeze.

Icon-communication

Cross-view communication


Regardless of the way your app is structured, its views should be able to talk to each other effortlessly. Supersonic allows you to reap all the benefits of the Multi-Page App architecture without compromises.


// View one
supersonic.data.channel('events')
  .publish('You would not believe what just happened!');

// View two
supersonic.data.channel('events')
  .subscribe( function(message, reply) {
    reply('Well, what happened?');
  });
          

Supersonic's powerful pub-sub-implementation makes cross-view communication simple. Only the views that are really interested get the message, allowing you to rapidly build complex logic for your app.

Icon-superscope

Keep AngularJS $scopes in sync


Keeping $scope variables in sync between your AngularJS controllers is as important in Supersonic's MPA world as it is in SPAs.


// View one controller JS
supersonic.bind($scope, flashMessage);
$scope.flashMessage = "An error occurred!";

// View two controller JS
supersonic.bind($scope, flashMessage);

// View two HMTL
<p>{{flashMessage}}</p>

After calling supersonic.bind with a $scope property, Supersonic ensures that changes to the bound variable in one AngularJS controller propagate to all other views in your app.

Start using Supersonic

Sign up for free to start building apps with Supersonic.
We've got great docs and guides to get you started.

Find out about Steroids Tooling

Steroids is our CLI tooling, and the best way to build, test and
distribute your Supersonic apps. And it's free.