12

We plan to create a hosted web app with AngularJS. As UI Framework we found Ionic and Onsen to work well with AngularJS. Both of this frameworks promote that they are made particularly for Hybrid Apps. But us I understand correctly, both frameworks are based on web technologies. So what are the drawbacks when using the suggested UI frameworks for non Hybrid Apps? Is it mainly the Browser support?

Thanks

Andi Pavllo
  • 2,506
  • 4
  • 18
  • 30
akkie
  • 2,523
  • 1
  • 20
  • 34

4 Answers4

9

Well, both Ionic and Onsen are made particularly for Hybrid Mobile Apps. You just won't be able to use it even for tablet apps without customization (If I am wrong, please correct me) just because they target the limited viewport and incorporate phone UX patterns.

Also, they are made with PhoneGap in mind (the apps will be hosted in the WebView component), and addresses some common WebView problems, e.g GPU acceleration for better performance.

If you need just some UI framework for a simple Web App you'd better have a look at Twitter Boostrap or Zurb Foundation. For a complex case you may even consider Sencha instead of Angular.

superjos
  • 12,189
  • 6
  • 89
  • 134
Mr_Mig
  • 783
  • 5
  • 10
  • 7
    I recently created an Ionic app and released it as a universal app. The interface looks good in the iPad. – Perry Mar 31 '14 at 02:15
  • 1
    Hi Perry, can you share that link so that we can see what you made with Ionic? – Jorre Apr 30 '14 at 08:36
  • 3
    You can use Ionic for tablet. Also with ionic no need for a UI framework as it comes with its own. – Sani Yusuf Jun 04 '14 at 18:07
  • I can't share that app, but there are a number of apps on http://showcase.ionicframework.com/ And yeah, Ionic comes with it's own UI stylesheet. Some developers skip the JS part and just use the CSS. – Perry Aug 05 '14 at 19:08
  • twitter made a mobile version of bootstrap called rachet. gorachet.com – Orane Oct 21 '14 at 00:47
  • There's a spelling mistake. The mobile version of bootstrap is at http://goratchet.com/ – Jared Thirsk Dec 20 '14 at 00:29
6

There is a part of Ionic that expects the Cordova/PhoneGap Device plugin to be installed. It helps with displaying on Android and iOS appropriately, as well as increasing the size of header bars for iOS 7. That wont be an issue for web though, since you'll have the browser's "chrome" taking up that space.

You may loose some of the buttery smoothness in things like page transitions because the template files need to travel over a (often cellular) connection to the internet, but your app will most certainly work if built with Ionic or Onses over the web.

Perry
  • 869
  • 9
  • 14
  • "the template files need to travel over a (often cellular) connection to the internet" - not so if you use something html2js to compile during build, which would be sensible for a hybrid app. – philistyne May 07 '14 at 11:16
  • Hi Perry, I'm really big on the idea of using a "one size fits all" approach and controlling UI/JS through smart ways like media queries/match media. I also believe in the "mobile first" approach and how this can weigh in heavily for performance (especially for mobile). That being said, I'm a little confused on how a framework such as Ionic can be used to do this? For example the "tabs". . This is not regular html, of course.. I'm a little confused on how both could be used for the same app. Can this be considered the shadow DOM? What is the browser compatibility I wonder? – Oneezy Aug 02 '14 at 03:34
  • 1
    like many things in angular and ionic are directives, which make use of custom elements. Their support goes back to IE8+ and all modern versions of chrome, safari, and FF. They're not shadow DOM, they're regular custom DOM elements. In ionic, most of the styling comes from CSS class, that gets automatically included in directives. You can also just as simply use divs with the right classes, but then you loose some additional functionality/interactivity. – Perry Aug 05 '14 at 19:02
  • 1
    Templates don't travel over a cellular connection, they don't travel at all. A SPA on a mobile device is all self contained within the *.apk or *.ipa file, it's not like a traditional web app. You don't rely on a back end web server to deliver pages, you only rely on back end for web api. – Post Impatica Jun 24 '15 at 13:29
4

Things changed considerably over last few months.

Both frameworks now support splitview so they can be used for tablet devices. Subjectively Onsen UI has a better support (it is much more configurable), but Ionic is also not bad. This can translate to smaller desktop browsers screens.

You should also consider that Onsen UI has a dedicated desktop browsers support (all web-kit browsers). Ionic framework will also work on desktop browsers, but it was not fully tested or optimized for such environment.

Biggest problem here is that both frameworks were never meant to be used on larger screens. They look oversized and bloated. If you ever worked with jQuery Mobile (on desktop browsers) you will understand this problem.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
0

There is nothing stopping you from doing that - it might even be a smart approach for a mobile first design approach. The advantage is that you could rapidly iterate an idea an then invest in a native or platform specific app depending on user feedback/metrics.

The main drawback would be the user expectations for your UI and application logic which are different for a web page and a native app. For example the back button will be duplicated in the browser and in your header. You could use some platform specific CSS or configurations to hide it. Then there is your application state and user data - will you save it in local storage, session or database? This depends on your app and best judgement.

There will be some browser issues which may not be addressed in the core of Ionic and Onsen because they are not targeted to work with IE6/7 (see angular browser support), for example, but you can resolve those by having a graded browser support policy.

Peter
  • 4,493
  • 6
  • 41
  • 64