Angular2 Databinding is Fast!

I’ve been working with the Angular2 alpha ever since ng-conf 2015, and it has been pretty awesome to see how the framework is shaping up. I’ll be the first to admit that the bleeding edge tax is high, but it has been worth it to see just how powerful the next version of Angular is going to be.

The databinding system in Angular2 is so much better than the previous version that it is hard to talk about it in the abstract. I could go into a bunch of boring technical details, but I think seeing is believing.

The Setup

I wanted to see just how fast the new data binding system was, so I thought… why not animate a bunch of elements using nothing but databinding.

<table class="table table-striped table-condensed table-floating">
    <tbody>
        <tr *ng-for="#row of statusBoard">
            <td *ng-for="#col of row" [style.top]="col.top" [style.left]="col.left">&nbsp;</td>
        </tr>
    </tbody>
</table>

If you aren’t familiar with the syntax, don’t worry, basically I am using a nested repeater to create a bunch of rows and columns, and then data binding their position on the page.

The Code

GitHub Repo

Under the hood, I am using requestAnimationFrame to modify their positions as quickly as I possibly can. The code is long and boring, but the relevant bits are here:

updateBoard(elapsedMilliseconds) {
    var elapsedSeconds = new TimeSpan(elapsedMilliseconds - this._lastStep).totalSeconds;
    this._lastStep = elapsedMilliseconds;

    for (var row = 0; row < dimensions.rows; row++) {
        for (var col = 0; col < dimensions.cols; col++) {
            this.statusBoard[row][col].move(elapsedSeconds, this._config.bounds);
        }
    }

    requestAnimationFrame(this.updateBoard.bind(this));
}

The Result?

Well… see for yourself.

[youtube http://www.youtube.com/watch?v=gubiqyi9iTM]