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.
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"> </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.
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));
}
Well… see for yourself.
Microsoft Azure and Amazon Web Services (AWS) are two of the most popular cloud platforms.…
Cloud management is difficult to do manually, especially if you work with multiple cloud…
Azure’s scalable infrastructure is often cited as one of the primary reasons why it's the…
https://www.youtube.com/watch?v=wDzCN0d8SeA Watch our "Unlocking the Power of AI in your Software Development Life Cycle (SDLC)"…
FinOps is a strategic approach to managing cloud costs. It combines financial management best practices…
Using Kubernetes with Azure combines the power of Kubernetes container orchestration and the cloud capabilities…
View Comments
Awesome.. A2 is shaping up to be amazing
Awesome.. A2 is shaping up to be amazing
@larsjeppesen:disqus - I am enjoying working with it so far. It certainly has some rough points, but that is to be expected in early alpha. The team seems to be working hard to take into account usability and is making efforts to smooth over those rough spots.
The bones are good though.
@larsjeppesen:disqus - I am enjoying working with it so far. It certainly has some rough points, but that is to be expected in early alpha. The team seems to be working hard to take into account usability and is making efforts to smooth over those rough spots.
The bones are good though.