Twitter Bootstrap for Seaside ported to VA Smalltalk


I just uploaded a port of Torsten Bergmann’s Twitter Bootstrap code for Seaside to VASTgoodies.com.

Our kontolino! web platform is currently being worked on design-wise. Over time we found out the hard way that keeping up with how people think a web application should look and feel, and making cool things workable across multiple mainstream browsers, combined with at least a minimum level of adaptability to smaller screen sizes, can be a lot of work. So much that you start spending most of your time for a new widget in JavaScript tweaking and CSS exploration rather than adding features to your application. Just to find out somebody has solved the same problem better, more visually pleasing and for free already.

Making long story short: we decided Bootstrap would be the thing to use for us. There is a risk of making your web site look like all the others out there, but Bootstrap can be tweaked and customized and adapted in many ways, while you still profit from lots of cross-browser code. If you’ve never written a web application, you won’t believe how much of a problem that really is. And users somehow expect a site too look somewhat like that anyways – at least that is what our users told us.

So what I did was borrow Torsten’s code and use the Monticello Importer to load it into VAST. It was a very smooth process – I was quite surprised how little I had to do to get the packages into our Library.

There were, however, a few obstacles to making it run:

* Some of the Javascript helpers of Bootstrap only run on JQuery 1.9.1 or later (which is still very old). Seaside/JQuery as it ships in VA Smalltalk comes with some 1.7 – even in the latest VA Smalltalk 8.6.1 version. So I had to load the latest 1.x series code into JQueryDeployment and JQUiDeployment Libraries in VAST. It’s easy: download the js files from jquery.com an jqueryui.com and execute #addFileAt: on the two FileLibrary – classes to update your File Libraries in VAST.

* Pharo has a ton of little helper methods that save some typing and make code a bit shorter to write and read. These are not ANSI Smalltalk compliant, but very nice. So people use them – a lot. When you import code from Pharo, you have two options: change the places where such methods are being used and replace them with mothods that are available in VAST (mostly their ANSI counterparts) or add the methods to VAST. We did the latter for various reasons. The outcome there of is a small Application named GreaseVAST860Extensions whcih we also uploaded to VASTGoodies (more to follow on this blog).

* A few examples that come with Torsten’s Bootstrap code use #call:, which is not working on VAST due to the fact that VAST doesn’t support Continuations. I didn’t take the time to change these examples. It should be easy to use show: instead of call:, so if you feel like you want to help out, please feel free to change the code on VASTGoodies and publish a new version.

So far, we are very pleased by Bootstrap. Things like DropDown-Buttons and such are so easy to build and you can be sure they work on all mainstream Browsers. The additional work of changing our widgets to use Bootstrap logic (some more/less divs, changing a few css classes and such) is not as bad as we expected, but the result is fascinating! Once we’ve ported all our stuff, we can concentrate on functionality instead of Browser compatibility! (How stupid does this sound in the early 21st century??? But that is web reality!)

So feel free to download Twitter Bootstrap from VASTGoodies and play with it. Please let me know about problems you find – and, mor importantly, help by submitting bug fixes and stuff. I’d also be happy to discuss topics of Bootstrap in a Seaside context with other users and learn!

One thought on “Twitter Bootstrap for Seaside ported to VA Smalltalk

Comments are closed.