Web development,
  as you    it
Lukas Renggli
Academics
  PhD Student, University of Bern
Industry
  Independent Software Consultant
Communities
  Core-de...
Agenda

Natural Flow
Reusable Components
Secure by Default
Web 2.0
Applications
1
Natural Flow
Demo
<form action=quot;second.htmlquot;>
   <input type=quot;textquot; name=quot;value1quot;>
   <input type=quot;submitquot; v...
<form action=quot;second.htmlquot;>
   <input type=quot;textquot; name=quot;value1quot;>
   <input type=quot;submitquot; v...
<form action=quot;second.htmlquot;>
   <input type=quot;textquot; name=quot;value1quot;>
   <input type=quot;submitquot; v...
<form action=quot;second.htmlquot;>
   <input type=quot;textquot; name=quot;value1quot;>
   <input type=quot;submitquot; v...
<form action=quot;second.htmlquot;>
   <input type=quot;textquot; name=quot;value1quot;>
   <input type=quot;submitquot; v...
<form action=quot;second.htmlquot;>
   <input type=quot;textquot; name=quot;value1quot;>
   <input type=quot;submitquot; v...
<form action=quot;second.htmlquot;>
   <input type=quot;textquot; name=quot;value1quot;>
   <input type=quot;submitquot; v...
<form action=quot;second.htmlquot;>
   <input type=quot;textquot; name=quot;value1quot;>
   <input type=quot;submitquot; v...
Web Browser
Web Browser
/first
  parsing
processing
formatting




             Web Browser
/first
  parsing
processing
formatting


             value1




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




             ...
/first                   /second                        /result
  parsing                   parsing                       p...
Who cares about
HTTP anyway?
is different
Concentrate on
your application ...
... no manual
request parsing
... no XML
configuration files
3 user interactions
3 lines of code
value1 := self request: ‘First Number’.
value1 := self request: ‘First Number’.
value2 := self request: ‘Second Number’.
value1 := self request: ‘First Number’.
value2 := self request: ‘Second Number’.
self inform: value1 + value2.
Demo
Reusable
Components
We don’t think in
   pages ...
..., but in stateful
   components
Demo
Demo
Components
  are c! l
        !
Reuseable
Model




    View           Controller




Model, View, Controller
Persistent
Valid




Source: stock.xchng, Al Nakib
CSS
Designer
XHTML
Developer & Seaside
DRY
Don't Repeat Yourself
Domain Specific
  Language
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’ ]




<d...
Demo
3
Secure by
 Default
Cross Site Scripting




Source: stock.xchng, Afonso Lima
Output is encoded
    by default
html text: '<script>alert(''xss'')</script>'




&lt;script&gt;alert('xss');&lt;/script&gt;
Replay Attacks




Source: stock.xchng, Afonso Lima
Session
_s=Ru8ZKgqjy0uDX3kf

       96-bit
Page
_k=K5EQyqKE

   48-bit
Parameter Tampering




Source: stock.xchng, Afonso Lima
Names are generated
   automatically
Names are bound
  to functions
No manual
request parsing
Don’t call Seaside,
Seaside will call you




                        Source: stock.xchng, Pawel Zawistowski
html anchor
! callback: [ self inform: ‘Hello World’ ];
! with: ‘Show Message’




<a href=”/seaside/example1
quot; ?_s=Ru...
Web 2.0
Source: Flickr, Benjamin Jackson
AJAX




Source: Flickr, Benjamin Jackson
Tight, but optional
    integration
Feature complete
 and up-to-date
Say it in Smalltalk
Source: Flickr, psrman's
Comet




Source: Flickr, psrman's
Demo
scriptaculous.seasidehosting.st
5
Applications
In productive use
    since 2002
Demo
Seaside
MIT License
www.seaside.st
www.lukas-renggli.ch
Seaside - Web Development As You Like It
Seaside - Web Development As You Like It
Seaside - Web Development As You Like It
Seaside - Web Development As You Like It
Seaside - Web Development As You Like It
Seaside - Web Development As You Like It
Seaside - Web Development As You Like It
Seaside - Web Development As You Like It
Upcoming SlideShare
Loading in …5
×

Seaside - Web Development As You Like It

