www.seaside.st
www.lukas-renggli.ch

Lukas Renggli
Academics
PhD Student, University of Bern
Industry
Independent Software Consultant
Communities
Core-developer of Seaside
Author of Magritte and Pier

Web Application
Framework

MIT License

Seaside is
different by design

We share as much
state as possible

We don’t use
meaningful URLs

We don’t use
templates

Seaside Applications
are written in Smalltalk

5 Steps to Mastering
The Art of Seaside

Agenda
Getting Started — 15 min
Components — 15 min
Callbacks — 15 min
Control Flow — 15 min
Outlook — 15 min

Getting Started

} Squeak, Seaside, Application
}
(Platform Independent)
Demo VM

Demo

Classes Methods
Demo
Save & Compile
(Command+S)
Source Code

Smalltalk
Everything is an object
Single inheritance
Method invokation is late bound
Methods are public
Instance variables are private

Syntactic Elements
Comment \"a lovely comment\"
Character $a
String 'a nice string'
Symbol #something
Integer 123
Float 2.718
Array #( 1 2 3 )
Receiver self
super
Boolean true
false
Undefined nil

Syntax (I)
Temporary Variable | var |
Assignment var := aNumber
Block Closures [ stmts ... ]
[ :arg1 | stmts ... ]
[ :arg1 :arg2 | stmts ... ]
1. Unary message receiver doThis
2. Binary message receiver + arg
3. Keyword message receiver doThis: arg
receiver doThis: 2 andThat: 1

Syntax (II)
Cascade receiver doThis: 123; doThat
Statement stmt1. stmt2
stmt1. stmt2. stmt3
Return ^ stmt
Parenthesis (stmt)

Demo

Your Turn

Components

We don’t think in
pages ...

..., but in stateful
components

Demo

Demo

Widgets

View + Controller

Persistent

WAComponent
HelloWorld

Canvas and Brush
Source: stock.xchng, Maarten Uilenbroek

CSS
Designer

XHTML
Developer & Seaside

DSL

HelloWorld
renderContentOn: html
html render: 'Hello World'

html div id: ‘title’; with: ‘Title’
<div id=”title”>Title</div>

html div id: ‘list’; with: [
html span class: ‘item’; with: ‘Item 1’.
html span class: ‘item’; with: ‘Item 2’ ]
<div id=”list”>
<span class=”item”>Item 1</span>
<span class=”item”>Item 2</span>
</div>

Your Turn

3
Interaction

No freaking
request parsing

I call you
Don’t ask me,
Source: stock.xchng, Levi Szekeres

Callbacks

html anchor
callback: [ self inform: ‘Hello World’ ];
with: ‘Show Message’

html textInput
value: name;
callback: [ :value | name := value ]

Callbacks
Anchors
Form Elements
Text Fields
Text Area
Radio Buttons
Check Boxes
Selectable List
Buttons

3
Your Turn

Control Flow

Demo

<form action=\"second.html\">
<input type=\"text\" name=\"value1\">
<input type=\"submit\" value=\"OK\">
</form>
<form action=\"result.html\">
<form action=\"result.html\">
<input type=\"hidden\" name=\"value1\" value=\"<% value1 %>\">
<input type=\"text\" name=\"value2\">
<input type=\"text\" name=\"value2\">
<input type=\"submit\" value=\"OK\">
<input type=\"submit\" value=\"OK\">
</form>
</form>
<p>
<% value1 + value2 %>
</p>

/first /second /result
parsing parsing parsing
processing processing processing
value1, value2
formatting formatting formatting
value1
value1
result
Web Browser

Who cares about
HTTP anyway?

Seaside is different

| value1 value2 |
value1 := self request: ‘First Number’.
value2 := self request: ‘Second Number’.
self inform: value1 asNumber + value2 asNumber.

x := A call: B
A
B

B answer:
A
B

x :=
A

Your Turn

5
Outlook

Web 2.0

✓
XHTML

✓
CSS

✓
RSS

AJAX
Source: Flickr, Benjamin Jackson

Tight, but optional
integration

Feature complete
and up-to-date

Say it in Smalltalk

Demo

Comet
Source: Flickr, psrman's

Server Push

Demo

Applications

In productive use
since 2002

Demo

Demo

Demo

Demo

Demo
http://www.seasidehosting.st

Did you notice?

Web applications

No URL fiddling

No request parsing

Development tools
at your fingertips

Control flow at ease

www.seaside.st
www.lukas-renggli.ch