« Back
in emberjs performance glimmer front-end read.
Visualizing Glimmer Performance

Visualizing Glimmer Performance.

Well Glimmer is here! Details are outlined in this blog post by Yehuda Katz (@wycats) and Matthew Beale (mixonic). This is of course very exciting news for the Ember.js community.

We knew Ember wasn't really great at performance but nothing made it more obvious when Ryan Florence (@ryanflorence) made a painful video showing the sluggishness of Ember compared to React and even Angular.


Visualizing Performance

Yeah like I said, it's hard to watch. The ember core team gave us the dbmonster to see what Glimmer was doing at https://dbmonster.firebaseapp.com/. Dbmonster is great but it doesn't really give us much to truly realize the boost that Glimmer provided. So I wanted to create something to truly showcase the performance boost between pre-glimmer and glimmer engine. During my prep for the Ember 2.0 and the Future of Web Development talk at the KW Front Edge meetup (http://www.meetup.com/The-Front-Edge/events/220468720/) I decided to do a simple comparison using the dbmonster project that was used to demonstrate the speed of Ember at https://dbmonster.firebaseapp.com/. So I cloned @wycat's dbmonster repo (https://github.com/wycats/dbmonster) And copied it and set it up with Ember 1.13.0-beta.2 and Ember 1.12.0


Results

Before Glimmer (Ember v1.12.0)

Things are pretty sad when running it in v1.12.0. Scrolling is near impossible, there seems to be a big delay between updates and numbers update very infrequently. Also the pop-up when hovering our texts barely show up.

Here's what that looks like:

After Glimmer (Ember v1.13.0-beta2)

Compared to 1.12, experience with Glimmer is very fluent here. Numbers update very frequently, scrolling works and you can actually see the hover sections on numbers.

Here's what glimmer magic looks like:

Comparison

Obviously the next thing to do is to put them side by side:

You can see the massive performance update in this comparison. The rate at which numbers update in Glimmer engine is astonishing compared to pre-glimmer.


In Conclusion

In order to get the performance boost, all I had to do was go into my bower.js file and modify the "ember": "1.12.0" line to get the performance boost. I had to make no updates or changes other than this line. This is the really impressive part is that everyone on Ember will be getting this performance boost essentially for free assuming they have been keeping up to date, and all the way to 1.12.0. Ember core team has been doing an amazing job at communicating the changes and outlining upgrade paths so it will be fairly easy for people to get these updates.

Looking forward to leveraging more of these performance improvements at our products at bidvine

comments powered by Disqus