Like many of the developers in the world, when I heard about AngularJS for the first time I was very much fascinated by the idea and its seems-to-be easy implementation.
However, unfortunately, like some of the same developers in the world, my enthusiasm quickly faded out when the team decided to give it a go for a client project.
The first problem we encountered was lack of information of how to implement it for, yes, IE7, at that time. Some may argue that it is our own fault that we still work for this ancient beast but, if the client still want it in their pen what choice do we have?
So we scoured the internet looking for the solution and tried a few options and finally made it work in the way we wanted it to.
After that we were all set to build a sort of wizard form with some chained lists that update themselves when the parent is updated.
Everything seemed to be working fine except some ups and downs we had while getting ourselves familiar to AngularJS, and finally we got our AngularJS powered wizard (form) to go. It felt great… so we ran it on IE7.
It worked! But the start up of the page was painfully slow. I could count some seconds before the page was fully initialised.
I still quite like the idea of AngularJS way of data binding directly on HTML. So I thought I may give it another go to see whether the IE7 problem we had was just my pure bad coding.
I knew on IE7 whatever I do the performance would be lower than the latest browsers but wanted to see how low it really is compared to other browsers including its own descendants IE8 and IE9.
I found some interesting framework performance tests like this one from Paul Hammant’s blog and Angular VS Knockout VS Ember on jsperf.com. The latter one gave me the idea to use jsperf.com to measure the performance between browsers.
I downloaded a simple todo list sample using AngularJS and RequireJS from todomvc.com (this is a very useful site if you want to see how all those different frameworks work to achieve one same thing) and modified it to use on jsperf.com. You can see my test page here and the modified todo list on my github repository.
I created three separate virtual machines with exactly the same system setting, one with IE7 on Windows XP, IE8 on Windows XP, and the last one with IE9, Chrome and Firefox on Windows7 as you cannot have IE9 on Windows XP. Safari is used in this test on Mac OSX.
And here is the result and… Safari did so amazingly well here but it wasn’t really a fair comparison as it was not running on the same virtual machine setting so I will ignore Safari on this table.
The x-axis is the number of operations per second so the higher the better. And from top to bottom it’s Chrome, Firefox, IE7, IE8, IE9, and finally Safari, in the Alphabetical order.
I expected Google Chrome would top the table since AngularJS is from Google but it was Firefox that did the best.
Not so surprisingly, all IEs didn’t perform very well, but surprisingly even IE9 could do only a third of Chrome’s performance. Another surprise was that, for more intense tests like 30 cycles of pushing data(oh, yeah, so intense…) in one sample, IE7 actually outperformed IE8.
After the first test, I wanted to have a fair test between Chrome and Firefox against Safari so created another test only for these three browsers on Mac OSX.
Here is the second test, and the result is…
From top Chrome, Firefox, and Safari.
Chrome still couldn’t beat Safari in this performance test but did slightly better than Firefox. Firefox didn’t have much difference whether it’s on Windows or Mac OSX even when the virtual machine’s setting was a lot lower spec than the mac used.
To use or not to use…
As you can clearly see from the result, it can be quite fun using AngularJS if your project doesn’t have to support Internet Explorers, especially the older ones, but I wouldn’t recommend it if you’re thinking to use it for an adamant client that refuse to upgrade their systems up to date.