Making a Website with Seaside on Squeak


Last month, the hockey team I play hockey with in a (low key) league, asked me to setup a website where players could register and mark themselves as "Available", or 'Not Available', so we can keep track how many players can make it for the next game, and someone does not have to spend time counting email responses before calling substitutes if too few players can make it.

While the user interface for such website is simple, websites that maintain persistent data are not completely trivial, for the simple fact of having to introduce persistence.

I decided to use Seaside for the job and I have to say, it was a super-pleasant experience from the start to the end!

I have not looked at much Seaside code before, and it took two late nights (about 15 hours), much of which was to learn seaside basics and then figure out how to force KomHttpServer load images. The result is a decent looking functional site with persistance, that already served the team well and helped us not to miss any games short of players.

To get the a few things out of the way, the code is not a pinnacle of software engineering, but is was not intended to be. The main thing I do not like the entanglement of "application code" and user interface I end up with in my HockeyWebsiteWAComponent>>renderContentOn:. But the business code amount to a few lines of code and I just wanted something simple, so I am excusing myself, and next will be architecturally sounder.

Apart from that, everything was very simple. While working on it,

I had these sites opened in browser at all times:

David Shaffer's Seaside Tutorial here.
The Seaside main site.
The tutorial linked from the above site.

I kept hese classes in Squeak browser to find how to generate html tags:

WAAbstractHtmlBuilder
WAHtmlRenderer

From the tutorial, I figured the best way to build a simple site is to subclass WAComponent and override it's WAComponent>>renderContentOn: method. From there, it was just to work out the details of writing the html tags and adding the (simple) application code in blocks. I was surprised how "easy going and natural" (at least to my brain) it was to work it out in Seaside.

For persistence, I simply store the image every 60 minutes (can be made more frequent). This is just one of many great things that Smalltalk having an image is so cool for - I think that for 90% of applications this is perfectly sufficient, and developer has persistence virtually for free. The code is borrowed from an older Goran Krampe's email on squeak-dev (See HockeyUtilities.st)

For data structures, I simply populate a singleton (for example, HockeyPlayers class>>getInstance, GameDates class>>getInstance serve as "players table" and "gameDates table".

A few comments at the end:
==========================

a) I used Seaside 2.5, and when writing the html the HTML code kept going a bit mure cluttered then I liked, yet on Google I kept coming up with results that showed more elegant API that would not clutter. I think this is Seaside 2.6, so anyone reading this about to learn Seaside I think it makes sense to start with Seaside 2.6 http://www.seaside.st/Download/Images/

b) It would be good to have a (x)html to Seaside converter. One reason is that some companies designers use html/css to for initial design, expecting the resulting page will use the html code they created.

c) You can look at the site (with removed players personal info) is here.

d) Notes on how to create and run the application


e) The classes can be downloaded here:

HockeyWebsiteWAComponent
HockeyPlayers
Utilities (persistence)
HockeyPlayer
GameDates

Hope this helps .. and I had to share how good Seaside on Squeak is :)