5 Steps to Mastering the Art of Seaside

Slide 1: www.seaside.st www.lukas-renggli.ch

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

Slide 4: Web Application Framework

Slide 5: MIT License

Slide 6: Seaside is different by design

Slide 7: We share as much state as possible

Slide 8: We don’t use meaningful URLs

Slide 9: We don’t use templates

Slide 10: Seaside Applications are written in Smalltalk

Slide 12: 5 Steps to Mastering The Art of Seaside

Slide 13: Agenda Getting Started — 15 min Components — 15 min Callbacks — 15 min Control Flow — 15 min Outlook — 15 min

Slide 14: Getting Started

Slide 15: } Squeak, Seaside, Application } (Platform Independent) Demo VM

Slide 16: Demo

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

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

Slide 19: 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

Slide 20: 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

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

Slide 22: Demo

Slide 23: Your Turn

Slide 24: Components

Slide 25: We don’t think in pages ...

Slide 26: ..., but in stateful components

Slide 27: Demo

Slide 28: Demo

Slide 29: Widgets

Slide 30: View + Controller

Slide 31: Persistent

Slide 32: WAComponent HelloWorld

Slide 33: Canvas and Brush Source: stock.xchng, Maarten Uilenbroek

Slide 34: CSS Designer

Slide 35: XHTML Developer & Seaside

Slide 36: DSL

Slide 37: HelloWorld renderContentOn: html html render: 'Hello World'

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

Slide 39: 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>

Slide 40: Your Turn

Slide 41: 3 Interaction

Slide 42: No freaking request parsing

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

Slide 44: Callbacks

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

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

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

Slide 48: 3 Your Turn

Slide 49: Control Flow

Slide 50: Demo

Slide 51: <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>

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

Slide 53: Who cares about HTTP anyway?

Slide 54: Seaside is different

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

Slide 56: x := A call: B A B

Slide 57: B answer: A B

Slide 58: x := A

Slide 59: Your Turn

Slide 60: 5 Outlook

Slide 61: Web 2.0

Slide 62: ✓ XHTML

Slide 63: ✓ CSS

Slide 64: ✓ RSS

Slide 65: AJAX Source: Flickr, Benjamin Jackson

Slide 67: Tight, but optional integration

Slide 68: Feature complete and up-to-date

Slide 69: Say it in Smalltalk

Slide 70: Demo

Slide 71: Comet Source: Flickr, psrman's

Slide 72: Server Push

Slide 73: Demo

Slide 74: Applications

Slide 75: In productive use since 2002

Slide 77: Demo

Slide 78: Demo

Slide 79: Demo

Slide 80: Demo

Slide 81: Demo http://www.seasidehosting.st

Slide 82: Did you notice?

Slide 83: Web applications

Slide 84: No URL fiddling

Slide 85: No request parsing

Slide 86: Development tools at your fingertips

Slide 87: Control flow at ease

Slide 88: www.seaside.st www.lukas-renggli.ch