Get To Business.

Two weeks into the Octabox Alpha testing, we’ve released our first major update, Octabox v0.15.
Latest release didn’t include any new features, but rather was focused on improving performance across the board.

Up until this version we have been using the Prototype Javascript framework to handle client side scripting tasks, and the Script.aculo.us Javascript toolbox to handle User Interface widget implementation (draggable windows, animations and so forth).
These two are most potent and very mature code libraries - however, combined they weigh on the upper side of 200kb (full featured with no compression), which is a lot to download when latency is high for an http connection. After running those libraries through basic compression techniques (removing whitespaces and shortening variable names) we got it down to around 141kb. Major improvement, but still a lot. Unfortunately, the Prototype library is incompatible with more advanced regular-expression compression techniques, like the one used by Dean Edwards’ Packer (It is possible to use Packer on Prototype, but it requires tedious modification to the Prototype script file, and lots of debugging ensues). So, we’ve decided to migrate to the jQuery Javascript framework.

jQuery is an interesting piece of code. The traditional Javascript school of though is this: You fetch a DOM element using getElementById or getElementsByTagName, and you use Javascript methods to dynamically change the element. The Prototype library extends many Javascript and DOM methods and provides shortcuts for common methods, making it easier to play around the DOM.
jQuery however takes a somewhat different approach: You fetch a DOM element using the jQuery selector engine (which includes CSS 1, 2 and 3 specs. and X-Path, all in all a very powerful engine), which is then wrapped with the jQuery object interface. You can then start applying jQuery methods, each method returning the jQuery object - which allows the use of chainability to save many lines of code. An example and explanation of jQuery chainability principle.

jQuery itself weight around 20kb compressed (and it’s built for compression). One of its official plug-ins, Interface, handles the User Interface methods (effectively replacing Script.aculo.us), weighs about 77.5kb for the full featured released (compressed) and can be sized down even further by choosing specific components. So all in all we’re down now to 20kb + 44kb (for our less featured Interface plug-in build) = 64kb.
That’s some major bandwidth savings! Less than half of what Prototype and Script.aculo.us needed. Further more, after converting all our client side code (extremely tedious work…) to the jQuery paradigm (chainability, etc.) our own scripts sized down on average by 50%! Some more bandwidth savings for our optimization efforts. In addition, using the jQuery built in selector engine and methods we were able to make many script run-time optimizations, removing much load from the client browser (especially noticeable on IE6, which had some difficulties previously).

In addition to the major code refactoring I just reviewed, we made a long list of bug fixes and graphical enhancements. So while there weren’t any feature additions in this release, it is a very important updatee and benefits should be felt for a long time.

Next up: Building Octabox Rapid Development Tools. Our development team (me for now…) will be focusing our efforts on building a set of tools for rapid deployment of new Octabox modules and features. Goals would be to encapsulate repetitive/complex tasks in Object Oriented fashion, to make code more standarized and self compliant, protect name-spacing and more. Hopefully this will result in a much lower rate of bugs and a much higher rate of development (and would also be the roots of the API we eventually intend to release publicly to would be Octabox module developers).

Until next time,
Eran Galperin
Octabox Lead Developer