Right now, it's "cool" to hate on AngularJS. This is unfortunate because AngularJS is an extremely powerful framework. Sure, it has some problems in the same way that no framework is perfect. But, once you dig into AngularJS and understand how it works, there are very few problems that can't be solved. Recently, one of my co-workers, Jonathan Rowny, published a ReactJS component called "Absolute Grid." To demonstrate my love for AngularJS (and to work on my AngularJS skills), I wanted to see if I could [mostly] re-create the component in AngularJS and achieve the same kind of performance that the ReactJS community likes to talk about.
Now, to be fair, I haven't recreated all aspects of the Absolute Grid component because I didn't want to put more than a weekend into it - eventually, there's a point of diminishing returns for pleasure in an exploration like this. But, there was definitely a sufficient amount of complexity here - I really had to stretch the way I think about AngularJS and about how I organize components.
The absolute grid creates a layout that is automatically sized to fit into its container. And, it updates that layout as the items in the collection are changed or zoomed. However, the grid doesn't "own" that functionality, it simply consumes it. The root controller, that owns the list, also owns the filtering and the zooming. This is an important separation of concerns because the grid can't know how those features (filtering and zooming) fit into the greater application. It only knows that it has to consume and respond to those changes.
Ultimately, the grid is just a repeater that stamps-out clones of the grid item content. Since the repeater needs to create data that is available to the content (such as the item reference), we can't use an isolate scope. Which also means that we can't use the fancy (and expensive) two-way data binding. This turns out to be a good constraint because isolate scope adds additional watchers (which we don't need) and forces us to think about treating the grid as a pure consumer.
The grid is too complex to really describe in detail, so I'll leave it up to you to explore the code below. Something like half of the code is dedicated to just the sortable nature of the grid.
Google Chrome definitely handles the performance better than Firefox. But, the bottleneck seems to be the animations (I'm using CSS3 transitions), not the AngularJS parts. I truly believe in the AngularJS framework for both its power and its relative simplicity (in terms of reasoning). I hope that people give it a fair chance and don't haphazardly jump from one framework to another.
Want to use code from this post? Check out the license.