I find your lack of performance disturbing

Getting started with single page applications is a breeze. Just bower install Angular, Ember, Durandal or [insert sexy js framework here] and you're flying. Then the problems start :(

Any sufficiently complex application (sufficiently complex to be worthy of your time that is) will have to handle fairly large amounts of data. That is no problem 'cause JavaScript is really fast nowadays (assuming your visitors are using a browser and not an abbomination like IE8 or older). But then you have to display that data which means in some way or another adding huge amounts of nodes to the DOM. And that is not fast.

What is slow?

I ran into a problem like this in a recent project and when trying to resolve it, I realized that a lot of my problems was due to premature optimizations. Basically: to make the UI as fast and snappy as possible, I used show/hide for elements when opening/closing nodes instead of inserting/removing child elements from the DOM. Because DOM manipulation is slow - right?

The value of 250ms

What took time was a listing of a load of data. The list wasn't that long but it still took ages. Turns out my avoiding DOM inserts was the problem.

Every line in my list was an item. Every item had sub items that could be shown by opening the item. Every item and child could be set in edit mode. So every item was a huge pile of HTML that the user might see.

The interesting thing about delays is that there is a break point around 250ms. Any time shorter than that is percieved by our brain as instantanious. That means that optimization is irrelevant below this threshold. So by replacing 'hide' classes on my nodes with {{#if}} and {{#else}} (this was in Ember which uses Handlebars), the list got really fast while the opening and switching to edit mode of items became slower. But the slower openings and closings and editings still fell short of 250ms which meant that it didn't feel slower. So faster list and not slower navigation. W00T!

Author

Johan Öbrink

Started programming on my VIC 20 in 1982. Programmed JavaScript, Java, ActionScript, C# and then some. Love TDD, XP and agile development. Enjoy talking (a lot), building drones and playing with LEGO.

comments powered by Disqus