Thoughts on Integrating Ionic Into an Existing Application

Earlier this week a user asked me a question about integrating Ionic into an existing application.

@raymondcamden - Do you have a resource which documents how to integrate ionic into a current Cordova/PG project ?

(Brian Hamana @MobileWebApp)

I had some thoughts on this and spent some time talking to Holly Schinsky as well about the topic. Here are some things to consider in no particular order.

First, remember that Ionic is, at the simplest level, an Angular application with CSS and directives. These directives both simplify the use of the CSS and provide various UX features like "Pull to Refresh." The Ionic "family" (not really a term they use) contains more than that, stuff like the CLI improvements and their visual creator, etc., but we're focusing this discussion on just the end result - the application.

One option would be to just use the CSS. That would allow you to keep your current application as is and just update styling where appropriate - changing classes to ULs and DIVs etc to match the Ionic way of doing things. That won't give you any of the directives or UX stuff, but it is an option.

Another option would be to migrate your code completely. This could be a huge undertaking. If your current application isn't using an MVC framework of any sort then you're going to have to do a lot of breaking stuff up. I think that's an improvement in general so it is time well spent, but you should be prepared to spend that time.

And obviously if you don't know Angular going into it, you must spend some time getting familiar with it. I am very much an Angular Newbie. I can build... things... but I have lot to learn. With that being said, I feel like I know enough to do cool stuff with Ionic. But I would not recommend trying to use Ionic with no existing Angular skills. I think one day spent doing Angular's tutorial and perusing the docs will give you at least enough context to look at Ionic, but you will want to plan time to get up to speed with Angular in general.

So what if you are using an existing MVC framework, like Backbone? I'm a bit rusty with Backbone but I had thought that this could perhaps make things a bit easier. You have code split into controllers and services anyway, right? But this is where Holly set me straight. She reminded me that Backbone is very different from Angular. I'm going to quote her here:

angular is DOM extension

backbone is less rigid

angular, you have to follow certain patterns and ways of doing things, backbone you can use loosely

So it may not be easier at all if you are switching from Backbone. It may be worthwhile to google "Backbone to Angular" or Ember, etc. That particular part of the process will apply to Ionic.

Do folks have any opinions on this? Please share below.