AppGyver has announced Supersonic, a new framework to build hybrid mobile apps on Android and iOS that promises to provide "real native performance," says AppGyver, thanks to a novel approach to designing hybrid apps. Supersonic is also integrated with Steroids, an impressive cross-platform IDE for hybrid apps.
Supersonic is built on top of Ionic's CSS framework and Cordova, but it takes a novel approach to mixing HTML5 and native code, which is called multi-page app architecture. This has several benefits both on UI performance and on page complexity, AppGyver says, and it brings a significant performance advantage over competing solutions.
Supersonic takes its own approach also regarding the use of native UI elements versus HTML/CSS elements, so page transitions, modals, navigation bars, tab bars, drawers, and other UI elements are fully native, guaranteeing a native user experience and performance.
InfoQ has talked to Harri Sarsa, head of developer relations at AppGyver, to learn more about Supersonic.
Could you describe Supersonic internal architecture in more detail?
On the native level, we have the AppGyver Wrapper, which is our own native runtime–the Objective-C or Java code responsible for making it possible to have an actual app binary around your HTML5 content. It includes a slightly tuned Cordova and is fully compatible with Cordova plugins. It also has a host of improvements not found in any other wrapper–mainly APIs to do with the native UI and navigation, but also things like serving your files via an internal localhost server instead of the File protocol.
On top of the wrapper, we have the Supersonic framework. It includes great CSS defaults from our Ionic fork, but more importantly, a JavaScript API and project structure that let you access a host of native-level enhancements. All Cordova core APIs are accessible, along with—and this is unique to Supersonic—native UI components. For example, instead of using a "position: absolute" div as the header, we use a native navigation bar, meaning it's always in the correct place. We use HTML5 Web Components to enable declarative native UI elements. For example, theelement is included as a web component that displays the native navigation bar when it is present on a page.
Other than that, Supersonic is framework-agnostic, so you can use any framework you prefer. We really like AngularJS though, so there's a bunch of Angular-specific examples and directives included.
On top of all this is Supersonic Data, which allows for "three-way data binding"–making your data stay in sync in the view, in the controller and on your backend server. Supersonic Data works with any REST backend, and we provide a free development database to get you started quick.
What are the advantages of Supersonic multi-page architecture?
The way mobile apps are structured is fundamentally different from modern web apps. Instead of the complex, ever-changing UIs of modern web SPAs (like gmail), for most mobile apps you really only have one view on screen at a time. You then navigate between these views–e.g. from index view to show view. In a fully native app, you construct a sort of "storyboard" of your app, and the native navigation stack takes care of moving to a new view, handling navigation history, sharing data between views, maintaining state in views not visible on the screen etc.
Since all other hybrid wrappers are stuck with presenting a single WebView, frameworks like Ionic have no choice but to take an SPA approach: you only have one app.html file, and AngularJS or some other routing solution takes care of manipulating that file's DOM to create page transitions, render the new content, maintain history etc.
With Supersonic, we split the app up into multiple HMTL documents and leverage the highly performant native navigation instead. Thus, when you navigate to show view from your index view, no DOM is being redrawn. Instead, you have e.g. a cars/index.html file that contains the HTML just for your index view – a list of cars. When you click on a car in the list, the index view's JS controller pushes an altogether different WebView–rendering cars/show.html–to the native navigation stack, animating the new view on screen with a native-smooth transition. This means that the original index.html lives on beneath the show.html, allowing for superior maintaining of state. The native back button takes you right back.
The same paradigm applies to our drawer/side menu and tabs–since no heavy DOM redrawing is taking place, e.g., switching between tabs is instantaneous: it's powered by the phone's GPU and UI engine, not the WebKit implementation.
Could you briefly describe Supersonic tooling?
The tooling is called Steroids. Basically, you have a Node.js-based CLI that you can use to create a new Supersonic project, generate code scaffolds, open web inspectors for debugging, launch emulators for iOS and Android, manage dependencies via Bower and npm, view logs from devices and more. The CLI works on OS X, Windows and Linux.
At the core of the workflow is the Scanner companion app that's downloadable from the App Store or Google Play. It works with the Steroids Development Server that you can start from the CLI. You connect the Scanner to your computer by scanning a QR code. The Scanner downloads the HTML5 content and configuration for your app and displays it on the device, allowing you to develop your app without the need to ever open Xcode or Android Studio. (That means iOS development on Windows/Linux!) The Scanner app includes all the native code in the AppGyver Wrapper, so your app will look and behave just as it would as a stand-alone, compiled app.
After developing locally, you can then deploy your app to the cloud, giving you access to our Build Service. The Build Service builds a stand-alone binary of the app for you, allowing you to submit it to app stores.
Where is Supersonic headed?
Some upcoming things include local builds with Xcode or Android Studio for rapid plugin development, more features in Supersonic Data like drop-in login views, examples for using the Steroids tooling with other frameworks plus new features like integrated push notification support.
On the long run, we want to make Supersonic the best hybrid app framework out there, with cross-platform apps that are indistinguishable from native apps, along with deep and powerful data integrations. We believe the unique combination of native + HTML5 is the way to get there.
To learn more about Supersonic, AppGyver provides a series of videos about user interface, data binding, and tooling, as well as extensive documentation.