Tag Archives: AngularJS

Why You Should Never Again do a Scrollable List with ng-repeat

Anybody who’s ever done a long, scrollable list of items in a web interface knows that this can absolutely kill performance of the whole page, let alone the scrolling itself. People blame tools like Angular’s `ng-repeat` for performance problems, but the problem isn’t the tools: it’s just that they make it so damn easy to do things… you should not do. Performance of your page is inversely proportional to the DOM count, and a massive list of items may square or cube the number of elements in the interface.

We do all kinds of workarounds to deal with this: pagination, “infinite” scroll (which is badly misnamed, but I digress), etc. But there’s now a much easier, cleaner way to have as many items as you want, without penalty: don’t create elements for all the items in your list. Just however many will fit in the window, plus two or so. And recycle them into whichever position your user is scrolling in. (It’s Green!™) Conceptually, it’s very simple. Implementation-wise… most of us would like someone else to do the heavy lifting.

I first saw this approach mentioned in the Sencha Labs post about their “FastBook” experiment, in which they called it an ‘Infinite List’. Thereafter, I was surprised I hadn’t seen that approach adopted elsewhere in JavascriptLand soon after, and am sad I never got around to trying to build one myself. (Maybe someone else did. I missed it. Please share other implementations in the comments!)

But now, the Ionic UI framework has an Angular directive for this, which they call the `collection-repeat`. You. Must. Use. This. In Ionic, out of Ionic, whatever. And hack it, port it to other frameworks, tweak it, extend it, and just generally make sure that you never do long lists with naiive ng-repeat… ever again.

Tagged , , , , ,

Why I’ve stopped doing single-line-define-and-assign on Angular $scope

I’ve been using Angular for all of my rapid-prototyping work for almost three years now. I’m very comfortable with the Angular idiom. But there’s one piece of it that I’ve entirely abandoned as bad hygiene and broken functionality (at least when mixed with ‘function statements’): the ‘single-line-define-and-assign’ pattern for variables and functions we want to expose via Angular’s $scope:

$scope.myVar = 12345;
$scope.myFunction = function () {/* do stuff */};

Instead, I do it like this:

var myVar = 12345;
function myFunction() {
  /* do stuff */

$scope.myVar = myVar;
$scope.myFunction = myFunction;

<screaming ensues> I know, I know. “Ur doin’ it wrong!” But read on, and scream after.

Continue reading

Tagged , ,

Directives from Scratch: Slides from AngularJS DC Meetup

You can find the associated (poorly-documented) demo files on github. And here are the slides from my previous ‘From Scratch’ Meetup, which was an introduction to the rest of Angular.

Tagged , , , , , ,

Slides: “I’m Postal For Promises in Angular”, delivered at NG-Conf 2014

(I’m a text guy myself, but if anybody prefers to absorb content through audio/video, you can catch this presentation on YouTube.)

This presentation is a high-level introduction to promises, with some additional details related to Angular. But if you’d like deep-dive training on the structure of Promises, and building your own, see my previous post, with slides from a two-hour hands-on training.

Tagged , , ,