5 Steps to Mastering the Art of Seaside

5,283 views

Published on

Seaside does things differently from what is considered best practice for Web development. Seaside breaks with common best practices, such as sharing as little state as possible, using clean and carefully chosen URLs, and using templates to separate model and presentation.

This tutorial will give a quick introduction to a Web framework that is different by design. It will demonstrate new patterns of Web development, that let you build highly interactive Web applications quickly, reusably and maintainably. Moreover it will show how Seaside integrates with latest technologies such as AJAX and Comet.

Lukas Renggli is a core developer of the Seaside web application framework. He has been using Seaside in industrial settings for more than 5 years. Lukas Renggli is the author of several frameworks built on top of Seaside, such as the Pier Content Management System.

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

No Downloads
Views
Total views
5,283
On SlideShare
0
From Embeds
0
Number of Embeds
492
Actions
Shares
0
Downloads
164
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

5 Steps to Mastering the Art of Seaside

  1. 1. www.seaside.st www.lukas-renggli.ch
  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. Web Application Framework
  4. 4. MIT License
  5. 5. Seaside is different by design
  6. 6. We share as much state as possible
  7. 7. We don’t use meaningful URLs
  8. 8. We don’t use templates
  9. 9. Seaside Applications are written in Smalltalk
  10. 10. 5 Steps to Mastering The Art of Seaside
  11. 11. Agenda Getting Started — 15 min Components — 15 min Callbacks — 15 min Control Flow — 15 min Outlook — 15 min
  12. 12. Getting Started
  13. 13. } Squeak, Seaside, Application } (Platform Independent) Demo VM
  14. 14. Demo
  15. 15. Classes Methods Demo Save & Compile (Command+S) Source Code
  16. 16. Smalltalk Everything is an object Single inheritance Method invokation is late bound Methods are public Instance variables are private
  17. 17. Syntactic Elements Comment quot;a lovely commentquot; Character $a String 'a nice string' Symbol #something Integer 123 Float 2.718 Array #( 1 2 3 ) Receiver self super Boolean true false Undefined nil
  18. 18. Syntax (I) Temporary Variable | var | Assignment var := aNumber Block Closures [ stmts ... ] [ :arg1 | stmts ... ] [ :arg1 :arg2 | stmts ... ] 1. Unary message receiver doThis 2. Binary message receiver + arg 3. Keyword message receiver doThis: arg receiver doThis: 2 andThat: 1
  19. 19. Syntax (II) Cascade receiver doThis: 123; doThat Statement stmt1. stmt2 stmt1. stmt2. stmt3 Return ^ stmt Parenthesis (stmt)
  20. 20. Demo
  21. 21. Your Turn
  22. 22. Components
  23. 23. We don’t think in pages ...
  24. 24. ..., but in stateful components
  25. 25. Demo
  26. 26. Demo
  27. 27. Widgets
  28. 28. View + Controller
  29. 29. Persistent
  30. 30. WAComponent HelloWorld
  31. 31. Canvas and Brush Source: stock.xchng, Maarten Uilenbroek
  32. 32. CSS Designer
  33. 33. XHTML Developer & Seaside
  34. 34. DSL
  35. 35. HelloWorld renderContentOn: html html render: 'Hello World'
  36. 36. html div id: ‘title’; with: ‘Title’ <div id=”title”>Title</div>
  37. 37. 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>
  38. 38. Your Turn
  39. 39. 3 Interaction
  40. 40. No freaking request parsing
  41. 41. I call you Don’t ask me, Source: stock.xchng, Levi Szekeres
  42. 42. Callbacks
  43. 43. html anchor callback: [ self inform: ‘Hello World’ ]; with: ‘Show Message’
  44. 44. html textInput value: name; callback: [ :value | name := value ]
  45. 45. Callbacks Anchors Form Elements Text Fields Text Area Radio Buttons Check Boxes Selectable List Buttons
  46. 46. 3 Your Turn
  47. 47. Control Flow
  48. 48. Demo
  49. 49. <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;> <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;textquot; name=quot;value2quot;> <input type=quot;submitquot; value=quot;OKquot;> <input type=quot;submitquot; value=quot;OKquot;> </form> </form> <p> <% value1 + value2 %> </p>
  50. 50. /first /second /result parsing parsing parsing processing processing processing value1, value2 formatting formatting formatting value1 value1 result Web Browser
  51. 51. Who cares about HTTP anyway?
  52. 52. Seaside is different
  53. 53. | value1 value2 | value1 := self request: ‘First Number’. value2 := self request: ‘Second Number’. self inform: value1 asNumber + value2 asNumber.
  54. 54. x := A call: B A B
  55. 55. B answer: A B
  56. 56. x := A
  57. 57. Your Turn
  58. 58. 5 Outlook
  59. 59. Web 2.0
  60. 60. ✓ XHTML
  61. 61. ✓ CSS
  62. 62. ✓ RSS
  63. 63. AJAX Source: Flickr, Benjamin Jackson
  64. 64. Tight, but optional integration
  65. 65. Feature complete and up-to-date
  66. 66. Say it in Smalltalk
  67. 67. Demo
  68. 68. Comet Source: Flickr, psrman's
  69. 69. Server Push
  70. 70. Demo
  71. 71. Applications
  72. 72. In productive use since 2002
  73. 73. Demo
  74. 74. Demo
  75. 75. Demo
  76. 76. Demo
  77. 77. Demo http://www.seasidehosting.st
  78. 78. Did you notice?
  79. 79. Web applications
  80. 80. No URL fiddling
  81. 81. No request parsing
  82. 82. Development tools at your fingertips
  83. 83. Control flow at ease
  84. 84. www.seaside.st www.lukas-renggli.ch

×