Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek [email protected].
-
Upload
barnaby-lyons -
Category
Documents
-
view
218 -
download
3
Transcript of Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek [email protected].
![Page 2: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/2.jpg)
Vsebina
Definition of Web App server
Aida’s ideas and architecture
Comparison to Seaside
Examples
Conclusion
![Page 3: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/3.jpg)
Web application server
Web + application server
For web applicationsDynamic, on-the-fly built web pages
Web pages instead of GUI apps
Thin clients instead of fat clients
Examples: business apps, portals, ...
![Page 4: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/4.jpg)
Swazoo vs. Aida & Seaside
Swazoo
Seaside AIDA SmallWiki
![Page 5: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/5.jpg)
Methods of building web pages
Embedded tags into HTMLjsp, asp, php
Cincom Web Toolkit
ProgrammingJava Servlets
Struts
AIDA/Web, Seaside
![Page 6: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/6.jpg)
Embedded tags – SSP example
<html><head><title>Toyz Employees</title></head><body><table border=1><%
employees := (Toyz new) getEmployees.employees do: [:each |
response write: ‘<tr>’.response write: (‘<td>’, each number’, ‘</td>’).response write: (‘<td>’, each name, ‘ ‘, each surname, ‘</td>’).response write: ‘</tr>’].
%></table></body></html>
![Page 7: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/7.jpg)
Enbedded commands
ProsSimple for web designers
ConsFunctional logic get lost among presentation logic (HTML)
“spaghetti” code – hard to maintain and extend
![Page 8: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/8.jpg)
Programming – two examples
Aida:element := WebElement new.element table width: 500;
cell color: (self navigatorColor); cell colspan: 3; addText: self title header: 3; newRow; cell colspan: 3; addRulerSize: 1; newRow; cell addText: 'uptime: '; newCell align: #right; addText: (self printSeconds: self session site uptime); newRow.^self pageFrameWith: element title: self title .
Seaside:renderContentOn: htmlhtml form: [ html table: [
html tableRowWithLabel: 'Username‘ column: username.html tableRowWithLabel: 'Password' column: [html passwordInputWithCallback: [:v | password := v]].html tableRowWithLabel: 'Confirm Password' column: [html passwordInputWithCallback: [:v | confirmation := v]].html spacerRow.html tableRowWith: [ html submitButtonOn: #changePassword of: self. html space. html submitButtonOn: #cancel of: self ] span: 2] ]
![Page 9: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/9.jpg)
Programming
ProsNo HTML, just one programming language
Separation of presentation from model
Comonents, reusability
ConsDifficult for web designers
Difficult to move design into code
Solution: CSS !
![Page 10: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/10.jpg)
Aida’s basic ideas
Object system = web of objects
... connected with object references
World Wide Web = web of pages
... connected with Url links
![Page 11: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/11.jpg)
Aida’s basic ideas
Every object should present itself as web page
Object references should map to Url links and vice-versa – automatically!
![Page 12: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/12.jpg)
REST arhitectural principle
REpresentational State TransferWeb comprised of resources, addressed with Uniform Resource Locators (Url).
Example: http://www.eranova.si/aida
As answer to request: presentation of resource
Only GET, PUT, POST etc
W3C Architecture of the World Wide Webhttp://www.w3.org/TR/2004/WD-webarch-20040705/
Building Web Services the REST Wayhttp://www.xfront.com/REST-Web-Services.html
![Page 13: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/13.jpg)
MVC on Web
Model-View-Controler
Strict separation of presentation from domain logic
Every domain object has its presentation counterpart
domain objecta WebApp
domainobject
observee
![Page 14: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/14.jpg)
Aida web application
We
b se
rve
r (S
waz
oo)
Urlmappings
Security
Sessions
Statistics
Admin
Model
Presentation
Su
ppo
rt s
erv
ice
s
Presentation framework
![Page 15: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/15.jpg)
Web request path
O b je c tW e b P a g eH T M L P a g e W e b A p p
W e b W id g e t
W e b E le m e n t W e b E le m e n t W e b E le m e n t
W e b S e rv e r
p rin tW e b P a g e
![Page 16: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/16.jpg)
Seaside concepts
Continuations
Control flow easily defined
Session like process/thread
Components: UI state and logic
Subroutine-like calls of another components with results returned
![Page 17: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/17.jpg)
Example – counter with Urls
Seaside:WACounter renderContentOn: html
html heading: count. html anchorWithAction: [self increase] text: '++'. html space. html anchorWithAction: [self decrease] text: '—'.
Aida:CounterApp viewMainself addTextH1: self observee count printString; addLinkTo: self observee text: '++' view: #increase; addSpace; addLinkTo: self observee text: '--' view: #decrease.
CounterApp viewIncreaseself observee increase.self viewMain
CounterApp viewDecreaseself observee decrease.self viewMain
![Page 18: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/18.jpg)
Example – counter with buttons
Seaside:WACounter renderContentOn: html
html form: [ html heading: count. html submitButtonWithAction: [self increment] text: '++'. html space. html submitButtonWithAction: [self decrease] text: '--'].
Aida:CounterApp viewMainself addTextH1: self observee count printString; addButtonText: '++' action: #increase; addSpace; addButtonText: '--' action: #decrease.
CounterApp actionMainIncreaseself observee increase
CounterApp actionMainDecreaseself observee decrease
![Page 19: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/19.jpg)
Example – counter with dialog
Seaside:
WACounter decrease count = 0 ifFalse: [count := count - 1]
ifTrue: [(self confirm: 'Do you want to go negative?') ifTrue: [self inform: 'Ok, let''s go negative!'. count := -100]].
![Page 20: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/20.jpg)
Seaside programming
ProsFlow control in one place
Easy “subroutine pages” with results returned
Back button supported (really needed?)
ConsNot much OO, more procedural programming
Url’s not REST-like
Cross-linking pages difficult
![Page 21: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/21.jpg)
Aida programming
ProsEvery domain object has persistent Url
Automatic cross-linking of pages
REST principle fully supported
ConsGOTO like programming for more complex apps
control flow not shown in one place
Back button not fully supported
![Page 22: Smalltalk Web frameworks Comparison of Aida/Web and Seaside Janko Mivšek janko.mivsek@eranova.si.](https://reader036.fdocuments.net/reader036/viewer/2022081603/56649e905503460f94b94900/html5/thumbnails/22.jpg)
Conclusion
Aida/webhttp://www.eranova.si/aida
Seasidehttp://www.beta4.com/seaside2/
Avi Briant [email protected]