Real World Seaside Applications
-
Upload
esug -
Category
Technology
-
view
1.518 -
download
1
description
Transcript of Real World Seaside Applications
![Page 1: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/1.jpg)
Real world
applications
Nick Ager@nickager
![Page 2: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/2.jpg)
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
![Page 3: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/3.jpg)
Wysiwyg editor
![Page 4: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/4.jpg)
Wysiwyg editors• Many online editors available:
• CKEditor
• OpenBEXI
• TinyMCE
• YUI Rich Text Editor
• WYMeditor
http://en.wikipedia.org/wiki/Online_rich-text_editor
![Page 5: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/5.jpg)
Wysiwyg issues
• Javascript
• forms
• redefine styles
• redirects
• etc
There are bad guys on the internet
With raw html upload, need to guard against:
![Page 6: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/6.jpg)
Demo
![Page 7: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/7.jpg)
Uploading filesUploadForm>>renderContentOn: html html form multipart; with: [ html fileUpload 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
Not real world
![Page 8: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/8.jpg)
File uploading
Real world
Internet orSeaside image
file written to the filesystem
http://www.squeaksource.com/fileupload
![Page 9: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/9.jpg)
FileuploadrenderFormOn: html! 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'))]
].! ! ! !! ! ! startFileUploadJS := String streamContents: [ :stream | ! ! ! ! stream nextPutAll: 'fileUploadStart'.! ! ! ! JSStream encodeArguments: ! ! ! ! ! (Array ! ! ! ! ! ! with: (html jQuery id: fileUploadId)! ! ! ! ! ! with: (html jQuery id: self formId)! ! ! ! ! ! with: (html jQuery id: self hiddenXProgressId)! ! ! ! ! ! with: self configuration javascriptCallbacks) ! ! ! ! ! on: stream ].! ! ! ! ! ! !! ! ! self configuration onRenderForm value: html value: fileUploadField value: startFileUploadJS ].!! self renderHiddenIFrameOn: html
![Page 10: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/10.jpg)
File downloading
Real world
Internet orSeaside image
js, css, png etc served from the filesystem
![Page 11: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/11.jpg)
Writing contents of WAFileLibraries
WAFileLibrary allSubclasses do: [:each | each deployFiles]WAFileMetadataLibrary allSubclasses do: [:each | each deployFiles]
![Page 12: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/12.jpg)
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
![Page 13: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/13.jpg)
Ensuring the look of your site doesn’t suck
• Twitter bootstrap
http://twitter.github.com/bootstrap/
“Sleek, intuitive, and powerful front-end framework for faster and easier web development”Layout file blueprintcss for buttons, tabs,
drop-downs etc
![Page 14: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/14.jpg)
Examples using bootstap
• http://smalltalkhub.com
• Pharo Association
• Pier Admin Setup
• Magritte Twitter Bootstrap integration
![Page 15: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/15.jpg)
WAFileMetadataLibrary
New Seaside 3.07
![Page 16: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/16.jpg)
![Page 17: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/17.jpg)
Twitter bootstrap Seaside integration
![Page 18: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/18.jpg)
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)
![Page 19: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/19.jpg)
Hardening your image for production #2
application := WAApplication new.! WAAdmin configureNewApplication: application.! application preferenceAt: #rootClass put: YOURROOTCOMPONENT.
WAServerManager default adaptors do: [ :each | each requestHandler: application ]
Only your root component
"flush all Monticello definitions" MCMethodDefinition cachedDefinitions removeAll. MCFileBasedRepository allSubInstancesDo: [:ea | ea flushCache].
flush caches
![Page 20: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/20.jpg)
Useful libraries
• JQWidgetBoxhttp://www.squeaksource.com/JQueryWidgetBox/
• Seaside-REST http://www.squeaksource.com/Seaside30Addons/
• Magritte-JSON
• Magritte-XMLhttp://source.lukas-renggli.ch/magritteaddons/
![Page 21: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/21.jpg)
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
![Page 22: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/22.jpg)
Choosing a host
• Cost (bandwidth, processing power, memory file space etc)
• Low latency
• Free hosting on a micro instance for a year
![Page 23: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/23.jpg)
![Page 24: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/24.jpg)
Questions
• Share your experience of real-world Seaside deployment
![Page 25: Real World Seaside Applications](https://reader033.fdocuments.net/reader033/viewer/2022052523/555bdebdd8b42a33078b487c/html5/thumbnails/25.jpg)
x forwarding
Host seasideserver! User seasideuser! HostName 172.16.181.203! ForwardX11 yes! ForwardX11Trusted yes! Compression yes! ForwardAgent yes
$ ssh seasideserver