Keeping a Sproutcore 2.0 App Fast

Our application makes heavy use of the excellent open-source Sproutcore 2.0 library. One thing I've discovered about Sproutcore is that if you want your application to be as responsive as possible, there are a few tweaks you can make to keep re-rendering to a minimum.

One example is related to Sproutcore's #if and #unless template helpers. They are simple, clean, and nice to use. But as the amount of complex content that you're wrapping inside them grows, they can get expensive and cause perceptible delays as they rerender. Instead of re-rendering complex content, it's much cheaper to just hide it when you don't want it to be visible.

Here is an implementation of the helpers #showIf and #showUnless. You can use them like #if and #unless, but instead of rerendering their content, they just show or hide it with the CSS display:none property. (Except these don't offer {{else}} — you need to use a #showIf & #showUnless together for the same effect.) If you're wondering why my Javascript is so bizarre, it's because it's CoffeeScript. You can easily compile this to Javascript without installing anything by heading over to the CoffeeScript site, clicking "Try CoffeeScript", and pasting in the above code.