8 ms·

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

147 points by redindian75 12y ago

stangeek 12y 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.
- harsaz 12y 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 12y 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 12y 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) ?
    - youngkasi 12y ago
      check this out: http://docs.appgyver.com/supersonic/guides/architecture/communication/ 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.
  - xtrumanx 12y 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?
    - youngkasi 12y ago
      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.
- pentateu 12y 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
  - stangeek 12y 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 12y 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?
- pentateu 12y ago
  No. it might be an issue. You can report it here https://forums.appgyver.com https://forums.appgyver.com
Kiro 12y ago
I don't understand. I thought Ionic was AngularJS + Cordova so how can it be "Ionic + AngularJS + Cordova"? What is this exactly?
- harsaz 12y 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 12y 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"
- jbergens 12y ago
  I think Ionic works with or without Cordova. There is a Cordova plugin to Ionic.
pavlov 12y 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_ 12y 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.
  - NicoJuicy 12y 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?
    - kitsune_ 12y ago
      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... http://www.slideshare.net/rangle_io/bertrand-k-functionalwebdevelopment http://www.slideshare.net/rangle_io/bertrand-k-functionalweb... https://www.youtube.com/watch?v=Elr_RNt2R5Q https://www.youtube.com/watch?v=Elr_RNt2R5Q
- yoka187 12y ago
NicoJuicy 12y 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 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 12y 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/components 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 12y 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
- pentateu 12y ago
  The Ionic fork is just the css (a small piece of what supersonic is).
nate_montgomery 12y ago
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!
- jeswin 12y ago
  > 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).
- fdsary 12y ago
  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.
  - shoq 12y ago
    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.
yoka187 12y 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.
pentateu 12y 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.
NicoJuicy 12y ago
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 :)
deleted 12y ago
[deleted]
rafanami 12y 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 12y 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 12y 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 12y 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 http://www.appgyver.com/supersonic/kitchensink) - Matti, CTO of AppGyver
  - joeyspn 12y ago
    Hey Matti, great job. Marry Supersonic to Strongloop's Loopback and you're the winner...
- youngkasi 12y 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 12y 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.
- harsaz 12y ago
  Fixed now, thanks for catching it!
tzm 12y 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 12y 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 12y 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?
  - NicoJuicy 12y ago
    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/
- nwienert 12y ago
  I'm working on something like this... get in touch if you have any feedback/interest.
V-2 12y 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
- NicoJuicy 12y ago
  Just your basic IDE. I use Visual Studio and a command line (npm, grunt, bower, ...)
- harsaz 12y 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 12y ago
    will you provide the shortcuts that you were using in the demo for atom?
barrystaes 12y 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.
- Ezku 12y ago
  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 12y 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?
joeyspn 12y 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...
- harsaz 12y 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 12y 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.
- Ezku 12y 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 http://www.appgyver.com/supersonic/ui
- rjdlee 12y 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_taco 12y 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.
- harsaz 12y 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_taco 12y ago
    That is certainly good news. Keep up the good work!
- jbob2000 12y 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.
  - youngkasi 12y 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 12y ago
Isn't the Angular framework totally changing in the future? How will that affect supersonic?
- harsaz 12y 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 12y 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 12y 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/ 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 12y 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 12y ago
Wow, quite amazed I must say. Looking forward to applying this to an idea of mine I just had.
blyce 12y 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.

147 points by redindian75 12y 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.

harsaz 12y 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 12y 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 12y 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) ?
  - youngkasi 12y ago
    check this out: http://docs.appgyver.com/supersonic/guides/architecture/communication/ 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.
- xtrumanx 12y 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?
  - youngkasi 12y ago
    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.
pentateu 12y 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
- stangeek 12y 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 12y 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?

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

Kiro 12y ago

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

harsaz 12y 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 12y 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"
jbergens 12y ago
I think Ionic works with or without Cordova. There is a Cordova plugin to Ionic.

pavlov 12y 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_ 12y 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.
- NicoJuicy 12y 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?
  - kitsune_ 12y ago
    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... http://www.slideshare.net/rangle_io/bertrand-k-functionalwebdevelopment http://www.slideshare.net/rangle_io/bertrand-k-functionalweb... https://www.youtube.com/watch?v=Elr_RNt2R5Q https://www.youtube.com/watch?v=Elr_RNt2R5Q
yoka187 12y ago

NicoJuicy 12y 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 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 12y 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/components 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 12y 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

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

nate_montgomery 12y ago

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!

jeswin 12y ago
> 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).
fdsary 12y ago
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.
- shoq 12y ago
  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.

yoka187 12y 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.

pentateu 12y 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.

NicoJuicy 12y ago

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

deleted 12y ago

[deleted]

rafanami 12y 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 12y 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 12y 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 12y 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 http://www.appgyver.com/supersonic/kitchensink) - Matti, CTO of AppGyver
- joeyspn 12y ago
  Hey Matti, great job. Marry Supersonic to Strongloop's Loopback and you're the winner...
youngkasi 12y 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 12y 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.

harsaz 12y ago
Fixed now, thanks for catching it!

tzm 12y 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 12y 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 12y 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?
- NicoJuicy 12y ago
  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/
nwienert 12y ago
I'm working on something like this... get in touch if you have any feedback/interest.

V-2 12y 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

NicoJuicy 12y ago
Just your basic IDE. I use Visual Studio and a command line (npm, grunt, bower, ...)
harsaz 12y 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 12y ago
  will you provide the shortcuts that you were using in the demo for atom?

barrystaes 12y 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.

Ezku 12y ago
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 12y 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?

joeyspn 12y 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...

harsaz 12y 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 12y 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.

Ezku 12y 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 http://www.appgyver.com/supersonic/ui
rjdlee 12y 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_taco 12y 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.

harsaz 12y 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_taco 12y ago
  That is certainly good news. Keep up the good work!
jbob2000 12y 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.
- youngkasi 12y 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 12y ago

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

harsaz 12y 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 12y 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 12y 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/ 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 12y 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 12y ago

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

blyce 12y 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.