
Rails JS frameworks: Ember.js vs. AngularJS - fervisa
http://www.airpair.com/ruby-on-rails/posts/ember-vs-angular-with-rails
======
xb
The article talks about SPAs, but doesn't go so far as suggesting that an
Ember or Angular app could be a separate project altogether from the rails
app, requiring no integration with rails, using the back end only as a REST
api and serving the static SPA from wherever (say a CDN). There are tradeoffs
with this approach, but some would consider this even easier or simpler than
having the html/js app 'integrated' with the back end.

~~~
jsnk
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?

~~~
boucher
It's generally pretty easy in most frameworks to plug in to all XHR requests
(see e.g. jquery's ajaxPrefilter). Then you can simply add a CSRF token to the
header of every request (or possibly your authentication details directly).

~~~
fervisa
The Rails unobtrusive adapter for jQuery jquery-ujs has a pretty neat
implementation, you can take a look at it here
[https://github.com/rails/jquery-
ujs/blob/master/src/rails.js...](https://github.com/rails/jquery-
ujs/blob/master/src/rails.js#L58-L61)

------
mixonic
If you start a new Ember project today, or want to try Ember and compare it
with other frameworks, please use Ember-CLI: [http://ember-
cli.com/](http://ember-cli.com/)

The style of development CLI introduces makes you incredibly productive. A
comparison of Ember without discussing CLI is missing an essential ingredient.

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

~~~
lightblade
Not only it is endorsed, it is Ember. The project will get lifted to Ember in
github by the time Ember 2 comes around

~~~
Mistral
Where can I find more info on Ember 2 roadmap? Thank you.

~~~
tolt
The Road to Ember 2.0 RFC
[https://github.com/emberjs/rfcs/pull/15](https://github.com/emberjs/rfcs/pull/15)

------
cjjuice
Why duplicate logic in the front end? We recently open sourced a lightweight
framework for writing coffeescript in rails. It's fully compatible with
turbolinks and let's you run only the JS you need. It's called RailsScript (
[https://github.com/gemgento/rails_script](https://github.com/gemgento/rails_script)
)

~~~
acconrad
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.

~~~
fervisa
I usually test my Rails/Angular projects with jasmine-rails jasmine-jquery and
Sinon.JS. These three together let you test virtually any frontend js code.

------
jdthorne
Is there any differentiation between the two on API stability?

I got burned last fall trying to build an app with Ember as they kept making
breaking changes, even between release candidates (!). Technically Ember was
stable, but Ember Data (which is separate I guess?) was doing major
refactoring on their API, and it cost us quite a bit of time just trying to
keep up. Even today, their GitHub has a disclaimer that it's beta quality and
under active development[1]. Ember CLI also says it's very much WIP[2], even
though it seems to be the officially endorsed way to build Ember apps.

Does Angular make stronger promises about their stability? Is this sort of
thing just the cost of doing business with cutting-edge frameworks? Or am I
missing something?

[1]: [https://github.com/emberjs/data#api-
stability](https://github.com/emberjs/data#api-stability) [2]:
[http://www.ember-cli.com/#community](http://www.ember-cli.com/#community)

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

Compare [http://angularjs.blogspot.co.il/2014/10/ng-europe-
angular-13...](http://angularjs.blogspot.co.il/2014/10/ng-europe-
angular-13-and-beyond.html)

> 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](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.

~~~
dchuk
The AngularJS guys have since modified their plans a bit:
[https://docs.google.com/document/d/1dZdq2L8EkzimgvU93ypLF9GJ...](https://docs.google.com/document/d/1dZdq2L8EkzimgvU93ypLF9GJpdzD2jjm08Zal6sfxMQ/edit?hl=en&forcehl=1)

TL;DR: they're dedicating team members to continue working on 1.X while they
build 2.0. They're also planning out a migration strategy for anyone on 1.X
when 2.0 launches

~~~
steveklabnik
Ah! Good to know, thank you!

------
Bahamut
About the Angular portion of CSRF integration - one can do this in other ways
without disabling the check. One can create a factory that acts as the http
interceptor that has the csrf injected. One can also manually crawl the DOM by
using document.querySelector and inject the value into the http interceptor
for appending to requests. One can also use an http request to fetch the token
and have the token served via the xhr and manually bootstrap the app.

Angular is relatively unopinionated here.

~~~
fervisa
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.

------
heroku
this is more fun: [http://vimeo.com/68215606](http://vimeo.com/68215606)

~~~
petercooper
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! ;-)

~~~
tomdale
If you're gonna step to me, better make sure your framework game is tight.

------
malyk
Readability issue: On my iPhone 6 in landscape I can't read the first couple
words of every line because of the stupid little popup menu bar anchored to
the left. Put some padding on the text.

~~~
aerosmile
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 :)

