Rails JS frameworks: Ember.js vs. AngularJS

This is the direction we're moving on my company, we have group building a restful API, and then we have the front end team that are essentially their first client of the API. So far it's been an extremely positive experience, in the past the "front end" team was expected to dig in to the back end and build out the data collection themselves, now we can have multiple teams working on the same thing without stepping on each others toes because we know where demarcation point of the responsibilities are.

This is precisely the style of application development Ember shines at.

I do this as well albeit with Django as my backend.

Grunt has a few plugins that help you manage this as well. If you're using CoffeeScript and/or SASS then I highly recommend grunt-connect-proxy - it's trivial to set up and works like a charm. It's also really useful to stub out HTTP calls by setting up your grunt-connect middleware to deliberately return certain responses.

I do this often with Angular, except using Django as a backend with Django Rest Framework helping out with the API. I find that separating concerns like this leads me to much better code.

I agree that this is the simplest way to be structuring a SPA these days. Integration with things that were not designed with SPA-first development in mind become incredibly convoluted, quickly. This is especially true when you want to take advantage of the build tooling that the JS ecosystem provides for. We quickly found ourselves completely bypassing the Rails Asset Pipeline in order to support an "integrated" project.

see also: http://blog.pedago.com/2014/01/21/goodbye-sprockets-a-grunt-...

We've since completely abandoned any Rails views and only interface via REST APIs (and have also migrated to Gulp). While having Rails generated views for admin boilerplate was initially great for prototyping, it probably created more headaches than it was ever worth.

Noob question for people:

How do I do CSRF token for separate Ember/Angular app?

Since Rails can't write the CSRF directly on the front end page, how does CSRF work in that case?

I worked on a blog post for Ember and Rails (using the Ember CLI and building a completely separate Rails API)... Check it out: https://www.devmynd.com/blog/2014-7-rails-ember-js-with-the-...

You're right, and the main reason why the article doesn't go deeper into SPAs is because talking about SPAs with Angular/Ember and Rails is a topic so wide it could be its own article. I tried keeping it short, mentioning common Rails' integration caveats.

Not only is it productive, it is officially endorsed by the Ember core team as the "right way" to use Ember.

Thanks for the heads-up, maybe I can do a follow-up article or add an update into this one to include ember-cli features.

I really dislike having to start up a separate web server for every project I work on.

I'd love this if it had a testing framework to go with it. The primary reason we went with Angular was because it was so much easier to test than the spaghetti of jQuery modules and the mess that are events.

> Is there any differentiation between the two on API stability?

Compare http://angularjs.blogspot.co.il/2014/10/ng-europe-angular-13...

> Our goal with Angular 2 is to make the best possible set of tools for building web apps not constrained by maintaining backwards compatibility with existing APIs

vs https://github.com/emberjs/rfcs/pull/15

> This is not a big-bang rewrite; we will continue development on the master branch, and roll out changes incrementally on the 1.x release train. The 2.0.0 release will simply remove features that have been deprecated between now and then. Our goal is that you can move your Ember app to 2.0 incrementally, one sprint at a time.

It seems like it is a bad time for finding enterprise-grade js frameworks. Ember has its disclaimer, Angular is impossible to recommend for new projects since 2.0 isn't out yet and will be entirely different than 1.x, react/flux is still releasing breaking changes, and I'm not sure what else would be considered a very strong candidate.

I found that http://knockoutjs.com/ (which I ultimately picked instead of Angular or Ember) takes backward compatibility very seriously (http://knockoutjs.com/upgrade-notes/v3.0.0.html).

In fact, the article mentions in 6.2.2 one client-side solution to handle CSRF token by including it into the $httpProvider's headers.

I keep forgetting I did this, lol. I gotta admit, I was surprised Tom came out on top so easily with this - not a man to underestimate! ;-)

this is very old...lot has been changed for better in Ember and some what in Angular as well..

Sorry for that. We are using an iPhone 5 for testing, and it seems that the larger iPhone 6 viewport is leading to some unexpected edge cases. We'll roll out a fix now and I will use this as an excuse to get a new phone :)