
Migrating from Ember.js to AngularJS - eranation
http://beust.com/weblog/2012/12/29/migrating-from-ember-js-to-angularjs/
======
hakaaaaak
Would be nice if they hadn't closed comments before Peter Wagenet, Yahuda, and
the rest from the Ember team could weigh in.

I personally like AngularJS a lot, but I also like Rails. Rails 4 has a rails-
api project along side of it, which makes it seem like they are starting to
spend more time thinking of Rails as provider for a Javascript front-end.
Because of Yahuda's involvement, they have also placed more bets on Ember than
Angular the last few years.

I think that Angular secretly hides an affinity for backing services in Node,
and this concerns me a little. I think their team needs to either provide
examples and support for each major front-end framework and not just rely on
volunteers to provide those examples that won't be maintained as Angular
changes. Or at least be crystal clear about what is expected of a service so
that as little code is required as possible on the Angular end to integrate
with it. And the same goes for Ember. What good is a front-end MVC framework
that depends on services to exist if you have to spend any time guessing what
to use on the service-side?

~~~
steveklabnik
> Because of Yahuda's involvement, they have also placed more bets on Ember
> than Angular the last few years.

To be clear: I want rails-api to work well with any JS framework that wants to
work well with us. Obviously, Ember is a big target, as conceptually, Rails
and Ember are very close. That said, I'm a server-side guy: I don't care what
is consuming my JSON, just that I serve the JSON up well. If someone who's big
in the Angular world wants to come help make Rails super badass at serving up
the JSON Angular wants, I'm all for it.

~~~
patrickaljord
Angular can take any kind of json so it doesn't really matter what rails
return. It could re-use ember json format just fine.

------
pzuraq
I've actually been doing the opposite, migrating my app from Angular to Ember,
and I'm very pleased with Ember so far. Angular is an interesting and powerful
framework, but it has a lot of gotchas and requires a large amount of
boilerplate code for things like object persistence. Learning how $resource
and services worked took a lot of time and the documentation is not entirely
clear, especially for someone new to javascript frameworks like myself.

It took me about a month and a half to learn the ins and outs of Angular and
FuelPHP to get my app to the point it was at. Within a couple of days of
experimentation with Ember and Rails, I was at the same point. I'm moving
forward MUCH more quickly with deploying the app at this point.

I will admit that the Ember docs are sparse. They're getting better, but
occasionally inaccurate or just not there. Still, there is documentation for
most things you would want to do, and when there isn't the community is good
help.

Both Ember and Angular are great frameworks, but after evaluating both I'm
definitely sticking with Ember. Maybe it's just because it makes more sense to
me, but I've been able to accomplish a lot more much more quickly.

------
jcampbell1
Proprietary attributes for templating are confusing. So confusing the author
put the ng-repeat in the wrong place (I think).

Can someone familiar with angular explain how you would would make a special
case '<li>There are no names in the list</li>'? It is obvious to me how to do
it with ember, but non-obvious in angular.

~~~
hakaaaaak
Like this:

    
    
      <ul>
        <li ng-repeat="name in names">{{name}}</li>
        <li ng-show="!names.length">There are no names in the list</li>
      </ul>

~~~
myhf
Or, if you don't want the "no names" item in the list at all when it's
inapplicable, instead of merely hidden:

    
    
        <div ng-switch="names.length">
            <ul ng-switch-when="0">
                <li>There are no names in the list.</li>
            </ul>
            <ul ng-switch-default>
                <li ng-repeat="name in names">{{name}}</li>
            </ul>
        </div>
    

Either way you end up with an ugly dom.

~~~
jcampbell1
This is what I was looking for. I gather the framework is allergic to
conditionals.

~~~
hakaaaaak
Behavior can be provided through directives via elements, attributes, css
class names, and comments.

It isn't "allergic to conditionals". It just drives the logic elsewhere to
keep the presentation layer looking as clean as possible to the _developer_ so
that you can either focus on the view (template) or the controller or model.

~~~
jcampbell1
I think you described exactly what I meant by "allergic to conditionals": a
philosophy that conditional logic never belongs in the presentation layer. I
didn't intend to imply a value judgement.

~~~
taligent
> I didn't intend to imply a value judgement.

