Thoughts on Integrating Ionic into an Existing Application

This post is more than 2 years old.

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

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Brian Hamana posted on 10/16/2014 at 8:51 PM

So, sounds like there is no straight-forward 'formula' to integrate ionic into a pre-existing Cordova/PG + Angualr app ? If Ionic itself is basically just a set of Angular-specific CSS and directives, I would think there should/could be a way to bring in just the CSS and JS and not use the CLI ? I may be missing something as I have no experience with Ionic yet.

The only online resource I found discussing the topic is this Ionic forum post - http://forum.ionicframework....

I haven't tried it yet, but it lays out steps to integrate the css & js into your pre-existing Angular app.

Comment 2 by Brian Hamana posted on 10/16/2014 at 8:52 PM

BTW - Thanks for the quick response & write-up !!!

Comment 3 by Raymond Camden posted on 10/16/2014 at 8:54 PM

@Brian: Oh, I didn't even think of Angular -> Ionic. I'd imagine it would be much easier actually. Get the CSS, get the JS included, and then you would inject the items from Ionic you need into your controllers.

Comment 4 by Todd Halfpenny posted on 10/17/2014 at 2:53 PM

@Brian, @Raymond, I have done just that. I've used bower to install Ionic and I have a simple grunt task to move over the various resources (js, scss, fonts) into my project structure.