4,873 views
4,708 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,873
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
98
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Seaside - Web Development As You Like It

  1. 1. Web development, as you it
  2. 2. Lukas Renggli Academics PhD Student, University of Bern Industry Independent Software Consultant Communities Core-developer of Seaside Author of Magritte and Pier
  3. 3. Agenda Natural Flow Reusable Components Secure by Default Web 2.0 Applications
  4. 4. 1 Natural Flow
  5. 5. Demo
  6. 6. <form action=quot;second.htmlquot;> <input type=quot;textquot; name=quot;value1quot;> <input type=quot;submitquot; value=quot;OKquot;> </form>
  7. 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. 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. 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. 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. 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. 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. 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. 14. Web Browser
  15. 15. Web Browser
  16. 16. /first parsing processing formatting Web Browser
  17. 17. /first parsing processing formatting value1 Web Browser
  18. 18. /first /second parsing parsing processing processing formatting formatting value1 value1 Web Browser
  19. 19. /first /second parsing parsing processing processing value1, value2 formatting formatting value1 value1 Web Browser
  20. 20. /first /second /result parsing parsing parsing processing processing processing value1, value2 formatting formatting formatting value1 value1 result Web Browser
  21. 21. Who cares about HTTP anyway?
  22. 22. is different
  23. 23. Concentrate on your application ...
  24. 24. ... no manual request parsing
  25. 25. ... no XML configuration files
  26. 26. 3 user interactions
  27. 27. 3 lines of code
  28. 28. value1 := self request: ‘First Number’.
  29. 29. value1 := self request: ‘First Number’. value2 := self request: ‘Second Number’.
  30. 30. value1 := self request: ‘First Number’. value2 := self request: ‘Second Number’. self inform: value1 + value2.
  31. 31. Demo
  32. 32. Reusable Components
  33. 33. We don’t think in pages ...
  34. 34. ..., but in stateful components
  35. 35. Demo
  36. 36. Demo
  37. 37. Components are c! l !
  38. 38. Reuseable
  39. 39. Model View Controller Model, View, Controller
  40. 40. Persistent
  41. 41. Valid Source: stock.xchng, Al Nakib
  42. 42. CSS Designer
  43. 43. XHTML Developer & Seaside
  44. 44. DRY Don't Repeat Yourself
  45. 45. Domain Specific Language
  46. 46. html div id: ‘title’; with: ‘Title’ <div id=”title”>Title</div>
  47. 47. 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>
  48. 48. Demo
  49. 49. 3 Secure by Default
  50. 50. Cross Site Scripting Source: stock.xchng, Afonso Lima
  51. 51. Output is encoded by default
  52. 52. html text: '<script>alert(''xss'')</script>' &lt;script&gt;alert('xss');&lt;/script&gt;
  53. 53. Replay Attacks Source: stock.xchng, Afonso Lima
  54. 54. Session _s=Ru8ZKgqjy0uDX3kf 96-bit
  55. 55. Page _k=K5EQyqKE 48-bit
  56. 56. Parameter Tampering Source: stock.xchng, Afonso Lima
  57. 57. Names are generated automatically
  58. 58. Names are bound to functions
  59. 59. No manual request parsing
  60. 60. Don’t call Seaside, Seaside will call you Source: stock.xchng, Pawel Zawistowski
  61. 61. html anchor ! callback: [ self inform: ‘Hello World’ ]; ! with: ‘Show Message’ <a href=”/seaside/example1 quot; ?_s=Ru8ZKgqjy0uDX3kf quot; &_k=K5EQyqKE ! &32”>Show Message</a>
  62. 62. Web 2.0
  63. 63. Source: Flickr, Benjamin Jackson
  64. 64. AJAX Source: Flickr, Benjamin Jackson
  65. 65. Tight, but optional integration
  66. 66. Feature complete and up-to-date
  67. 67. Say it in Smalltalk
  68. 68. Source: Flickr, psrman's
  69. 69. Comet Source: Flickr, psrman's
  70. 70. Demo scriptaculous.seasidehosting.st
  71. 71. 5 Applications
  72. 72. In productive use since 2002
  73. 73. Demo
  74. 74. Seaside
  75. 75. MIT License
  76. 76. www.seaside.st www.lukas-renggli.ch

×