I will. That seems dumb.

Why are conditionals not allowed in presentation layer but repetition is ?

~~~
nilliams
It's a judgement call. Some people are wary that going nutty with conditionals
in templates could result in littering bits of 'business logic' in them - they
prefer to take an all-or-nothing stance and go for nothing.

Personally I like the sort of middle-ground approach that Handlebars [1] has,
I'm fine with basic 'truthy/existence' type checks, but will avoid templating
languages that allow 'any old code'.

I think this sort of discipline (picking a deliberately restrictive library)
is probably more useful for teams than individuals (who are capable of
limiting their own conditional crazy).

[1] <http://handlebarsjs.com/>

------
tomdale
While there's great feedback here, it's interspersed with information that is
either outdated or just flat-out inaccurate.

 _Overall, Angular is a much more extensive framework than Ember._

I don't think this is true. For example, AngularJS, as far as I'm aware, does
not offer a persistence story at all.

 _Injection and testability._

Ember.js does dependency injection too; we just roll it into our conventions
so that new developers don't need to learn what dependency injection is. If
you have to learn a ton of comp sci terminology to start learning a framework,
they blew it.

Additionally, Ember is fully unit tested (over 6000 unit tests at the moment)
and, because of dependency injection, loading up your app in a clean state and
testing individual components (models, views and controllers) is easy.

 _Support for partials and inclusion of templates. This is another thing I
really missed with Ember.js, which offers no easy way to break down your HTML
templates into smaller, more manageable files._

This is just flat-out inaccurate, and has never been true. Ember has supported
breaking up templates since day one.

 _Documentation. While the Ember.js documentation is fairly large, I found it
very unorganized and I often resorted to searching the page to find what I
need._

This has been fixed and the response has been overwhelmingly positive. We
still have a ton of stuff planned to make it even more friendly for beginners.

 _Cascading updates are being executed right away._

This is simply not true. In fact, Ember's run loop is what powers many of the
nicest features, like deferred DOM updating and binding synchronization. I'm a
little bit surprised that other JS frameworks haven't copied the idea, to be
honest.

 _You need to remember to call the setter: object.set('foo', newValue)_

I agree that this is not ideal, but the flip side is that frameworks like
Angular have to iterate over __every bound object __when something in a scope
has changed, and check it against previously known values to determine if a
change has happened. This "dirty checking" can quickly lead to pathological
performance issues. We're all about ease-of-use, but not when it turns into a
footgun.

As you might be aware, Yehuda Katz is on TC39 (the committee developing the
next version of ECMAScript). ES6 supports object proxies, which provide
sufficiently rich semantics that we will be able to drop the get/set
requirement if you are targeting ES6 browsers. We are ready to add this to
Ember as soon as proxies land in popular browsers.

It's actually disappointing how much FUD is in this article. Competition is
great, but let's deal with facts.

~~~
creamyhorror
Your response is certainly fair. I just think it's kind of unfortunate that
the competition between JS frameworks has heated up so much of late - I've
seen a few potshots aimed at particular frameworks in the last year. I'm
tempted to wish that devs/maintainers would evolve their frameworks to occupy
distinct, separate niches so they wouldn't have to clash head-on, but that's
pretty utopian. (Not that such competition hasn't been happening in technology
and business from the very beginning.)

