Ever since I saw this React demo, I’ve been looking to reimplement it in Ember to see how the different approach to re-rendering DOM elements would affect performance.
I finally got to do just that. There are two versions: a demo that uses Ember 1.12.0, and the same demo using Ember Canary. I have embedded the original React demo there to allow for quick eye-balling of performance when doing the same operations using different views. The complete source code for the demo is on GitHub.
Points of interest:
If you click on “Add Many Items”, you’ll get 1000 elements added to the page. You can see the difference between Ember 1.12.0 and React when dragging the width slider of any item while there are a 1000 other elements on the page. Ember works much smoother here, which is not at all surprising given its 2-way bindings vs React’s diffing.
React shows better performance when adding and removing elements.
To my surprise, Ember Canary shows worse performance in all possible respects in this demo. For each view, I first add many items, then drag the width slider of any of them to eye-ball the lag. After that I remove a few elements individually, then click on “Remove All Items”. After having done that three times, I get all of the timings filled into the table on the page.
Here’s the table for Ember 1.12.0. (Note: the timings are not 100% accurate, most of them are more optimistic than the perceived performance).
And here’s the one for Ember Canary:
Moreover, dragging the width slider is noticeably more sluggish with Canary.
With that, I have a few questions:
Does Ember Canary show worse performance due to it being an as of yet unstable branch? Or is it something I’m doing wrong in my code that could cause additional overhead, esp. in how Canary compares to 1.12.0?
Where can I find benchmarks demonstrating the use cases where Glimmer shows superior performance compared to Ember 1.12.0?
I would greatly appreciate it if someone knowledgeable in Ember’s internals could point out the biggest contributors to Ember’s bigger overhead in this demo.
Disclaimer: I’m an Ember newbie, been learning it for the last few days. I don’t know of any feature flags or optimizations that could be turned on to speed things up a bit for Ember. I tried to describe everything there is to know about this demo in the project’s Readme.