Last Tuesday we released bonsai the light-weight JavaScript library, that makes creating visually rich content on the web easier than ever before, and yes it is inspired by Flash. It was a pretty big day for us, we had been working towards this for months now. Just a couple of weeks ago it was still named Bikeshed, it had almost no documentation and the demos were really just for internal use, but it was always driven by test driven development and we are pretty proud of that.

What is it?

Bonsai is nothing less than the heart of our Flash to HTML5 conversion service pixelplant. Bonsai is open source and released under the MIT license. Without bonsai there would be nothing ticking. Bonsai is the JavaScript library that does all the hard work and allows you to write really simple code to accomplish even complex things, such as (click the run-button at the upper right corner below):

We had been reshaping the API multiple times, from early on we had input from real users and now we are very confident that it has become consise and easy to use. As you can see there has been a lot of working going into little details such as manipulating the colors.
Bonsai can roughly be separated into three big areas:

  1. content creation – which allows to create and/or load shapes, images, text, video, colors, gradients and audio soon too
  2. organization – where you can group any kind of items, set them onto a timeline which can be used in sprites and movie clips
  3. and manipulation – which consists of applying animations, matrices, filters and hook onto events that can be used to modify the behavior

How we got there

When we started out we wanted to see results quickly and not prototype for an eterninty until we could try it out. Pure development had started in October and actually all the optical illusions for our christmas bikeshed episodes had been made with a very early version of bonsai (which still used to be bikeshed).

In order to get the API into our hands quickly we used Raphaël initially as the renderer below, so we didn’t have to worry about this part anymore and built purely the API. When the architecture and API reached a very useable state we replaced Raphaël with our own renderer, a SVG renderer. Besides the SVG renderer we decided for one very important detail early on too: our separation of the renderer and the runner.

The runner is the piece that does the heavy load, it executes the bonsai script you write, does all the calculations and generates a set of rendering messages, for each frame. The messages are requested by the renderer when it is done with the last set of messages, it then has no more to do than translating those messages into visible elements. The two are communicating over a simple protocol. Those two layers allow us to move the execution of all heavy calculations into the WebWorker and give the renderer all the execution time of the web page for rendering, since that is the thing that takes longest, especially on the current mobile devices. And no heavy calculation would hinder the rendering. On top we got for free to execute the runner on the server (in a nodejs process) and send only the rendering messages to the browser, which allows even multi player games served by one server process. The renderer itself has no more than 2000 lines of code that just uses SVG and soon Canvas, WebGL or any other technology for rendering any kind of visuals.

Ready for production?

Oh yes, you bet.

We are shipping bonsai already as part of our products and services. Of which pixelplant is the most prominent one. It is running already for months.

Of course we are optimizing speed every day and trying to squeeze every last bit out of it, especially when we jump from our desktop development environment onto a mobile device, such as the iPad to test it out we see that there is lots that can be done.

Thanks

Thanks go out to all those that have been working hard to get bonsai out of the door, the entire uxebu crew and everyone who has helped us get it to where it is.

We are looking forward to all the input that we can get from the community and hope that everyone out there who is interested becomes productive quickly and has a fun time using what we built.