Comparing Ember and Angular
benlesh.com
benlesh.com
These costs are not as small as you might expect. The performance tests I put on the Mithril ( http://lhorie.github.io/mithril ) site illustrate this problem. I don't have Ember there, but if anyone more familiar with it would like to contribute (the rendering test is really simple), that would be most welcome.
There's another independent test here ( http://jsperf.com/angular-vs-knockout-vs-ember/292 ), which actually surprised me.
Sure one could argue that Angular has filters or whatever, but hey with Mithril you can express templating things that you can't with Angular (e.g. tables with nested loops, or w/ for-else constructs), so it's not really a apples to apple trucks comparison. With an order of magnitude more code, one has to wonder how much of that extra code is more functionality and how much is just bloat.
function render() { eval("(function () {}());"); }
and function render() { (function () {}()); }
These are going to run at much different speeds because one involves parsing multiple times while the other only needs to be parsed once. The tradeoff is some complexity (though there's also more flexibility too). <ul class="foo">
<li data-ng-repeat="item in items">
{{item.x}}
</li>
</ul>
m("ul.foo", [
items.map(function (item) {
m("li", item.x);
});
]);Sorry but that is almost the archetypal FUD sentence of the 'micro framework'. And the more you analyse the 'lots of code must = bloat' sentiment, the more ludicrous it becomes.
Look at the docs. If you see functionality in Angular that you think is unnecessary then file an issue, or write a blog post explaining the alternative approach. Please don't spread lazy FUD like this, it helps nobody.
There's also a reasonable amount of docs on the main site about the approaches that I do propose for various aspects of the MVC stack (e.g. see templating, components, etc).
I'm not saying more code is always necessarily bloat, but the correlation between code size and bloatedness does exist, whether you like it or not. I think what is ludicrous is to assume that all of the organically grown code over the years is somehow made up of only useful harmonious features.
Off the top of my head, I could immediately think of angular's directive system, and $scope as things that are probably far more complex than they should be, but these aren't exactly things you can "file an issue" for. So I did the next best thing and scratched my own itch.
You need to insert m.redraw() in the loop to make the comparison apples-to-apples. My test shows it is as 3x faster, not 100x which is completely implausible.
With that being said, if there's something there that is wrong that I'm not seeing, I'd be happy to hear it, as I am skeptical about the number as well.
redraw() is debounced. m.redraw() is not. The test doesn't redraw every loop, it redraws every 16ms.
You need to call m.redraw() in the loop to get an apples to apple comparison.
Edit: Also your post redraw hook looks really buggy. It can run before the redraw actually happens.
I had a feeling there was something fishy about the number but I couldn't quite put my finger on it. Thanks! :)
PS: and thanks for catching that post redraw hook issue; I'll add a fix for it.
how much code the browser needs to parse and execute on every page load
The caveat being that that code only needs to be parsed and executed once in a single page application. weight of execution payloads across operations in your app
Presumably this cost is providing value to the developer in terms of reduced development time, reduced complexity, or improved correctness. You shouldn't typically incur significant wasted cost in execution, just a selection of tradeoff. Besides, rendering to DOM is still the longest tentpole by far compared to microseconds for JS execution.EDIT: With regards to the "independent test," that is in no way a realistic use case. You would never add items to the DOM individually when you're in that tight of a loop. You would instead build up a cache and write once. The only thing of consequence that is being measured in that benchmark is each framework's DOM insertion speed.
Sure, if you don't consider users that open lots of tabs, or users that close their browsers periodically (e.g. mobile).
>> Presumably this cost is providing value to the developer in terms of reduced development time, reduced complexity, or improved correctness. You shouldn't typically incur significant wasted cost in execution
Ideally that would be the case, but from my Angular experience, it's unfortunately not always so clear cut (e.g. filter caching is a good example of time wasted in refactoring for performance reasons)
>> You would never add items to the DOM individually
I was under the impression that this is more or less what everyone was criticizing about Backbone rendering a few months ago when that Om article came out.
Though, in regards to the "Angular is backed by Google" comment, while they don't actually "back Ember" in the same way Google "backs Angular", it seems that a ton of large companies are also invested in Ember (http://emberjs.com/ember-users/)!
And, I know the Ember folks are really proud of the community they've built as well. I theorize that Ember's lack of a single corporate backer is what has enabled its incredible community to flourish.
* Yahoo
* Square
* Vine
* NBC News (front page)
* Netflix (real time tools)[1]
* Zendesk
* Groupon
* Twitch
* CodeSchool
* Urbanspoon
* Discourse
* TravisCI
* Ghost
Angular: * DoubleClick
* MSNBC (front page)
* BBC [2]
* The Guardian [3]
* Huffington Post [4]
* Udacity [5]
* Desk.com [6]
* Plunker
Please reply if you know more, would love to build out a real census of who's using what[1] - https://twitter.com/ebryn/status/433402427979493377
[2] - http://www.bbc.co.uk/blogs/internet/posts/Building-BBC-Live
[3] - https://github.com/guardian/guardian.github.com/blob/master/...
[4] - http://www.huffingtonpost.com/john-pavley/huffpost-content-m...
[5] - http://www.quora.com/Udacity/What-is-Udacitys-technology-sta...
* MSNBC
* Plunker
https://docs.google.com/document/d/1ZWYq3gwkPTzUiyqr4x_asSj8...
I can see that point, I think that strengthens Ember's position in my view.
As an aside - this is something I've hardped on before, but I just really think it is not helpful to anyone to use examples whose names are so abstract:
ng-click="foo = 'bar'; blah(foo + bar + '!!!); shazbot = nanoo && nanoo"
This is meant as an example of something you should not do. But it's nonsense - it's quotes and semicolons separated by meaningless names. Of course that is the point, but in turn that is my point - give a better example, one that models something one may do in the real world but should not, so that the person reading the example actually understands what not to do. Instead of that, something like this: ng-click="shoppingCartId = 52; initCart(52); var myShop = new Shop();"
People know what shopping carts are. "shazbot" and "nanoo nanoo" are whimsical references to an old sitcom. Entertaining to the author, perhaps, but not helpful.> Ember's routing is just flat out better than anything else I've seen out there.
I'm the lead developer of ui-router. I've read everything I can about Ember's router, and I just don't get it. Barring some boilerplate-saving conventions (we don't offer any, but we do offer APIs that let you roll your own pretty easily), could someone explain to me what the big deal is?
Also, re: the score-keeping thread, I know Angular is used extensively within the BBC.
I can definitely see that ui-router is a valuable component and it's very powerful, but perhaps I have not achieved the zen of it yet.
If you worry that much about difficulty of maintenance because someone is calling their controller SomethingCtrl and another one SomethingController, you can choose one and enforce it during code reviews.
I guess it's down to whether you prefer doing things your own way or having to follow their structure.
Also not having some random divs popping up in your html is nice.
Feel like I should try out Ember over the weekend.
The HTML mustache style puts me off though I have to admit!
The {{}} is in both frameworks. I hate it, because it doesn't go well with the template rendering in a lot of server side template languages.
The one thing we've observed that he touches on in mentioning that Angular is backed by Google but doesn't really go into as much as he might, is that it feels like Angular has more momentum generally in the developer community - more posts on StackOverflow and more Git activity, plus more job ads.
If you're in it for the long haul that may be a significant factor.
> "The project I'm working on at Netflix is extremely ambitious, ... solving pretty interesting problems in Ember, that are actually a lot more complicated than problems I solved in previous Angular projects"
This is a key point that I keep running into. It seems that more complicated applications can benefit from Ember's very opinionated nature and more backbone-like structure...
I could be totally off base, as I've not created a large-scale app in either of these frameworks (yet).
My personal view is that we could get rid of every single problem we have with Ember if we replaced it with Angular... And instead have a whole new set of Angular problems.
This is true, however:
- Angular is considered by both it's supporters and detractors to be very complex and it's documentation a little difficult. I've used Angular for some older production projects, and used ractive.js about 5x more newer projects, and I've searched/asked more questions for Angular.
- A lot of people think Google, rather than Getangular LLC, created Angular. I've also met a lot of people who think Angular is popular inside Google, or that Angular is used for Google+, both of which are incorrect.
The fact Ember is so popular despite the 'by Google' misconception around Angular actually makes me quite confident about Ember.
My Ember knowledge, BTW is limited, I went angular -> ractive.js, so there may be ember downsides I'm not aware of. Ember's new htmlbars templating looks really clean though, so I'm pretty excited to try ember once it's the default.
1. The Angular website itself states that Angular is "by Google"
2. On many occasions, Misko Hevery has described how he created Angular while working at Google.
3. This page itself is the only real reference to Getangular LLC that shows up in Google search results.
Consequently, I'm inclined to think that you're mixing up your story.
2. Getangular was an online JSON storage service where Misko worked. AngularJS was announced on getangular.com (which was a product, not a project), and copyrighted Angular / BRAT Tech. LLC.
getangular's website: http://web.archive.org/web/20100413141437/http://getangular....
http://misko.hevery.com/2009/09/28/hello-world-angular-is-he... (original angularjs announcement, which mentions getangular.com)
You might also want to check out this early reviews of getangular's product: http://www.niden.net/2009/12/world-with-part-1-reviewhow-to....
http://en.wikipedia.org/wiki/AngularJS#Development_history
Or just ask Misko, Brian or any of the other Angular developers.
3. Search for 'Angular / BRAT Tech. LLC' for additional references
I agree with a lot of the points made in this Series, a really good write up.
In Ember I feel I have to write a bit more boilerplate around dealing with collections, (i.e. sorting).
Can't wait for HTMLBars, the script tags littered around the dom are just not very nice, and I find myself using :last-of-type CSS selectors and the likes a lot.
I also think that the directives in angular just work nicer than the components in ember, because there is more control over what's bound into their scope.
Ember's approach to structure is great though, and the router is really nice to work with, much much nicer than ui-router.
Both are great frameworks though, and I really appreciate the work of both teams to give me great tools like this to work with.
I personally prefer the configuration over conventions thing,because I dont like magics,but I understand that kind of pragmatism.
Does that hold any water?
For non-trivial stuff, I'm sure people need a bunch more extras, third party libraries and so on. But it's a pretty major bonus for Angular that you can use it productively either for a full SPA, or for the kind of trivialities that one typically duct-tapes together with jquery. The small-ish size (I know, not THAT small) is part of that, but so is the flexible and modular design.
Not that I dislike Ember - it's very nice. And I am in the fortunate position at the moment where page-load size is not a huge concern (or rather, a battle that has already been lost before I clock in).
I used backbone.js for days where as something I could've done within hours in jQuery and ajax with Python flask running in the background.
Not only that you need build automation, dependency manager, phantomjs static html renderer...it's really more than I can deal with and feel that this extra overhead doesn't really bring much to the table more like work for work itself is created to boost the credibility of such work.
Once you get past a certain number of developers, or project size, are framework really shines.
Rendering pages in javascript just wastes the user's computing resources (and opens them up to nice vulns) and prevents search engines from indexing your content.
All sarcasm aside, plain HTML has plenty of great uses, but just because you don't see a reason for client-side apps does not mean that they don't exist.
This is an aspect of the HTML vs JS rendered page debate I’m still trying to wrap my head around. I understand really large and complex applications need libraries like Angular, Ember, React, and the like to render their pages with JS.
But what is so backwards and old-school about rendering HTML server side and then manipulating the HTML client side with a thin layer of JS and AJAX?
It feels as if the debate is between plain vanilla HTML pages and highly complex JS rendering, without any middle ground and integrating the benefits of both.
EDIT: Thank you for the responses. I’m genuinely trying to understand the pro and cons – of not just each framework – but of the methodologies in general, and your answers help.
Eventually as these side effects pile up, jQuery by itself becomes a mess. You have a ton of checks and complex behaviors after each user event.
Or I can provide some structure on the front end so that I can model my data in a reasonable way and have the DOM respond based on changes to that model. Obviously for stuff thats mostly static, server-side rendering is better. But when you're displaying stuff that includes complex relationships and behaviors, modeling it on the client side becomes an important part of maintainability. This doesn't have to be complicated. Backbone is certainly not complicated. But it is the best option if you want to have complex UI behavior tied to an underlying model and need responsive UI feedback.
Angular has been a breath of fresh air in comparison. It significantly reduces complexity. It's also easy to add to an existing project, even one with server-side templates. At this point, however, I consider the use of jQuery and server templates an antipattern at worst, and a necessary evil for some types of performance optimizations at best.
Just because something can be done as a client-side app doesn't mean that you need to. It might be old fashion, but most of the websites out there would be just fine with forms and links. Javascript can be added later if you think it adds value.
Of cause it doesn't help that I really dislike JavaScript, with it's stupid callbacks and could we just collectively decided to drop the anonymous functions? It's not going to hurt anyone if we agreed to define a function and name it before using it and it would be so much easier to read.
It is old fashioned. It's also backwards when it comes to mobile apps. Phones and tablets have lots of horsepower, but bandwidth is low and more importantly latency is high. I can almost buy that when you expand a menu the whole page reloads if it happens over Google Fiber and your server adds no latency, but when the roundtrip to the server takes 2-3 seconds, I am not using your app.
I will repeat: if you are running a mostly static website, HTML + HTTP is the way to go. There are still plenty of web apps that work just fine that way (basic CRUD mostly). However, there is a category of apps that are much better served by running client side with a well-defined API to the server. This provides you with a true MVC setup and makes for much cleaner code. Trying to put together a JavaScript driven app where you reload pages is something I have experienced quite a bit over the past decade. It's such a pain that it should not be attempted. Angular and friends make single page apps viable and much easier than the jQuery + HTML + Ajax apps.
I don't blame you for disliking JavaScript: it's an odd little language with some really bad parts. Perhaps try one of the other languages that compiles down to JS? I hear CoffeeScript is very nice.
I like as much separation as possible for letting the UI do the formatting and the backend just be an API. I'm not sure how this (not rendering in JS) would handle more complex scenarios such as SPAs.
Apps built with Angular or Ember have major issues with SEO. They'll have to resort to using something like PhantomJS to prerender their HTML. This is not a trivial bit of engineering.
http://bensmithett.com/server-rendered-react-components-in-r...
Edit: Very interesting read liked from there ... https://groups.google.com/forum/m/#!msg/reactjs/eUespJPdyas/...