Supersonic: New UI Hybrid Framework – Ionic, AngularJS, Cordova

http://www.appgyver.com/supersonic

by redindian75 • 12 years ago

147 76 12 years ago

stangeek2• 12 years ago

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.

harsaz8• 12 years ago

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.

wattengard• 12 years ago

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

Illniyar• 12 years ago

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

xtrumanx• 12 years ago

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?

pentateu4• 12 years ago

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

stangeek2• 12 years ago

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

sgt• 12 years ago

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?

pentateu4• 12 years ago

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

Kiro• 12 years ago

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

harsaz8• 12 years ago

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• 12 years ago

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"

jbergens2• 12 years ago

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

pavlov• 12 years ago

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.

kitsune_2• 12 years ago

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.

NicoJuicy5• 12 years ago

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?

yoka1872• 12 years ago

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.

woadwarrior01• 12 years ago

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.

hrktb• 12 years ago

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.

paulbennett• 12 years ago

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• 12 years ago

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.

jbergens2• 12 years ago

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

saurik• 12 years ago

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.

http://macgyver.wikia.com/wiki/List_of_problems_solved_by_Ma...

coldtea• 12 years ago

Reminds me more of MacGruber:

https://www.youtube.com/results?search_query=mccruber

andybak• 12 years ago

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.

tzm2• 12 years ago

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.

thewarrior• 12 years ago

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

Things are getting ridiculously complicated.

NicoJuicy5• 12 years ago

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)

harsaz8• 12 years ago

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

astannard• 12 years ago

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

pentateu4• 12 years ago

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

yoka1872• 12 years ago

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.

pentateu4• 12 years ago

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.

NicoJuicy5• 12 years ago

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

rafanami• 12 years ago

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

nanoman• 12 years ago

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.

887• 12 years ago

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• 12 years ago

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

joeyspn3• 12 years ago

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

youngkasi4• 12 years ago

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.

zan• 12 years ago

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

harsaz8• 12 years ago

Fixed now, thanks for catching it!

tzm2• 12 years ago

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.

abrkn• 12 years ago

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

kitd• 12 years ago

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?

NicoJuicy5• 12 years ago

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/

nwienert• 12 years ago

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

V-2• 12 years ago

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

NicoJuicy5• 12 years ago

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

harsaz8• 12 years ago

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

rip747• 12 years ago

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

barrystaes• 12 years ago

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

Ezku2• 12 years ago

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.

FlipOne• 12 years ago

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?

joeyspn3• 12 years ago

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

harsaz8• 12 years ago

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• 12 years ago

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.

Ezku2• 12 years ago

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

rjdlee• 12 years ago

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.

danny_taco2• 12 years ago

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.

harsaz8• 12 years ago

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_taco2• 12 years ago

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

jbob2000• 12 years ago

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.

youngkasi4• 12 years ago

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.

audioj• 12 years ago

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

harsaz8• 12 years ago

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.

hairymugs• 12 years ago

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!

potomushto• 12 years ago

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.

gwy• 12 years ago

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.

tidyglajdy• 12 years ago

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

blyce• 12 years ago

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.

Supersonic: New UI Hybrid Framework – Ionic, AngularJS, Cordova

Related Stories