
Supersonic: New UI Hybrid Framework – Ionic, AngularJS, Cordova - redindian75
http://www.appgyver.com/supersonic
======
887
Is it just me or did anyone else stop immediatly at this sentence on the get
started page? "Create a free AppGyver account"

Ionic didn't need me to create an account and everything you list in this news
title i can use without an account. Ionic also begins their getting started
with "Install Ionic" so the fork part was even more misleading. I immediately
got disapointed.

I don't know but every time i run into an "accountwall" within the first 10
seconds i immediately turn away and loose all interest.

I also wouldn't call something where i need to give any information to
evaluate it "free".

~~~
mattipaksula
Just give us a fake email then until you trust us :) We're hackers ourselves:
I never give out my real email until I know something is good. We just want to
get to know our users + get you started right away with everything we have to
offer that requires an account, like cloud distribution with QR codes (see
that in action here (no account needed):
[http://www.appgyver.com/supersonic/kitchensink](http://www.appgyver.com/supersonic/kitchensink))

\- Matti, CTO of AppGyver

~~~
joeyspn
Hey Matti, great job. Marry Supersonic to Strongloop's Loopback and you're the
winner...

------
NicoJuicy
This is a coincidence, just yesterday i checked out Cordova, Ionic (on todo
list, but the demo's on the APK's seem to slow :s), Supersonic seems quite
interesting also (and a lot easier then Polymer)!

But what really interested me are the demos from Google (Namely Paper Elements
as UI) with Polymer (it's like AngularJS, but it isn't): [https://www.polymer-
project.org/docs/elements/material.html](https://www.polymer-
project.org/docs/elements/material.html)

Fyi, an index of webcomponents for polymer is available on :
[http://customelements.io/](http://customelements.io/)

There's a designer tool for it: [https://www.polymer-
project.org/tools/designer/](https://www.polymer-project.org/tools/designer/)
, here's how to use it [http://goo.gl/r8ovXN](http://goo.gl/r8ovXN) (it's a
responsive maps application, with search input and speech input)

~~~
harsaz
Yup, Polymer is doing exciting stuff – the declarative native UI components in
Supersonic are actually implemented using web components (meaning they're
really framework independent), and we utilize their polyfill since the web
component spec is not supported in browsers yet. You can see the source code
at
[https://github.com/AppGyver/supersonic/tree/master/component...](https://github.com/AppGyver/supersonic/tree/master/components)

We didn't embrace Polymer more fully for various reasons (like it being a very
WIP project still), but the Polymer web components should all work fine with
Supersonic apps.

Disclaimer: AG employee here. :)

------
danny_taco
The problem we found with using AppGyver is that you depend on them for your
builds. Once you finish making your app, you deploy to AppGyver then go to
their website and click a button to build a compiled application. Also, keep
in mind that is not uncommon to wait up to 10-15 minutes for a build. When you
are on the clock, this add up.

Like others have mentioned, it's a framework on top of a framework on top of a
framework. You will find breaking points and get frustrated. Are you trying to
use custom Cordova plugins? Well, the build failed. Here's an error report of
what went wrong. Go make the changes necessary and build again while waiting
for another 10-15 minutes.

So, you built an Angular application on top of AppGyver with the native
navigation. Actually, you built many little applications where each one works
in one of the native views. If you are trying to port this into a web app you
are SOL.

These are my thoughts on AppGyver, from a developer that used their stack for
a few clients. These days I'll either go RubyMotion or Emberjs/Cordova.

~~~
harsaz
AppGyver dev here – I hear you, the build service wait times are a real pain,
especially when you are debugging a custom plugin and need to iterate quickly.

However, local builds are on the pipeline – can't give a date yet, but you'll
definitely be able to build your AppGyver apps with Xcode/Android Studio.
(We'll provide the AppGyver Wrapper code as a library you can include in your
project.)

~~~
danny_taco
That is certainly good news. Keep up the good work!

------
Kiro
I don't understand. I thought Ionic was AngularJS + Cordova so how can it be
"Ionic + AngularJS + Cordova"? What is this exactly?

~~~
harsaz
AppGyver employee here – the part from Ionic we forked is the great CSS
defaults, so it's more like "Ionic CSS + AngularJS + Cordova + AppGyver
stuff". What we bring on top of the CSS framework is native navigation, native
UI components, data etc.

~~~
rezistik
I found the CSS to be one of the worst parts of Ionic.

"Oh did you want to make a change? You'll need to declare it six levels deep
and !important"

------
potomushto
I've been building iOS app with AppGyver for almost four months. It's great.
There is a lot of bugs and difficulties, but we've managed to get app that
satisfy us and ready for AppStore. And now I'm opening marketing email, seeing
that marketing buzz about the new brand name, super exciting, scanning QR of
Kitchensink demo app to Android Scanner and getting terrible experience. If I
understand correctly we still should use almost entirely different codebase to
make it look native on Android 5 Material Design (navigation/tabbar/material
components, etc.). And Ionic doesn't help to solve this problem. Maybe
[https://material.angularjs.org/](https://material.angularjs.org/) does. My
biggest hope is that AppGyver will continue to improve support for Android,
but I'm not sure that it will happen in next 4 months, so yes, different
codebases or custom grunt hacks.

------
gwy
On Galaxy S4, installed AppGyver Scanner and scanned the Kitchensink QR code.
Just some things I noticed:

\- Opened up and it was blank except for title and bottom tray. Content
appeared into view after a few seconds of randomly tapping around.

\- The content inside the left drawer is being sized incorrectly, it's
illegibly small, the words are barely 0.5mm tall.

\- There is sometimes a white blank space to the right of the title at the
top, making it look like Supersonic Kitchens[ whiteness ]

\- Navigating to transitions took me to a blank pane. Tapping there crashed
the app

\- Not a bug, but can't use swipe to toggle the Status bar/Tabs toggles, even
though users may be used to being able to

\- The Back button is decidedly non-native looking, the arrow is basically
touching the word Back.

\- Tapping Network crashed the app

Not sure what's going on.

------
joeyspn
I've been reading all the info and docs (shameless Ionic docs clone xD) in the
AppGyver website and I quite like it. I'm _almost_ sold for some apps we have
in the pipeline (we were going to use Ionic/Cordova)...

The tooling is awesome... Thing is I don't like the fact that the prototypes
can't be shown online in a whitelabel fashion. I don't want my clients to know
which frameworks I'm using...

Any plans to offer a solution without AppGyver's logos all over the place? I
guess I could just use iOS Testflight as an alternative for testing...

~~~
harsaz
AppGyver employee here! The QR code sharing is just icing on the cake (tasty
icing, but yeah) – the basic functionality of creating a stand-alone IPA/APK
and sharing it via TestFlight or TestFairy is still there, just as strong as
it is with Cordova/Ionic.

Good point about a whitelabel scanner, though – we'll consider options to make
the flow of sharing a prototype/development version even better.

------
wiradikusuma
So it's JS right? Where does it sit between PhoneGap/Cordova (Web pages
wrapped in WebView) and Titanium Appcelerator (JS transcompiled(?) to native
code).

My experience with Cordova.. it's slow at runtime, and you build the UI
yourself using CSS (which gives the feeling, "Why am I building this by hand,
while in native I can just drag?").

My experience with Appcelerator.. it's slow at compilation (imagine GWT),
debugging is printlns, and you're at the mercy of whatever feature they
provide (e.g. if the latest version of Android has new widget X, you can't use
it until Appcelerator comes up with their version of X).

I still hope there's holy grail for code reuse / cross platform, but until
then I'm forced to go native.

~~~
Ezku
Hi, AppGyver dev here. Our platform expands on the web view approach, allowing
you to leverage existing web development experience when getting started.

Yeah, it's HTML and JS - but whereas Cordova provides you with one web view to
build your app in, Steroids applications have multiple views joined together
with native navigation. We ship with a lovely CSS framework by default to make
building UIs a snap. The command line features livereload, so your changes can
be reflected instantly on the device. And because it's Javascript, you can
debug using the tools in Chrome and Safari - a vast improvement over printlns.

You might find this page illustrative:
[http://www.appgyver.com/supersonic/ui](http://www.appgyver.com/supersonic/ui)

------
tzm
Congrats to the team! Supersonic looks like a solid contender in the hybrid
app space. I know of several companies that use Angular + Cordova who would
likely be interested in this.

------
astannard
Yeah I was wondering about what's different between this and ionic. Looks like
some of the elements are 'native' rather than html representations of native
elements such as tabs and slide out menus are done with native elements for
performance reasons.

I like ionic but this looks pretty good, its forked from ionic. Will give it a
run on my next project

~~~
pentateu
The Ionic fork is just the css (a small piece of what supersonic is).

------
hairymugs
So I had this stale app in the Play Store for over 6 months. I just didnt feel
like updating since I hate Andrdoid UI design. And yesterday I got your
announcement email. Too bad I was at work. 5PM comes around, I rush home,
download supersonic and re-wrote the whole app in 30 minutes! I <3 you!

------
zan
"FUTURE-PROOFED FOR IOS & ANDROID When you use Supersonic, you can be sure you
are using the most up-to-date visual and functional paradigms of both
platforms. That means iOS8 and Android KitKat today, and future-proofed for
the next generations."

Like Lollipop never happened.

~~~
harsaz
Fixed now, thanks for catching it!

------
NicoJuicy
I wonder how the comparison would be with Polymer (or Paper Elements) on page:
[http://www.appgyver.com/supersonic/comparison](http://www.appgyver.com/supersonic/comparison)

Supersonic does seem MUCH simpler then Google's solution though :)

------
V-2
What IDE do you use for developing on that platform? Just any HTML editor,
like Aptana or NetBeans? Or is there something dedicated like Xamarin Studio?
Is this CLI they provide integrated with anything out of the box? I couldn't
find that info in tutorials

~~~
harsaz
AppGyver employee here – any text editor works. We like Atom ourselves.
(There's no direct integration with any IDE tool at the moment.)

~~~
rip747
will you provide the shortcuts that you were using in the demo for atom?

------
audioj
Isn't the Angular framework totally changing in the future? How will that
affect supersonic?

~~~
harsaz
AppGyver dev here! The core of Supersonic is framework-independent, so we're
not at a risk of becoming stuck with an old version. We're monitoring
AngularJS 2.0 closely, and will bring all relevant components up-to-date when
the time comes to switch over (or we'll keep providing legacy support if that
seems like its required).

As an example: unlike e.g. Ionic, our navigation is not built on top of
AngularJS, but leverages the native navigation stack instead. Angular can be
used to enhance the core Supersonic bits (as we do in many places), but it's
not a lock-in.

------
blyce
Huh, came here to search for "Meteor" and didn't find any comment yet.

AppGyver-Guys, what about the integration into meteor? I know, supersonic has
its own data API but... it would be quite interesting to me to know how to
merge these both things together.

------
stangeek
I like some of the ideas in the CLI (live reloading on both platforms, live
dom editing etc.), but indeed this is very much Ionic + Firebase-like 3 way
binding bundled into a nice packaging.

Not sure I see the benefit vs. Ionic in itself to be honest.

~~~
harsaz
The big unique thing is the native UI and navigation – instead of running a
single WebView and doing everything in the DOM, we actually shuffle around
multiple WebViews by leveraging the native navigation controllers (and native
UI elements like navigation bar).

This means that you can e.g. have your details view running in the device
memory even when it's not visible. Then, when you click on a link on your
index page, the details view animates into view using a hardware-accelerated,
native transition. Same for tabs – switching between them is instant, since no
DOM needs to be redrawn. It's a whole separate WebView being brought onto the
screen.

Disclaimer: I work for AppGyver.

~~~
Illniyar
If each tab is a different WebView, how is angular working between tabs (I.E.
updating something in one tab being reflected in another tab, or similar)?

Is each WebView contain a different bootstrapped angular? are you using some
kind of "parent" WebView and communicating between WebViews (I'm not sure how
two-way binding will work in this case) ?

~~~
youngkasi
check this out:
[http://docs.appgyver.com/supersonic/guides/architecture/comm...](http://docs.appgyver.com/supersonic/guides/architecture/communication/)
\-- basically, there are many options, depending on what you want to do. you
can bind angular scope between views, if you're using angular. you can also
broadcast messages etc. you can also have a "parent" webview that's hidden,
it's pretty straight forward to do.

------
nanoman
I use Appcelerator Titanium pretty frequently - I think it is still the best
compromise to develop cross-platform applications.

But - if Supersonic fulfills its promise, Appcelerator will have trouble to
catch up.

------
barrystaes
"With multi page apps (MPAs), all your views and controllers are neatly
divided into separate HTML and JS documents. "

Multi page app?! Not sure whether to laugh or cry.. this pr-fu stinks.

~~~
Ezku
Hi, AppGyver dev here. I understand the confusion around that claim.
Especially taken out of context
([http://www.appgyver.com/supersonic/ui](http://www.appgyver.com/supersonic/ui))
you can read it as ridiculous hyperbole over something readily achieved with
eg MVC architectures. I'll try and explain the difference between SPAs and
MPAs and why we think the latter has merit.

A Single Page Application will usually consist of any number of logical views
handled in a single web browser view. Since the app is Javascript and HTML,
everything is loaded in the same runtime environment and switching between
views is actually about swapping things in and out of the DOM. We feel that
this isn't a very good approach when you're doing mobile applications, not
least because everything you do will be an approximation of the native UI
capabilities. Companies like Facebook and LinkedIn have famously failed to
deliver hybrid mobile apps with a good enough user experience when using the
traditional SPA approach.

This is where an MPA architecture comes in useful. As opposed to a single
runtime environment in a single web view, multiple web views can be run
_concurrently_ and the native layer is used for transitions between them. This
is different from both SPAs and traditional server-side architectures which
you could call "multi-page" if you squinted a little. Besides the readily felt
advantage in user experience, the approach also has architectural benefits
which help out in growing your app. When your Javascript runtime is working
towards rendering exactly one kind of view instead of dozens, there are
radically fewer possible states and thus less issues with global state leaks
and the like. In short, it helps make development simpler.

Hope this clarifies. As a dev, I think the ability to leverage multiple
concurrent web views is one of the core advantages of the platform.

~~~
FlipOne
Ezku, very interesting indeed. Your answer actually got me really interested
in Supersonic and will be starting to evaluate it for a future project vis-a-
vis the Ionic Framework itself, plus Angular Material and Kendo UI.

One more thing, Kendo UI does give us the ability to include only those
modules that our apps need (package customization), plus it's AMD-compatible.
Does Supersonic provide customization and AMD-compatibility as well?

------
sgt
I like AppGyver - however when I try to run their Scanner app in the iOS
simulator it seems to reload itself (even without file changes) relatively
often. Is this intentional?

~~~
pentateu
No. it might be an issue. You can report it here
[https://forums.appgyver.com](https://forums.appgyver.com)

------
abrkn
I'd like to use a combination of Cordova, React.js and some kind of UI
framework (Bootstrap?). Anyone have experience with this?

~~~
kitd
Not React but I'm in the middle of one using Cordova and Ractive. A very
simple, natural combination (so far).

IMHO, Angular adds too much complexity for small apps, though I could see it
may make sense for larger ones.

As regards the article, I'm a bit confused. Ionic is already Angular +
Cordova. What does Supersonic add?

~~~
NicoJuicy
My observation : Web components, but the complete short list is here :
[http://www.appgyver.com/supersonic/comparison](http://www.appgyver.com/supersonic/comparison)

But i think a lot of "Cross platform UI's" are going to look like this, here's
another custom elements HTML 5 UI framework with AngularJS:
[http://onsen.io/](http://onsen.io/)

------
tidyglajdy
Wow, quite amazed I must say. Looking forward to applying this to an idea of
mine I just had.

------
rafanami
I've been using Appgyver + Steroids for a mobile project that would be a lot
more complex if we were to build with Cordova + Ionic... Steroids workflow is
awesome, it is even better than developing an HTML5 app... Can't wait to test
supersonic...

------
yoka187
This is definitely the fastest way to create polished native like hybrid apps
for sure. I would not do any native code for iOS/Android unless it is some
really resource demanding app (games for example). But for data driven apps,
this is just sweet.

------
pavlov
Frameworks upon frameworks upon frameworks, running in a platform-dependent
embedded mobile browser, wrapped together with AppGyver-specific API thunks
for accessing some native functionality in a non-standard way. There's
tremendous impedance mismatch at every layer here.

I don't feel these deeply convoluted stacks are ever the right way to build a
mobile app... Unless perhaps in the situation where you're already familiar
with something like Angular and you know for sure that performance and look &
feel won't be important criteria.

~~~
paulbennett
I agree with the second paragraph. It seems that we're constantly pushing to
make developing mobile apps easier for people with a web front-end background,
in doing so tying them into using a stack of frameworks that in my opinion is
far enough removed from 'web' that it loses sight of the core advantage - that
it is easier to learn and develop with than the 'native' alternatives.

I wonder if by the time you get to this stage you wouldn't be better off
investing the time in actually learning the native languages and toolsets
provided with them. I am also concerned about how much you would be tied into
doing things the, in this case, Supersonic way. The scaffolding for example
looks interesting, but is it actually useful in a real-world application?

I don't have experience with Supersonic, I do have experience with AngularJS +
Cordova mobile apps (I built the front-end of the RuneScape Companion app) -
and I think if I were faced with building a similar app again I would think
very very carefully about investing time into learning a stack of frameworks
such as this.

~~~
colordrops
This type product fits a specific niche. If you are a small team with a lot of
web experience, no mobile experience, and only enough funds for one guy to
work on your mobile app, then this might be a good choice. While there are
some technologies that would need to be learned to build on this stack, it's
meeting you half way as a web dev, so it will still be a lot faster than
learning native dev from scratch. You will also save a lot of time by only
coding for one platform instead of two.

A stack like this though may not be the best approach to maintain as the user
base and dev team size grows, but it will get you off the ground with limited
resources and time.

~~~
joeyspn
Couldn't have said it better...

------
pentateu
Supersonic is much more than a UI Framework, it is all of the best tools and
components you need to develop hybrid mobile apps in a single place. Anyone
that has real world experience developing hybrid mobile apps knows the hassle
and hundreds of different bits and pieces requires for development. It is time
consuming and painful. Supersonic is all about taking out the pain and
complexity. It brings together all of the best pieces available instead of
reinventing the well + it has some great innovations of its own. You should
try it now.

