Real world applications  Nick Ager  @nickager
Agenda•   Dealing with user generated content    •   Wysiwyg    •   Uploading files•   Ensuring your site’s look does not s...
Wysiwyg editor
Wysiwyg editors       • Many online editors available:        • CKEditor        • OpenBEXI        • TinyMCE        • YUI R...
Wysiwyg issues  There are bad guys on the internet  With raw html upload, need to  guard against:   •   Javascript   •   f...
Demo
Uploading files                                                  worldUploadForm>>renderContentOn: html                    ...
File uploading                                  world                             Real                                    ...
renderFormOn: html                             Fileupload!   html form!   !   multipart;!   !   with: [!   !   !   | fileU...
File downloading                               world                          Real                                   Seasi...
Writing contents of       WAFileLibrariesWAFileLibrary allSubclasses do: [:each | each deployFiles]WAFileMetadataLibrary a...
mod_xsendfile• Allows front-end server to server files that  its doesn’t have direct access to eg  • downloading files that r...
Ensuring the look ofyour site doesn’t suck                • Twitter bootstrap                “Sleek, intuitive, and powerf...
Examples using          bootstap• http://smalltalkhub.com• Pharo Association• Pier Admin Setup• Magritte Twitter Bootstrap...
WAFileMetadataLibrary                     e3 .07              S easid          New
Twitter bootstrapSeaside integration
Hardening your image   for production• Only load what you need • Seaside-Tools-Web (/config) • Seaside-Development (halos, ...
Hardening your image              for production #2      Only your root component            application := WAApplication ...
Useful libraries• JQWidgetBox  http://www.squeaksource.com/JQueryWidgetBox/• Seaside-REST  http://www.squeaksource.com/Sea...
Hosting•   seasidehosting.st    •   Works only with Pharo 1.2 (non stack VM)    •   REALLY useful for demos eg:        •  ...
Choosing a host• Cost (bandwidth, processing power, memory  file space etc)• Low latency• Free hosting on a micro instance ...
Questions• Share your experience of real-world  Seaside deployment
x forwardingHost seasideserver! User seasideuser! HostName 172.16.181.203! ForwardX11 yes! ForwardX11Trusted yes! Compress...
Real World Seaside Applications
Real World Seaside Applications
Upcoming SlideShare
Loading in …5
×

Real World Seaside Applications

2,154 views

Published on

ESUG 2012, Ghent

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,154
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Real World Seaside Applications

  1. 1. Real world applications Nick Ager @nickager
  2. 2. Agenda• Dealing with user generated content • Wysiwyg • Uploading files• Ensuring your site’s look does not suck• Hardening your image for production• Useful libraries• Hosting
  3. 3. Wysiwyg editor
  4. 4. Wysiwyg editors • Many online editors available: • CKEditor • OpenBEXI • TinyMCE • YUI Rich Text Editor • WYMeditorhttp://en.wikipedia.org/wiki/Online_rich-text_editor
  5. 5. Wysiwyg issues There are bad guys on the internet With raw html upload, need to guard against: • Javascript • forms • redefine styles • redirects • etc
  6. 6. Demo
  7. 7. Uploading files worldUploadForm>>renderContentOn: html ot re al html form multipart; with: [ html fileUpload N callback: [ :value | self receiveFile: value ]. html submitButton: Send File ]UploadForm>>receiveFile: aFile | stream | stream := (FileDirectory default directoryNamed: uploads) assureExistence; forceNewFileNamed: aFile fileName. [ stream binary; nextPutAll: aFile rawContents ] ensure: [ stream close ] http://book.seaside.st/book/fundamentals/forms/fileupload
  8. 8. File uploading world Real SeasideInternet or image file written to the filesystem http://www.squeaksource.com/fileupload
  9. 9. renderFormOn: html Fileupload! html form! ! multipart;! ! with: [! ! ! | fileUploadField fileUploadId startFileUploadJS |! !! ! ! fileUploadField := html fileUpload! ! ! ! id: (fileUploadId := html nextId);! ! ! ! callback: [ :file | ].! ! !! ! ! html hiddenInput! ! ! ! callback: [:val | | uploadFieldName theRequestContext postFields |! ! ! ! ! uploadFieldName := fileUploadField attributeAt: name.! ! ! ! ! theRequestContext := self requestContext. postFields := theRequestContext request postFields. filename := (postFields at: (uploadFieldName, .name) ifAbsent: [ ^ self ]). uploadFilePath := postFields at: (uploadFieldName , .path). filesize := (postFields at: (uploadFieldName , .size)) greaseInteger. mimeType := WAMimeType fromString: (postFields at: (uploadFieldName , .content_type))] ].! ! ! !
  10. 10. File downloading world Real SeasideInternet or image js, css, png etc served from the filesystem
  11. 11. Writing contents of WAFileLibrariesWAFileLibrary allSubclasses do: [:each | each deployFiles]WAFileMetadataLibrary allSubclasses do: [:each | each deployFiles]
  12. 12. mod_xsendfile• Allows front-end server to server files that its doesn’t have direct access to eg • downloading files that require authentication • file doesn’t need to be loaded in the image
  13. 13. Ensuring the look ofyour site doesn’t suck • Twitter bootstrap “Sleek, intuitive, and powerful front-end framework for faster and easier web development” Layout file blueprint css for buttons, tabs, drop-downs etc http://twitter.github.com/bootstrap/
  14. 14. Examples using bootstap• http://smalltalkhub.com• Pharo Association• Pier Admin Setup• Magritte Twitter Bootstrap integration
  15. 15. WAFileMetadataLibrary e3 .07 S easid New
  16. 16. Twitter bootstrapSeaside integration
  17. 17. Hardening your image for production• Only load what you need • Seaside-Tools-Web (/config) • Seaside-Development (halos, browser)• Try a minimal Pharo image (eg Pharo Kernel)
  18. 18. Hardening your image for production #2 Only your root component application := WAApplication new. ! WAAdmin configureNewApplication: application. ! application preferenceAt: #rootClass put: YOURROOTCOMPONENT. WAServerManager default adaptors do: [ :each | each requestHandler: application ] flush caches "flush all Monticello definitions" MCMethodDefinition cachedDefinitions removeAll. MCFileBasedRepository allSubInstancesDo: [:ea | ea flushCache].
  19. 19. Useful libraries• JQWidgetBox http://www.squeaksource.com/JQueryWidgetBox/• Seaside-REST http://www.squeaksource.com/Seaside30Addons/• Magritte-JSON• Magritte-XML http://source.lukas-renggli.ch/magritteaddons/
  20. 20. Hosting• seasidehosting.st • Works only with Pharo 1.2 (non stack VM) • REALLY useful for demos eg: • jquerymobile.seasidehosting.st • twitterbootstrap.seasidehosting.st • troller.seasidehosting.st• Not a real world solution
  21. 21. Choosing a host• Cost (bandwidth, processing power, memory file space etc)• Low latency• Free hosting on a micro instance for a year
  22. 22. Questions• Share your experience of real-world Seaside deployment
  23. 23. x forwardingHost seasideserver! User seasideuser! HostName 172.16.181.203! ForwardX11 yes! ForwardX11Trusted yes! Compression yes! ForwardAgent yes$ ssh seasideserver

×