Roadmap & use without Angular

From your homepage:

As of Ionic 0.9.0, Angular is the only supported way to build Ionic apps (we are working to change this though).

Do you have a roadmap that shows how this will change in the future? Our team is more interested in React (from Facebook) than in Angular because React’s components are more composable than Angular’s directives. Also, do you have any advice for the use of your framework without Angular today?

3 Likes

Hey @plaxdan.

We don’t have anything specific on the roadmap yet, but it shouldn’t be hard to get started with React today.

If you are familiar with Angular, the way we’ve been building the Angular extensions are that we take our low-level “View” and “View Controller” objects and then simply instantiate them in the directive link function to the element the scope is bound to.

Really, the only thing we are doing that is not in the low-level API is animations. We’ve used angular’s ngAnimate module to do that and we don’t have a comparable low-level version of that, yet.

That being said, I can’t guarantee the low-level API isn’t missing some other things, as we’ve prioritized Angular in the interest of time for getting the first versions out, and we thought offering Angular support would be a unique angle that would get people excited about the framework, which seems to be working.

If you take a look at how the Side Menu Controller works using the low-level API, you can see how we’ve simply modeled it off of an element reference: http://ionicframework.com/docs/api/controllers/side-menu/

There is also a test that uses the low-level API in the repo: https://github.com/driftyco/ionic/blob/master/test/side-menus.html

Hope that helps! I’d be happy to explain more if you are interested in helping with a react extension :slight_smile:

Hey @max. Thanks for the reply!

Yes I’d dug into your code and can see how you’re mixing your low level View into the Angular instances. I already created an example (without React) that just interacts with your low-level API for the sidebar and it was a piece of cake. Wrapping that in a React component will be trivial.

I went to do the same thing with the Modal but could see that’s not yet incorporated that into the low-level API. I can understand leaning on Angular to get this out the door. I’m excited to see you guys focused on decoupling your core from the framework.

Do you plan on incorporating animation into your core so that all the major UI components are available in a standalone instance of Ionic (something like animate.css perhaps?).

As far as helping out with a React extension I love the idea but the following applies:

  • we’re not 100% sure we’ll be using React (though it’s close to 100% ;-))
  • our code is coffeescript

Either way just the CSS framework alone is worth the price of entry. Look forward to making this work!

Daniel

Yea, I’d like to set up some kind of animation system, probably modeled off of ngAnimate since it works pretty well.

We’ll see how the initial adoption is from the Angular crowd and how strong the desire is for non-angular versions, then see about building out some of those features for the low-level api.

Things like the Modal and ActionSheet are bound pretty hard to the angular services, so I want to work to decouple that over the next few months.

At any rate, hope you enjoy the CSS framework portion since it is very usable on its own. And if you want to share what you make, we’d love to put it up on our upcoming showcase page :smile:

I’ll have to take a look at your guidelines for contributing but Modal in particular is something that we’ll need to tackle pretty soon. I’d like wherever possible to take into account your plans (and I know they may be vague at this point) for implementing this. That way we can maximize the chances of either incorporating your stuff in the future, or contributing our stuff (if it’s up to snuff). So any specifics you had in mind in terms of animation frameworks, or whether you were planning on rolling your own (or whether even ngAnimate could be used standalone without the rest of Angular). That sort of information would help us get started in the right direction.

Of course a topic for more general discussion of these things might yield better ideas from others.

Sure. I haven’t really thought too hard about it. ngAnimate isn’t all that complicated (1000 lines and a ton of that is comments: https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js). It would need to have some of the angular specific scope stuff removed, but is otherwise pretty generic. The thing I like about it is that it does a nice job parsing duration from CSS animations and also reliably triggering a callback on completion which can be tricky with multiple transitions and such.

The nice thing about Modal from a non-angular standpoint is it’s really just a fixed div that starts offscreen and slides in. It’s the animation that makes it feel nice, so really you don’t need much to make it work, since you can trigger the animation by applying the active class.

So if I was going to build a custom animation utility I would probably copy a lot of the code from ngAnimate and just strip out stuff relating to scopes

Just checking in to see what experience you ended up having trying to use ionic and react together, @plaxdan.

Cheers

Also checking in to see where this is going.

I think this would be a very wise thing to do moving forward as React has been gaining a lot of traction lately.

I’d also like to know if React is still a topic for you or if you will concentrate on AngularJS.

Best,
Andreas