Hacker News new | past | comments | ask | show | jobs | submit login
Supersonic: New UI Hybrid Framework – Ionic, AngularJS, Cordova (appgyver.com)
147 points by redindian75 on Dec 4, 2014 | hide | past | favorite | 79 comments

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

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)

- Matti, CTO of AppGyver

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

you don't actually NEED to have an account to test it out. however, in order to deploy your apps for cloud sharing, and for using the data, you have to be able to "own" it. that's why you need an account if you're using those features.

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

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

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

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

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. :)

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.

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

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

That's really a deal-killer, as far as I'm concerned. I thought Titanium build times were bad, sometimes taking 1-2 minutes. But 10-15? Wow. No way.

remember, if you're not using custom phonegap plugins (which is most apps), there's no need to build at all. it's all already in the scanner app that you use in development. it comes with cordova plugins built-in, and there are addons to provide push notifications etc. with appcelerator it's a bit different story.

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

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.

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"

I think Ionic works with or without Cordova. There is a Cordova plugin to Ionic.

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

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.

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

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.

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.

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

Have you taken a look at Xamarin?

It uses C# and seems to compile to Native, I haven't delved too deep into it, but it seems like a solid choice.

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.

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

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

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!

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

Fixed now, thanks for catching it!

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

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

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

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

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

Just your basic IDE. I use Visual Studio and a command line (npm, grunt, bower, ...)

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

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.

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.

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.

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.

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) ?

check this out: http://docs.appgyver.com/supersonic/guides/architecture/comm... -- 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.

So you're not using webview for the entire app? Does this mean that one could possibly implement the camera-feature of the facebook chat client? The one where the viewfinder occupies the lower 2/5ths of the screen (where the keyboard would go). I have an app-idea in my head that would benefit from this ;)

One of the things I like about Cordova/Ionic is that its just like regular web development. I can for the most part develop with a browser and be assured everything will work the same on the emulator/phone.

Since Supersonic is using multiple WebViews, how would that affect my usual workflow?

it won't affect your workflow much, since everything from communicating between webviews etc. is really straight forward. also, you get immediate updates on your devices, simulators and emulators all the time as making code changes. you can use chrome/safari to debug everything etc.

Ionic has no runtime.. you have to use cordova/phonegap which sucks big time. Supersonic has its own runtimes for iOS and Android that have much more features and are way faster... + they are compatible with Cordova/Phonegap plugins

Thanks for the explanation.

I have developed several more or less complex apps with Ionic and have yet to see a performance issues on "recent" devices (ie. >4S). But still it's an interesting idea.

One comment: if you have used Ionic purely for UI, maybe you can make this part more modular? eg. giving the ability to use Material UI might be interesting...

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.

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

Hi, AppGyver dev here. I understand the confusion around that claim. Especially taken out of context (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.

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?

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?

No. it might be an issue. You can report it here https://forums.appgyver.com

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

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?

My observation : Web components, but the complete short list is here : 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/

I'm working on something like this... get in touch if you have any feedback/interest.

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

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

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.

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.

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.

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.

Couldn't have said it better...

It's still early in the development of mobile stacks. It might be a huge risk to use a completely new framework built on another framework right now but in a few years it might have evolved to the standard way of doing things. If they get the tooling and own code to a stable state where everything just works it might save a lot of developer time. Or it might be safer to just go with Cordova or similar and use any UI and JS framework you like (that is stable enough).

I am beginning to wish every HN story had two comments sections - one for meta comments such as this and one for comments more directly addressing the original post.

Quite often I read the comments mainly for one or for the other. But it's distracting when you want to read comments commenting on THIS framework vs other frameworks to wade through a long initial sub-thread questioning frameworks entirely. :-)

Same happens every time someone posts an ORM article, or a CMS article or anything on Angular.js whatsoever. Oh - and god forbid a Google product announcement might generate a debate on anything other than "Google will just close this down just like they did with Reader".

I've got no objection to the parent's comments - but this type of comment always ends up at the top and dominates the more on-topic stuff further down.

Amen, less is more. I think certain programming languages and ecosystems just naturally attract these huge, convoluted stacks, and I don't necessarily mean JavaScript, but UI programming in general. This shit has all been tried before. If you're familiar with .NET, let's just think back to the atrocity that was / is .NET Webforms + .NET AJAX.

I think it's sad that certain people think that a frameworks like WPF or AngularJS are "great" or even "decent enough", it just shows you how abysmal the current state of UI programming really is.

So how would you do it any better? AngularJS and WPF are both great for their porpose.

How much longer would it take if they had to write Apache Cordova/Ionic from the start? How much longer would you create a website without Bootstrap or jQuery?

Regarding the web, I'd start with functional paradigms and immutable data structures. I'd avoid monolithic stateful frameworks such as AngularJS.

More in the vein of ReactJS, ClojureScript, Om, mori etc...



The only browser you can run on iOS is the Mobile Safari, which is ok. Apple is slowly bringing in WKWebView which will be even better than Mobile Safari (there are still some issues apple has to crack though).

And when it comes to Android devices, AppGyver works with Intel and crosswalk is used to bring unified experience on all devices. Crosswalk is fork of the newest chromium codebase. Check out https://crosswalk-project.org/ for more information about this.

Are you talking about UIWebView (rather than Mobile Safari)? And WKWebView is already available in iOS 8. The biggest thing that WKWebView brings to the table is JIT for JS which previously was available only to Mobile Safari and not to applications using UIWebkit. It does this by running an isolated process pool for rendering web content.

There's an issue with WKWebView and local file urls that's prevented Cordova contributors from moving forward with it http://shazronatadobe.wordpress.com/2014/09/18/cordova-ios-a...

I empathize with your position, but I think your last sentence defines a very large market. If I look at it from a product lens, Supersonic is optimizing performance, UX and tooling within the hybrid space, which is valuable offer.

From an engineering perspective, I would inspect the native API bindings and look for / test optimized rewrites of the Cordova runtime. I believe they are getting close to 3x gains over the stock Cordova runtime.

Have you ever actually watched an episode of MacGyver? I feel like if you have, this "AppGyver" project sounds like it has just about the right amount of duct tape.


Feels like your are describing an enterprise app.

That's also the same kind of situations where you have to freeze the hardware and software versions to keep it working, and in 5 years you still have to keep iOS8 devices running around, like it was done with IE6 in the old days.

I normally disagree with the excessive snark here but OP is right here.

Things are getting ridiculously complicated.


> I think it's time to build my first app. This has to be the least intimidating frameworks I've seen. Can't wait to see how fast it is to use!

I am all for publicizing/celebrating loudly products built by startups. But please edit for full disclosure to facilitate better discussions (if you are N.M. from Appgyver).

I thought the same, and made a Cordova/Angular app. It was a mistake. Don't go there! It's easier to learn the native languages/sdk than to debug that mess.

Also, cocoa touch is nicer than any web framework you've ever used.

I am not an expert. I just started with Ionic and got a simple App running in a few hours.

How can native development be easier, when I'm already familiar with web development in HTML, CSS, JS/AngularJS? What did you miss when debugging?

If you're only targeting one platform, the time spent to learn developing for it may be justified. But I don't see why you should not use tools like Ionic or Supersonic when building data driven apps for multiple platforms.

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.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact