5 Steps to Mastering the Art of Seaside
-
Upload
lukas-renggli -
Category
Technology
-
view
6.798 -
download
1
description
Transcript of 5 Steps to Mastering the Art of Seaside
![Page 1: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/1.jpg)
www.seaside.stwww.lukas-renggli.ch
![Page 2: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/2.jpg)
Lukas Renggli
AcademicsPhD Student, University of Bern
IndustryIndependent Software Consultant
CommunitiesCore-developer of SeasideAuthor of Magritte and Pier
![Page 3: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/3.jpg)
![Page 4: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/4.jpg)
Web ApplicationFramework
![Page 5: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/5.jpg)
MIT License
![Page 6: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/6.jpg)
Seaside is different by design
![Page 7: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/7.jpg)
We share as much state as possible
![Page 8: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/8.jpg)
We don’t use meaningful URLs
![Page 9: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/9.jpg)
We don’t use templates
![Page 10: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/10.jpg)
Seaside Applications are written in Smalltalk
![Page 11: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/11.jpg)
![Page 12: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/12.jpg)
5 Steps to Mastering
The Art of Seaside
![Page 13: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/13.jpg)
Agenda
Getting Started — 15 min
Components — 15 min
Callbacks — 15 min
Control Flow — 15 min
Outlook — 15 min
![Page 14: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/14.jpg)
1Getting Started
![Page 15: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/15.jpg)
Demo}VM
} Squeak, Seaside, Application(Platform Independent)
![Page 16: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/16.jpg)
Demo
![Page 17: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/17.jpg)
DemoClasses Methods
Source Code
Save & Compile(Command+S)
![Page 18: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/18.jpg)
Smalltalk
Everything is an object
Single inheritance
Method invokation is late bound
Methods are public
Instance variables are private
![Page 19: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/19.jpg)
Syntactic Elements
Comment "a lovely comment"Character $aString 'a nice string'Symbol #somethingInteger 123Float 2.718Array #( 1 2 3 )Receiver self
superBoolean true
falseUndefined nil
![Page 20: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/20.jpg)
Syntax (I)
Temporary Variable | var |Assignment var := aNumberBlock Closures [ stmts ... ]
[ :arg1 | stmts ... ][ :arg1 :arg2 | stmts ... ]
1. Unary message receiver doThis2. Binary message receiver + arg3. Keyword message receiver doThis: arg
receiver doThis: 2 andThat: 1
![Page 21: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/21.jpg)
Syntax (II)
Cascade receiver doThis: 123; doThatStatement stmt1. stmt2
stmt1. stmt2. stmt3Return ^ stmtParenthesis (stmt)
![Page 22: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/22.jpg)
Demo
![Page 23: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/23.jpg)
1Your Turn
![Page 24: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/24.jpg)
2Components
![Page 25: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/25.jpg)
We don’t think in pages ...
![Page 26: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/26.jpg)
..., but in stateful components
![Page 27: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/27.jpg)
Demo
![Page 28: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/28.jpg)
Demo
![Page 29: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/29.jpg)
Widgets
![Page 30: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/30.jpg)
View + Controller
![Page 31: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/31.jpg)
Persistent
![Page 32: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/32.jpg)
WAComponent
HelloWorld
![Page 33: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/33.jpg)
Canvas and Brush
Sou
rce:
sto
ck.x
chn
g, M
aart
en U
ilenb
roek
![Page 34: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/34.jpg)
CSSDesigner
![Page 35: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/35.jpg)
XHTMLDeveloper & Seaside
![Page 36: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/36.jpg)
DSL
![Page 37: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/37.jpg)
HelloWorld
renderContentOn: html
html render: 'Hello World'
![Page 38: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/38.jpg)
html div id: ‘title’; with: ‘Title’
<div id=”title”>Title</div>
![Page 39: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/39.jpg)
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>
![Page 40: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/40.jpg)
2Your Turn
![Page 41: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/41.jpg)
3Interaction
![Page 42: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/42.jpg)
No freaking request parsing
![Page 43: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/43.jpg)
Don’t ask me,I call you
Sou
rce:
sto
ck.x
chn
g, L
evi S
zeke
res
![Page 44: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/44.jpg)
Callbacks
![Page 45: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/45.jpg)
html anchor callback: [ self inform: ‘Hello World’ ]; with: ‘Show Message’
![Page 46: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/46.jpg)
html textInput value: name; callback: [ :value | name := value ]
![Page 47: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/47.jpg)
CallbacksAnchors
Form ElementsText FieldsText AreaRadio ButtonsCheck BoxesSelectable ListButtons
![Page 48: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/48.jpg)
3Your Turn
![Page 49: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/49.jpg)
4Control Flow
![Page 50: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/50.jpg)
Demo
![Page 51: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/51.jpg)
<form action="result.html"> <input type="hidden" name="value1" value="<% value1 %>"> <input type="text" name="value2"> <input type="submit" value="OK"></form>
<p> <% value1 + value2 %></p>
<form action="second.html"> <input type="text" name="value1"> <input type="submit" value="OK"></form>
<form action="result.html"> <input type="text" name="value2"> <input type="submit" value="OK"></form>
![Page 52: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/52.jpg)
valu
e1, v
alue
2
/resultparsing
processingformatting
resu
lt
valu
e1
/secondparsing
processingformatting
valu
e1
/firstparsing
processingformatting
Web Browser
![Page 53: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/53.jpg)
Who cares about HTTP anyway?
![Page 54: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/54.jpg)
Seaside is different
![Page 55: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/55.jpg)
| value1 value2 |value1 := self request: ‘First Number’.value2 := self request: ‘Second Number’.self inform: value1 asNumber + value2 asNumber.
![Page 56: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/56.jpg)
AB
call:A Bx :=
![Page 57: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/57.jpg)
AB
answer:B
![Page 58: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/58.jpg)
A
x :=
![Page 59: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/59.jpg)
4Your Turn
![Page 60: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/60.jpg)
5Outlook
![Page 61: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/61.jpg)
Web 2.0
![Page 62: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/62.jpg)
XHTML
✓
![Page 63: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/63.jpg)
CSS
✓
![Page 64: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/64.jpg)
RSS
✓
![Page 65: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/65.jpg)
AJAX
Sou
rce:
Flic
kr, B
enja
min
Jac
kso
n
![Page 66: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/66.jpg)
![Page 67: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/67.jpg)
Tight, but optional integration
![Page 68: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/68.jpg)
Feature completeand up-to-date
![Page 69: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/69.jpg)
Say it in Smalltalk
![Page 70: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/70.jpg)
Demo
![Page 71: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/71.jpg)
Comet
Sou
rce:
Flic
kr, p
srm
an's
![Page 72: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/72.jpg)
Server Push
![Page 73: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/73.jpg)
Demo
![Page 74: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/74.jpg)
Applications
![Page 75: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/75.jpg)
In productive usesince 2002
![Page 77: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/77.jpg)
Demo
![Page 78: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/78.jpg)
Demo
![Page 79: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/79.jpg)
Demo
![Page 80: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/80.jpg)
Demo
![Page 82: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/82.jpg)
Did you notice?
![Page 83: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/83.jpg)
Web applications
![Page 84: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/84.jpg)
No URL fiddling
![Page 85: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/85.jpg)
No request parsing
![Page 86: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/86.jpg)
Development toolsat your fingertips
![Page 87: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/87.jpg)
Control flow at ease
![Page 88: 5 Steps to Mastering the Art of Seaside](https://reader034.fdocuments.us/reader034/viewer/2022051514/54869179b47959e20c8b529f/html5/thumbnails/88.jpg)
www.seaside.stwww.lukas-renggli.ch