Misko Hevery wrote a bit about dirty checking in Angular on this StackOverflow
page linked from the submission:
[http://stackoverflow.com/questions/9682092/databinding-in-
an...](http://stackoverflow.com/questions/9682092/databinding-in-angularjs) I
think I've also seen a speed comparison/test involving Angular updating
(animating) many objects repeatedly. So I'm not sure how much of an issue
dirty-checking is in practice.

I'd like to see civil discussion between maintainers of JS MVC frameworks on
technical points, but the higher profile the forum, the higher the stakes and
the more mindshare there is to gain/lose. In which case I doubt civility would
endure. Still, it's better that people hear the cases laid out side-by-side
for each framework, which supplements the reviews given by independent
bloggers.

~~~
taligent
That StackOverflow post is hilarious. Who actually justifies slow performance
by quoting the limitations of humans ?

Here's a thought for that genius. What if I am showing a dynamic graph with
that table .. or I have complex rows .. or animations .. or a trillion other
use cases that he can't seem to envisage ? And people on slow computers or
mobile devices obviously aren't welcome.

Anyway here's a performance comparison: <http://jsperf.com/angular-vs-
knockout-vs-ember/82>

AngularJS does need some work. But so does every framework. Far better to be
honest and upfront about your faults so you don't waste your user's time.

~~~
CamShaft
That jsperf wasn't very accurate. The ember run loop holds all changes and
waits for the program to execute before writing to the dom, which is great.
Angular does this too by default unless you force it with $scope.$digest();
which is what they've got here. I edited it to show what's really happening
<http://jsperf.com/angular-vs-knockout-vs-ember/85>

------
chrixian
I don't get these kinds posts really maybe because I use Ember (most of the
time) but I also use Batman and Sencha Touch... I like that there is so much
going on with so many projects in this area of development because it's what
interests me...

And while I do feel some of your points aren't very accurate they are after
all your feelings and observations and I'm not 100% of the time in love with
the state of things either... and then I realize--

Ember is in its infancy and because I have faith in Tom and Yahuda, based on
their pre-Ember work and the way they go about moving Ember forward now, I
just know in my heart that I'm not wasting my time investing in Ember now and
for the future.

Thats a far different feeling from what I get when I use Angular.

------
krob
I couldn't really even get started the last time I used ember.js, their
website w/ their examples were all worthless since they kept updating their
code-base on literally a daily basis. I think I'm going to really take a
serious look at angularJS now.

~~~
tomdale
The API has been frozen and we're very close to our 1.0 release. The advantage
of changing APIs frequently before 1.0 is that you get a much better product.
I'd love it if you reconsider Ember.js and take another look now that it's
stable.

------
programminggeek
I've actually had a lot of success using Knockout doing some single page apps.
It seems Angular is similar?

~~~
taligent
I used Knockout for my last app and now that I am re-evaluating choices for a
new app it's amazing to see how far everything has come.

It seems that AngularJS/EmberJS are more complete frameworks (routing,
controllers, data fetching etc) and definitely seems like in either case your
app will be more modular and consistent.

However AngularJS seems to have cumbersome documentation (why do I care about
tests?) and far less helpful bindings e.g. conditionals. And EmberJS has
terrible handling for events e.g. calling a function when clicking a link.
However still learning so could be wrong on all parts.

------
abhishiv
How does an angular app deal with layouts and regions? I.e. Landing and
Loggedin Layout, both with totally different regions.

Marionette prefers Region managers, and I guess ember does it in a similar
way. What the angular way of doing it?

------
craftman
Beside the fact this guy is well know for his trolling ability, he is working
for Google, which is the company supporting the angular team.

~~~
craftman
My mistake, he actually has left Google:
<http://beust.com/weblog/2010/05/13/leaving-google/>

------
ebryn
Not sure why this is suddenly newsworthy, it's a pretty old and inaccurate
blog post.

------
camus
Angular is great but it has some problems , and i dont think one framework is
suitable for all use cases.

\- For an app that is form/list oriented ( LOB ) angularJS is the best, plays
very well with Bootstrap.

\- For an app where i need full control over object lifecycle(create custom
events , hook into object creating/destruction), when some animated transition
between views or states are needed, i would use BackboneJS or EmberJS, these
frameworks play well with require-js.

Iadapted a backbone showcase to angularJS , the whole app is opensourced on
github : <https://github.com/Mparaiso/silex-bookmarkly> and you can test the
app live here : <http://markme.alwaysdata.net/application> . My 2 cents : \-
AngularJS can get slow when using repeaters on large object lists , i never
had that problem with Backbone or Ember. \- Directives are tricky , and some
tricks( $timeout , element.ready , etc ... ) feel like you dont control
anything at all. \- since angularJS uses $ to namespace it's variable on
models , there is some model corruption happening while loading stuffs from
the server. \- i found using requireJS was a bit hard ,and having both AMD and
IOC containers is ugly ( but orthogonal ). \- AngularJS doesnt too much stuff
under the hood imho.

Overall , AngularJS is one of the best framework out there for html client
apps.

