Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Seaside - Web Development As You Like It

5,080 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
  • Be the first to comment

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

×