Tag Archives: Javascript

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 , , ,

Angular from Scratch: Slides from AngularJS Meetup DC

Thanks to all who attended! Thanks to Leigh Frampton for organizing and to LearningObjects (and Optoro :-)) for hosting. Demo files available to clone here.

Tagged , , , , , ,

Promises, Promises: Mastering Async I/O in Javascript with the Promise Pattern

This definitely deserves a full article. The Promise pattern can fundamentally alter our async code, making it elegant, declarative, and highly functional. But for now, here are just the slides from my recent Meetup presentation in Bangalore:

Tagged , , ,

First (?!) Real Angular.js Book Hitting the Streets Tomorrow

I’d heard rumors of such things, but while looking at some other technical books tonight, noticed that O’Reilly is imminently publishing “AngularJS”, by Brad Green & Shyam Seshadri. Congrats, guys! And congrats, Angular team. Angular has always been a great product, but getting books out about it is a big deal. Devs will follow.

According to Amazon, the paperback isn’t “published” until tomorrow, but the Kindle edition has been out for weeks! Where was I???

Tagged , ,

Vega: the Answer To My DataViz Prayers?

The hot new thing in my office today is Vega, a library and “visualization grammar” for making D3 more declarative and potentially easier to use. What rocks my world about it is the ability to render to either SVG or Canvas. You can see that in action on the Vega Live Editor. Canvas is going to be much more efficient for complex visualizations, provided you don’t mind that browser-zoom won’t be all vector-iffic.

I had largely been sticking with HighCharts for standard visualization types that don’t require fancy time-series animation or major style hacking. This may finally move me to D3 full-time, at least once we have a richer library of default configuration objects for those kinds of charts.

Tagged , , , ,

The Reports of WebSQL’s Death Have Been Greatly Exaggerated

Every time I poke around the interwebs looking for docs on various forms of offline storage, I find folks saying that WebSQL is ‘dead’, or more often: ‘deprecated’. Not so. It’s just that every browser that implemented WebSQL used SQLite, so work on a formal standard stopped:

The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.

Continue reading

Tagged , , , ,

Angular vs. Ember: Does (Code) Beauty Matter?

I never think about beauty. I think only how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong. 

-Richard Buckminster Fuller

For some reason, this quote immediately made me think of Angular vs. Ember, and the debate about inline templates. Have a look at the template (let alone the HTML output) of an Ember application, and then at the same for an Angular application. One of them is elegant, declarative and efficient; the other… not. Does that make the ugly one ‘wrong’? It sure seems strongly suggestive. 🙂

Tagged , , , ,