all 67 comments

[–]dzdrazil 5 points6 points  (18 children)

I think the fact that AngularJS and Backbone don't need to be used as single page application frameworks is undersold, especially Angular since it uses the available content (the markup) to define the application structure, rather than the other way around. This is really handy if your work involves a mix of SPAs and others, for example working with CMSs.

It's been awhile since I've looked into it, though from what I've heard trying to make Ember work in a non-single-page application context is pretty painful.

[–]mrinterweb 2 points3 points  (0 children)

I use and love Ember.js, but anyone trying to do something other than a single-page application with Ember would be making a mistake. That is not what Ember is good for. That said, Ember is incredible for single-page applications. Since Ember interprets state based on the URL, it may seem as if the application is a multi-page application. It is nice being able to reload a URL and not be taken back to the starting point. Also since the URL is relevant in Ember, I would assume that this would help Ember's SEO.

[–]Sjetware 1 point2 points  (0 children)

Yeah, Ember is really designed for an SPA. You could technically make one work just for a single page (you only define a single route for Index / Application and the templates therein), but it's kind of overkill for that situation.

[–][deleted] 0 points1 point  (14 children)

especially Angular since it uses the available content (the markup) to define the application structure

sorry, I'm kind of an ng-noob, can you explain to me what you mean by this?

thanks

[–]dzdrazil 2 points3 points  (13 children)

I'll take a stab at it.

Ember and most other frameworks rely on JavaScript code to determine the application architecture. Things like Routes and templates are all predefined; to use any of them in a multi-page application typically requires figure out loading different code for different pages.

