Archive

Mozilla's Bespin Source code under the hood

I am considering Mozilla's Bespin as the pinnacle of JavaScript engineering, so I decided to read through the source code to get some new ideas for JavaScript patterns. Bespin runs as a HTML5 canvas tag, therefore all you see is pixel drawn, all your mouse events are x/y detected and matched to the "drawn" objects inside of the canvas element. What's amazing is how fast this thing runs. The paradox is that canvas was not really intended to be a text input element, yet it performs better than current DOM based UIs. Looking through the code, here are some of my findings:

  • There seems to be a strong connecting between sproutcore and bespin, much of the code uses sproutcore code, and the code is structured using sproutcore implementation of commonjs.
  • all the code is wrapped arround commonjs SproutCore 1.1/Tiki implementation
  • the code also has jQuery and sizzle included (not sure why, since I don't see it used later, and most websites will have it cashed as a separate file
  • there are many browser hacks (for some reason I believed for a while that HTML5 would bring the end of hacking)
  • there are many other "borrowed" code snippets from other frameworks (DOJO)
  • as a result of using several third party framework, some of the utility functions overlap (not a big deal)
  • on-demand scrip loading is widely used

Comments:

Kevin Dangoor
9/20/2010 4:42 PM
Hey, thanks for peeking inside our code (and for calling Bespin the "pinnacle of JavaScript engineering"!) A couple of comments on your findings: 1. Skywriter no longer uses SproutCore. If you're looking at the correct repository, you shouldn't see any place where we use SproutCore. 2. Skywriter *does* use Tiki, which is the CommonJS loader created for the SproutCore project. Tiki is a separate library from SproutCore, though. 3. Skywriter does use jQuery. We have some utility function remnants that were pulled in from Dojo or developed separately that we need to consolidate into jQuery. 4. When embedding Skywriter in another site, you can build Skywriter to use the jQuery on the page rather than the one we ship with Skywriter. We ship jQuery so that it can be an all-in-one package. On-demand script loading is definitely a feature. The idea is that you can have syntax highlighters for 50 languages, for example, but only load the ones you actually use. Thanks for the writeup, and feel free to post on the googlegroup should you have any questions! Kevin