Seaside - Web Development As You Like It

33 %
67 %
Information about Seaside - Web Development As You Like It

Published on January 25, 2008

Author: renggli

Source: slideshare.net

Description

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.

Web development, as you it

Lukas Renggli Academics PhD Student, University of Bern Industry Independent Software Consultant Communities Core-developer of Seaside Author of Magritte and Pier

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; value=quot;OKquot;> </form>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

Web Browser

Web Browser

/first parsing processing formatting Web Browser

/first parsing processing formatting value1 Web Browser

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

/first /second parsing parsing processing processing value1, value2 formatting formatting value1 value1 Web Browser

/first /second /result parsing parsing parsing processing processing processing value1, value2 formatting formatting formatting value1 value1 result Web Browser

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’ ] <div id=”list”> <span class=”item”>Item 1</span> <span class=”item”>Item 2</span> </div>

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=Ru8ZKgqjy0uDX3kf quot; &_k=K5EQyqKE ! &32”>Show Message</a>

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

Add a comment

Related presentations

Related pages

Web development, as you it

Web development, as you it. Lukas Renggli Academics PhD Student, University of Bern Industry Independent Software Consultant ... Developer & Seaside. DRY
Read more

Seaside - a Squeak Web Development Environment

Seaside - a Squeak Web Development Environment. headers. ... But in the ported version of the application no box appears if you click the associated link.
Read more

The Seaside in the Victorian Literary Imagination

Oh I do like to be beside the seaside, I do like to be beside the sea, I do ... a mass of life such as you will seldom ... The Development of Leisure in ...
Read more

History of the Town of Seaside on Florida's Gulf Coast ...

History. The Dream of a Simple, Beautiful Life. ... It seems impossible to imagine, but long before what you see today, Seaside was just a dream.
Read more

Welcome to Seaside, Oregon's Official Website | City of ...

Community Development. Building ... website conveys a sense of what Seaside is like while helping you find the ... If you would like to view the ...
Read more

GemStone Seaside | About

... development using GemStone/S and Seaside. ... like web applications. GLASS makes GemStone's ... GemStone/Seaside applications, as long as you ...
Read more

Official Site for Seaside, Florida News, Events, Real ...

Explore Seaside Florida: upcoming events, news, real estate information, vacation rentals, photos and stories. SEASIDE FLORIDA A simple, beautiful life. Home;
Read more

Seaside, Oregon - Wikipedia, the free encyclopedia

Seaside is a city in Clatsop County, Oregon, United States. The name Seaside is derived from Seaside House, ... Seaside Downtown Development Association;
Read more

The Victorian Seaside - BBC - Home

The Victorian seaside: ... Londoners, like, for example, ... While you will be able to view the content of this page in your current browser, ...
Read more