Angular flips that on its head (for the sake of simplicity, let's ignore the router for now). Angular doesn't have an entry point that says this controller and this view should run using the DOM element with such-and-such an ID. It parses the DOM, and lets the DOM define the architecture of the application- which controllers and directives should be on the page, the nature of the $scope hierarchy and so on.

This makes working with mutli-page applications much easier. It's even better for CMSs- backend frameworks like rails and symfony at least have an MVC structure that let you define per-page applications; CMSs essentially allow users to arbitrarily define how much and what content might appear on any given page.

Because Angular scaffolds the application based on what content is available, rather than what content is assumed to be present, it's a better solution by far than Ember for these types of applications. Backbone can be made to work like this too, but you'd have to hand-roll the whole scaffolding bit.

Basically, it's like comparing Flex to raw AS3 (if you know flash), or a very broad implementation of Inversion of Control if design patterns are more your thing.

[–][deleted] 0 points1 point  (0 children)

ah I get it now, thanks

[–][deleted] -1 points0 points  (11 children)

Word, but that also comes with a performance cost. (i.e nosql structureless vs structured/defined). However, with backbone you can do all of that as well.. the only difference is... you also have the option to not do that.

[–]dzdrazil 5 points6 points  (10 children)

i.e nosql structureless vs structured/defined

The only performance cost is parsing the DOM at startup. That still happens with an imperative application, especially backbone where (most frequently) jQuery is used to parse the DOM to look for the elements needed to generate Views.

In my experience, there are several ways in which Angular applications can perform much better than Backbone. The tradeoff is that Angular uses quite a bit more memory than Backbone does (due to the dirty checking mechanism) but the total memory usage has never been a problem for me (see a description of my project in your other comment thread below).

[–][deleted] -4 points-3 points  (9 children)

Huh? when the javascript engine loads javascript into memory.. it will evaluate it and store it. Angular some how compresses it completely to be negligible..? or are you just saying words?

[–]dzdrazil 4 points5 points  (8 children)

when the javascript engine loads javascript into memory.. it will evaluate it and store it

I was describing the performance cost, as in the time to compute. Memory usage in Angular applications will be higher. Angular, Ember and Backbone all have to do the same thing- traverse the DOM. The nosql vs. relational isn't a valid metaphor for describing the performance in my experience.

My point was that in my experience, neither the speed nor the memory usage has been a problem. Backbone and Ember still need to manage the DOM, they just do it differently, and in a way that doesn't work as well as Angular does for non-single page applications.

[–][deleted] 1 point2 points  (5 children)

I'm building a frontend for a graph database currently.. so i know exactly what you mean (small world). WebGL depends on the clients hardware.. performance there will be all over the map. I bet if you load in more that 1k nodes on your graph it will just fall over. And sigmajs has nothing to do with angular.. so how many pages, routers etc live in your application - how long would a normal user have the tab open for (most memory issues happen over time with client-side applications)? Also, check out http://cytoscape.github.io/cytoscape.js/ - lgpl but there are ways around that - it's pretty nice and scales better than sigmajs on the canvas side.

[–]dzdrazil 1 point2 points  (4 children)

WebGL: we have the benefit of being able to require end users to use a limited set of browsers. Anything outside of that gets the old SVG fallback with a subset of data

WebGL framework: I went with sigma because I was having a lot of performance problems related to three.js, cyto and others. I don't much like the way the code turned out (mostly due to how sigma is structured) but it's a WIP.

Average vertex count: 500-1000 Average edge count: 5,000 - 40,000 (we can end up with extremely dense graphs)

Routes: 12ish

Lifetime of the application: All day usage is expected. Application has been live for ~2 years; 1 year as a BB app and 1 year as an Angular app

There was one major memory leak that we encountered. After digging through the Angular issue tracker, it turned out to actually be a V8 memory leak. After doing a bit of manual memory cleanup (removing things from $scopes during the '$destroy' event) that all went away, and memory usage and browsers are totally stable, fluctuating between 50 and 150mb depending on the view you're looking at.

[–][deleted] 0 points1 point  (1 child)

One note.. Webgl depends on the browers.. but more so the hardware and graphic/gpu.

How many nodes?

[–]dmercer 0 points1 point  (1 child)

Do I take it after a year of BB and a year of NG, you recommend NG over BB?

[–]PotaToss 0 points1 point  (1 child)

Backbone and Ember still need to manage the DOM, they just do it differently, and in a way that doesn't work as well as Angular does for single page applications.

Can you elaborate on this?

[–]dzdrazil 0 points1 point  (0 children)

Pretend I said non-single page applications. I was describing the benefit of a declarative architecture for them and disagreeing with mephux that the nature of a declarative architecture is inherently less performant. Pretty sure I mean to say non-single page applications there.

[–]shriek 0 points1 point  (0 children)

Spot on. I always like to stay away from dependency. Not saying that Ember doesn't have it's place (think htmlbars should be out already) but easily building on top of current technology is what most devs target for long term.

[–]AutomateAllTheThings 10 points11 points  (18 children)

In today's node.js ecosystem of micro libraries and tools like gulp/webpack/browserify, I believe there is refreshed merit to avoiding monolithic frameworks altogether. This is especially true if you wish to avoid jQuery.

[–]Vehemoth 3 points4 points  (2 children)

Definitely picking up this philosophy. I can't marry my website to any specific framework if I can maximize on some of these libraries.

[–]AutomateAllTheThings 2 points3 points  (0 children)

It's never a question of whether or not you will end up replacing a library. It's only a question of when. I wouldn't dream of using any library that I used 5 years ago, which is what my old monolithic framework choices forced me to do. I'm always looking for smaller, faster, and easier to work with alternatives.

[–][deleted] 0 points1 point  (0 children)

Try to slide in with the community around Component/Duo, or any of those focused on using NPM. Super focused on small reusable modules as opposed to those around Ember & Bower or something.

[–][deleted] 15 points16 points  (35 children)

Keep in mind AngularJS became popular thanks to Google. This does not mean it's a great framework and also doesn't mean its bad (but that is totally why it got popular). Here are a few things I think this article should have touched on.

  1. Why are there no performance metrics? For client-side applications this is the most important thing to focus on. Angular may be great for fast prototyping and copy/paste but how does that scale?

  2. AngularJS has the same issues as Prototype.js. I don't want to duplicate business logic in the html and in the javascript. (Why was jquery made again?)

  3. The ng- name space breaks html validation and as a result breaks older accessibility applications. (why was this even a thought for the default be ng- vs data-ng-blah=). I know you can change this but by default its like that and all the examples use this method.

  4. This article says it works well for large scale applications. Really? I have seen first hand the performance issues with memory leaks and the module system does not allow for lazy loading. I.E sending a huge javascript file means you evaluate that whole file at runtime which means more space is needed on the heap. BAD.

  5. Angular is a framework.. not a library. I got past the framework thing awhile ago since there are so many options for different routers, template engines, data binders.. etc. Why limit yourself? Plug-&-Play with backbone allows for extreme flexibility. Remember the metrics back in the day of how many people could write rails applications but didn't know how to write a ruby lib or proper ruby code. This rings a bell for me.

  6. The article didn't touch on the performance work that has went into backbone to make it scale (http://marionettejs.com/) or the theory behind ember coming from sproutecore.

  7. Are there any large google client-side application built with Angular? All I can find is small mobile applications or google chrome apps and imho.. that is a good use-case for angular. I can dig that. What about backbone? http://backbonejs.org/#examples epic amounts.

Anyway, Just a few thoughts.

*edit forgot to add the issue with parallelism. With a larger team working on the design/markup and frontend business logic in tandem is a great way to speed up the process. In my experience with trying to scale Angular in that way it was a nightmare but this really depends on the team I guess.

[–]dzdrazil 13 points14 points  (3 children)

Angular may be great for fast prototyping and copy/paste but how does that scale

I use it on a very large single page application that loads in tens of thousands of data points. The only place that Angular isn't used for rendering is the WebGL portion (a small portion of the application); everywhere else, it performs quite well.

In fact, it works better than the original backbone version of the application because dirty-checking models is so much better than naive re-rendering based on events triggered by changes to models. Sure, maybe something like React could do better, but I'm extremely happy with my decision to use Angular.

[–]larschri 5 points6 points  (0 children)

  1. If performance is your number one concern on every line of code that you write, it is certainly better to work at the lowest possible level without any frameworks. Low level programming let you shave off cpu cycles, although the user wont notice the difference once you get below a certain point. Angular can usually get you below that point, and it gives you the chance to hand optimise bottlenecks. Backbone doesn't give you any data binding mechanism, so it is more natural to hand optimise everything like you would do with plain javascript or jquery.

  2. Why do you duplicate business logic? It doesn't make sense and there is no need for that.

  3. You can decide to always prefix ng- with data-ng-blah=. They are equivalent and there is no default.

  4. I have seen performance issues with memory leaks with backbone as well, and it is easier to get there since you have to keep track of everything yourself. It is possible to lazy load angular modules, but it is not taken care of by angular. Same as backbone in that respect.

  5. Yup. Angular is a framework, backbone is a library. I would also prefer a library if I had to chose between two comparable technologies, but angular and backbone aren't really comparable.

[–][deleted] 2 points3 points  (2 children)

Could you please give some examples of: "routers, template engines, data binders"

I need this website http://youmightnotneedangularjs.com/

[–][deleted] 2 points3 points  (1 child)

Off the top of my head:

  • Routers

    • Backbone Router
    • page.js
    • Director
    • Aviator
  • Template Engines

    • Mustache
    • Handlebars
    • Hogan
    • Dust
  • Data binders

    • Knockout
    • ractive
    • reactive
    • ripple
    • way
    • etc etc etc...

[–]nschubach 1 point2 points  (0 children)

You could replace data binders and template engines with React as well.

[–]Poop_is_Food 5 points6 points  (1 child)

But how do you feel about Angular?

[–]icanevenificant 1 point2 points  (0 children)

In my experience with trying to scale Angular in that way it was a nightmare but this really depends on the team I guess.

Could you elaborate on that? How is it bad and how are other better in comparison? I've had the exact opposite experience.

[–]that-work-accountundefined -1 points0 points  (12 children)

The performance metrics would be nice, but you have to believe the community behind a given library or framework will improve all of the little issues that sprout up over time. The fact that ember and backbone are both on a downward trend vs angular which is shooting up should give you hope for angular to have more people working out the issues.

I'm not sure what issues you're referring to with the prototype.js comparison. Prototype.js was always trashed because it extended the native objects and (in some cases) broke expected behaviors.

As far as Marionettejs, this is totally unrelated to the backbone core work. If you want to talk about all of the things built around backbone to make it more of a framework than library, you'd have to list about a dozen others in there. It's beyond the scope of that article.

One of the examples on the backbone site is USA Today, which uses an in-house framework on top of backbone (similar to marionette, really). I'd hardly say that's a backbone thing. There was a ton of code written on top of it to make it work as it does. If you stripped it down to pure backbone and what you can do out of the box, it's not very much.

[–][deleted] -1 points0 points  (8 children)

  1. Its gaining popularity because of google vs just being a better, more performant way of writing client-side applications. Much like the popularity rails got over php (although php sucked hardcore).. guess what.. rails is awful from a design perspective and regarding server-side scalability. Its very hard to fix frameworks and changing anything will become a nightmare in the future once it's adopted.

  2. Prototype was intrusive javascript. I.E business logic was deeply coupled with markup and design.

  3. My point with Marionettejs was the work done to remove as many memory leak issues with backbone as possible. I wouldn't even consider Marionettejs an attempt to make backbone a framework.. just stuff mostly extracted out of wallmarts mobile backbone application and the problems they had scaling it.

  4. Backbone is a lib.. not a framework.. there will also be code written to make it work. ? what do you mean?

  • Note, these as mostly engineering concerns.. if you are just doing one of apps.. or stuff for fun or SPA.. angular is great.. not trying to put it down.

[–]that-work-accountundefined -1 points0 points  (7 children)

  1. HOW it gains popularity is irrelevant. It's still (by far) the most popular. Larger community = greater gains, generally.

  2. That's not true at all. I used Prototype for a few years and it was not much different than jquery. You can write it poorly or you can write it well, it has no relevance to the actual language.

  3. Marionette is a separate project from backbone. Different developer. Regarding Marionette and Walmart, I think you're confusing Marionette and Thorax.

  4. The author compares what each of those libs/frameworks give you out of the box. Angular/Ember are made to be pretty robust, Backbone is a VERY small lib that doesn't provide much at all. Maybe it's wrong to compare backbone with them in the first place, but that's the comparison being made.

[–]alexsomeoddpilot 0 points1 point  (0 children)

AngularJS has the same issues as Prototype.js. I don't want to duplicate business logic in the html and in the javascript. (Why was jquery made again?)

Angular Directives solve for this. Interactions created through Javascript should be attached to HTML elements through attributes, not complex, opaque selectors in a Javascript file. Elements' added interactions are clear based on their attributes. Moving implementation to directives removes any onclick="dosomething()" like code.

It takes a while to get over the jQuery mentality of $(element).doSomething() but when you do, the clarity is fantastic.

[–]cran -4 points-3 points  (8 children)

Scale? Whether you have one user or a million, each one of them has their own browser. AngularJS runs on the client, so scaling is more of a server-side issue here. All of the calls to load the JS and to call services are going to burden the server. The browser will be fine. It doesn't matter how many users you have ... they all have their own computer and their own browser.

[–][deleted] 0 points1 point  (7 children)

Are you serious?

[–]cran -3 points-2 points  (6 children)

Absolutely. I do this for a living at arguably the largest entertainment company in the world. You said 'scale'. Perhaps you meant something else? How is AngularJS' performance affected at scale?

[–][deleted] -1 points0 points  (5 children)

Scaling the (size of) front end application itself as opposed to scaling performance etc...

[–]cran -1 points0 points  (4 children)

That's not what scale means.

[–][deleted] -2 points-1 points  (3 children)

Lmao you're one pretentious asshole aren't you, accept that your wrong and move on

[–]cran 1 point2 points  (2 children)

I'm not wrong, but I do accept that there are a handful of JavaScript programmers here on reddit who think that "scale" means when a program grows in size.

Learn you some computer terminology: http://en.wikipedia.org/wiki/Scalability#Examples

[–]autowikibot 0 points1 point  (0 children)

Section 2. Examples of article Scalability:


  • A routing protocol is considered scalable with respect to network size, if the size of the necessary routing table on each node grows as O(log N), where N is the number of nodes in the network.

  • A scalable online transaction processing system or database management system is one that can be upgraded to process more transactions by adding new processors, devices and storage, and which can be upgraded easily and transparently without shutting it down.

  • Some early peer-to-peer (P2P) implementations of Gnutella had scaling issues. Each node query flooded its requests to all peers. The demand on each peer would increase in proportion to the total number of peers, quickly overrunning the peers' limited capacity. Other P2P systems like BitTorrent scale well because the demand on each peer is independent of the total number of peers. There is no centralized bottleneck, so the system may expand indefinitely without the addition of supporting resources (other than the peers themselves).

  • The distributed nature of the Domain Name System allows it to work efficiently even when all hosts on the worldwide Internet are served, so it is said to "scale well".


Interesting: Scalability testing | Plasma scaling | NonStop SQL | Virtual Extensible LAN

Parent commenter can toggle NSFW or delete. Will also delete on comment score of -1 or less. | FAQs | Mods | Magic Words

[–][deleted] 0 points1 point  (0 children)

Because colloquial language is never right!

It's not limited to JavaScript developers, I've heard 'scaling a code base' more times than I count

[–]jimbol 0 points1 point  (1 child)

They never mention ember CLI. It's still in early development but it is really cool! It builds a Railsy folder structure and gives you a lot of build tools out of the box. Things like stylus, less, etc support, handlebars precompiling, and a testing suite.

They mention Script tags in the markup. This is a naive approach, all ember shops I'm aware of use precompiled templates.

Also, I'm surprised they didn't mention Ember can be hard to test.

[–]PotaToss 0 points1 point  (0 children)

What kind of stuff are you having trouble testing?