Seaside does different to what is considered as best practices for Web development. It breaks with common best practices for Web development, such as to share as little state as possible, use clean and carefully chosen URLs, and use templates to separate model and presentation.

1. Web development,
as you it

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

3. Agenda
Natural Flow
Reusable Components
Secure by Default
Web 2.0
Applications

4. 1
Natural Flow

5. Demo

6. <form action=quot;second.htmlquot;>
<input type=quot;textquot; name=quot;value1quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>

7. <form action=quot;second.htmlquot;>
<input type=quot;textquot; name=quot;value1quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<form action=quot;result.htmlquot;>
<input type=quot;textquot; name=quot;value2quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>

8. <form action=quot;second.htmlquot;>
<input type=quot;textquot; name=quot;value1quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<form action=quot;result.htmlquot;>
<input type=quot;textquot; name=quot;value2quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<p>
<% value1 + value2 %>
</p>

9. <form action=quot;second.htmlquot;>
<input type=quot;textquot; name=quot;value1quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<form action=quot;result.htmlquot;>
<input type=quot;textquot; name=quot;value2quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<p>
<% value1 + value2 %>
</p>

10. <form action=quot;second.htmlquot;>
<input type=quot;textquot; name=quot;value1quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<form action=quot;result.htmlquot;>
<input type=quot;textquot; name=quot;value2quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<p>
<% value1 + value2 %>
</p>

11. <form action=quot;second.htmlquot;>
<input type=quot;textquot; name=quot;value1quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<form action=quot;result.htmlquot;>
<input type=quot;textquot; name=quot;value2quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<p>
<% value1 + value2 %>
</p>

12. <form action=quot;second.htmlquot;>
<input type=quot;textquot; name=quot;value1quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<form action=quot;result.htmlquot;>
<input type=quot;hiddenquot; name=quot;value1quot; value=quot;<% value1 %>quot;>
<input type=quot;textquot; name=quot;value2quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<p>
<% value1 + value2 %>
</p>

13. <form action=quot;second.htmlquot;>
<input type=quot;textquot; name=quot;value1quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<form action=quot;result.htmlquot;>
<input type=quot;hiddenquot; name=quot;value1quot; value=quot;<% value1 %>quot;>
<input type=quot;textquot; name=quot;value2quot;>
<input type=quot;submitquot; value=quot;OKquot;>
</form>
<p>
<% value1 + value2 %>
</p>

14. Web Browser

15. Web Browser

16. /first
parsing
processing
formatting
Web Browser

17. /first
parsing
processing
formatting
value1
Web Browser

18. /first /second
parsing parsing
processing processing
formatting formatting
value1
value1
Web Browser

19. /first /second
parsing parsing
processing processing
value1, value2
formatting formatting
value1
value1
Web Browser

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

21. Who cares about
HTTP anyway?

24. is different

25. Concentrate on
your application ...

26. ... no manual
request parsing

27. ... no XML
configuration files

28. 3 user interactions

29. 3 lines of code

31. value1 := self request: ‘First Number’.

32. value1 := self request: ‘First Number’.
value2 := self request: ‘Second Number’.

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

34. Demo

35. Reusable
Components

36. We don’t think in
pages ...

37. ..., but in stateful
components

38. Demo

39. Demo

40. Components
are c! l
!

41. Reuseable

42. Model
View Controller
Model, View, Controller

43. Persistent

44. Valid
Source: stock.xchng, Al Nakib

45. CSS
Designer

46. XHTML
Developer & Seaside

47. DRY
Don't Repeat Yourself

48. Domain Specific
Language

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

50. 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>

51. Demo

52. 3
Secure by
Default

53. Cross Site Scripting
Source: stock.xchng, Afonso Lima

54. Output is encoded
by default

55. html text: '<script>alert(''xss'')</script>'
&lt;script&gt;alert('xss');&lt;/script&gt;

56. Replay Attacks
Source: stock.xchng, Afonso Lima

57. Session
_s=Ru8ZKgqjy0uDX3kf
96-bit

58. Page
_k=K5EQyqKE
48-bit

59. Parameter Tampering
Source: stock.xchng, Afonso Lima

60. Names are generated
automatically

61. Names are bound
to functions

62. No manual
request parsing

63. Don’t call Seaside,
Seaside will call you
Source: stock.xchng, Pawel Zawistowski

64. html anchor
! callback: [ self inform: ‘Hello World’ ];
! with: ‘Show Message’
<a href=”/seaside/example1
quot; ?_s=Ru8ZKgqjy0uDX3kf
quot; &_k=K5EQyqKE
! &32”>Show Message</a>

66. Web 2.0

67. Source: Flickr, Benjamin Jackson

68. AJAX
Source: Flickr, Benjamin Jackson

69. Tight, but optional
integration

70. Feature complete
and up-to-date

71. Say it in Smalltalk

72. Source: Flickr, psrman's

73. Comet
Source: Flickr, psrman's

74. Demo
scriptaculous.seasidehosting.st

75. 5
Applications

76. In productive use
since 2002

79. Demo

81. Seaside

82. MIT License

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