Desktop webapp and Ionic compatibility


#1

Hi,

Currently, I own a webapp application using Twitter Bootstrap 3, in order to make it responsive for mobile.
I’ve just found this promising Ionic Framework and I really want to implement it for my mobile version.

The question is: What could be the strategy to switch for my Desktop webapp version, that does not use Ionic, to my mobile version, that would make a complete use of Ionic?


#2

That fully depends on wether your desktop app is built on top of AngularJS.

Certain CSS properties that Ionic uses such as the column layouting logic look similar to the ones that Twitter Bootstrap uses. But most of its aspects such as controllers (tabs, sliders, header) make extensive use of AngularJS for their controlling logic.

If your webapp already uses AngularJS, porting over the CSS aspects would be a trivial task (ie renaming classes).


#3

My app makes fully use of AngularJS.

An example:
I’ve written a special directive for structuring and handling errors on Bootstrap 3’s forms.
As Ionic’s forms structure is different, how could I say to the webapp: When you are on the desktop, load this HTML template using my custom directives, and when you are on a mobile device, load this one containing special Ionic’s components.
Other example: on desktop version, I want to display a Bootstrap modal for Login, but on mobile version, I want a full screen using Ionic, (without any bootstrap modals).

It sounds that I should better have to create both AngularJS distinct apps, one for Desktop and one for Mobile? No?


#4

I’m thinking one of em needs to go :wink: It seems like a headache to try to support two frameworks at the same time, with varying levels of features, support for use cases and maturity in development.

My $0.02 would be to see which framework supports your needs the best, and try to port over functions from that framework to the main one you want to use. You could use the code as a starting point. Might be more work up front, but it saves in maintainability down the road.


#5

Yes, having two mixed frameworks would lead to a burden :slight_smile:
I really think about trashing Bootstrap and using Ionic rather. Even if by default, desktop app (using Ionic so) would looks like to a native app. But I could customize it :slight_smile:

Moreover, I think nowadays applications are more valuable than a desktop app, so let’s go ionic :slight_smile:


#6

@Mik378, in this case, the best method would be to use an API that just returns the data, then you build and style the forms independently on the client side. So, you’d have markup for the form in the Ionic app, then markup for the form in the bootstrap app.

Imagine the Dropbox app. The actual UI code is not the same for the desktop app and the mobile app. Rather, each one is independent and behaves differently based on the API data, in order to provide a mobile-focused experience or a desktop one.

That help?


#7

Hi,

I have implemented an app using codeigniter, AngularJS and ionicframwork.
You can look into it, it may help you.

enter link description here


#8

Hi @Mik387, did you end up going the ionic route for both desktop and mobile? I was hoping you’d be able to share your experience with this thus far. I’m currently making the same decision.

My current thinking is it comes down to the platform you want to focus on. If you value the web app and mobile app equally, then perhaps bootstrap is the way to go (you will get a decent app for both platforms). If however you value the mobile app more, ionic might be the better option (resulting in a nicer mobile app, and a passable web app). The problem with the latter I suppose is the lack of support for some desktop browsers. A browser/feature compatibility table would be a great resource in helping make this decision. Does anything like that exist?