From Backbone to Angular
Recently I worked on a migration from Backbone to Angular for a customer, I wrote the Backbone code about one year ago and it started to be hard to maintains so I decided to migrate to Angular to have something easier to improve when this customer will change the front end or add some new features. I was really curious to see the impact of a migration like that (I mean for maintainability more than speed or whatever).
I just finish this migration few days ago and so I wanted to share some statistics I computed to see the before/after. Of course this is not really objective because the Backbone code was a bit crappy after adding some feature then change then change again… but honestly, I really don’t like shit code so I did some refactoring on it many times. One of the other reason why those statistics may be “wrong” is because I made different choice for libraries I used. I changed one library to load a WISIWIG (before ckeditor, now text-angular) and one other to display statistics (before highchart, now ng-google-chart) I decided also to not use some library like the ones from Bootstrap or isotope because it can be done easily with Angular.
Another thing to keep in mind, I did those statistics using my resources not minifies or gziped, just pure js from my coffee files so don’t be afraid to see so many files ;)
Now this is clear, let’s have a look on those statistics:
- green benefits >= 50%
- yellow benefits between 40 and 50%
- orange benefits between 30 and 40%
- red benefits < 30%
|Number of libraries loaded||10 (jquery, backbone, underscore, isotope, ckeditor, twitter bootstrap, backbone formdata, highchart, i18n)||7 (angular, angular-route, angular-resource, angular-sanitize, angular-file-upload, ng-google-chart, text-angular)||-30%|
|Total size loaded (not minified, not gziped)||1610.4K||901.6K||-44%|
|Size of libraries||1410.75K||838.9K||-41%|
|Code I wrote||200.85K||62.6K||-69%|
|Number of Coffee files||72||46||-36%|
|Line of code (CoffeeScript)||1907||853||-55%|
|Lines by scripts||26.48||15.23||-42%|
|Number of template files||40||23||-43%|
|Line of code (templates)||745||861||+15%|
I was a bit surprise to see so much differences, I was thinking because Angular is a lot more heavier than backbone (727.5K vs 57K) the total weight will be at least almost the same but finally we almost divide by 2 the weight of the application because Backbone needs many other things, like juste jquery and underscore wich are required, angular is built in with everything and don’t need anything else. Moreover we can see the number of files, of lines in those files and in general the number of line of code to maintains is reduced a lot (divided by 2). This is great for me, less work to do :).
So now to resume, I spend few days to rewrite all the application but now I have something faster to load and really faster to maintain and improve. This prove again that Angular is just awesome and out of the box is just hundreds time more efficient than Backbone and even is heavier than Backbone, at the end this is not a big problem because you will not need to include really big plugins.
Maybe in another post I will add some statistics about loading, rendering, memory etc… using Chrome performances tools (which will be another post too ;)) and we will see if the double binding of Angular is not too slow or if the rendering is faster (I think I already know the answers). So see you in a next post and I hope this feedback can be helpful for some poeple.
PS: I would be happy to know some static code analysis tools because for now I just used cloc and some command lines but I didn’t find any good cyclomatic complexity tool for exemple for coffee or even generic tools so if you know I would apreciate your feedbacks :)