Add trackBy for ng-repeat

[fesor]

This will prevent angular to rebuild DOM on every iteration

[NicholasBoll]

The ReactJS code has a 'key' which is the same thing as 'track by' in ReactJS.

L141 in react/app.js puts the key to the db.name.
https://github.com/ryanflorence/reactconf-2015-HYPE/blob/master/demos/01-dbmon/react/app.js#L141

So your first track by should actually be db.name.

From running a timeline in ReactJS and Angular versions, Angular now is faster than the React version. (~37%. Angular ~80ms render time per update, ReactJS ~110ms render time per update).

This makes sense because now both the Angular and ReactJS version do minimal DOM updates to react to changes. Both are resolving to text node updates which is very fast. But with the Angular version, the track by is giving Angular a hint as to what each row and cell represent. Angular has pre-computed the fastest way to update the DOM. React on the other hand has to rebuild the render tree and then diff to figure out the fastest way to update the DOM every change. Both versions create the same paint profile (about .14ms). This is still very impressive. It means that ReactJS can calculate minimum changes for about 5K DOM nodes in about 30ms.

Angular is spending time every $digest evaluating watches. React is spending every 'update' calculating diffs. There will be times that React with be faster and times where Angular will be faster. In a list, both Angular and react have to be given hints about optimizing lists (track by and key respectively). ReactJS has the advantage of allowing the developer to not think about most performance issues.

The take-away should be learn your framework and when performance becomes a bottleneck - use browser developer tools.

I'm creating a big-data grid and I've learn from this that React just cannot compete with Angular to display tabular data. When performance counts 16ms is your render cap (the magic number for 60 frames per second), React's virtual DOM does take long enough to matter in this case. You can optimize both Angular and React to limit respectively a $digest and an 'update' to be local to the grid and Angular will win.

But this pull request will not be accepted. Ryan has said if Angular was faster than React he may have to quit his job as a programmer: 20ccf5e

There are plenty of other things to take away from his video though that make ReactJS an awesome tool (not quite framework). Server rendering is a big one.