Web Development:
The Next 5 Years

Introduction
John Sutherland
http://sneeu.com/john/

The talk
• It’s all about the future
• Silverlight, AIR both failed to take off
• The browser isn’t going anywhere
• And open standards are the way forward

The talk (2)
• Interested in too many things
• Loads of talk ideas
• A few frontend, a few backend
• Nothing I thought would be > 5 minutes
• So ... 5 small topics = 30 minutes

The topics
• XHTML 2.0 & HTML 5
• CSS 3.0
• ECMAScript 4 (JavaScript 2)
• WTF is CouchDB?
• WTF is Comet? (the money-shot)

Talk slower!

XHTML 2.0 & HTML 5

X2: What’s cool?
• No more shitty tags: acronym, b, i, tt,
font, basefont, big, small, or iframe
• Sections and headers: section and h
• Any thing can be a link with @href
• The new navigation list, nl

X2: What’s not cool?
• h1-h6 remain despite section and h
• a and img are still around
• The lengthy and closed W3C process

H5: What’s cool?
• The new m element (for marked/
highlighted)
• input@type is now on speed
• The process is more open than XHTML 2

H5: What’s not cool?
• font returns‽
• Predefined @class names
• Continued support for b, i, iframe,
small & co.

More
http://xhtml.com/en/future/x-html-5-versus-xhtml-2/

CSS 3.0

It’s going to rock
• Multiple background images
• Box shadows
• Multi-column layout
• Hot-ass attribute & pseudo selectors
• Media queries
• Advanced layout

Multiple backgrounds
#content {
background:
url(top_center.png) repeat-x top
url(top_left.png) no-repeat left top
url(top_right.png) no-repeat right top;
}

Advanced Layout
body {
display: “abb”
“cbb”
}
#branding { position: a; }
#interest { position: b; }
#navigation { position: c; }

Some of it works now!
• :target pseudo selector in FF & Safari
• text-shadow property in Safari
• Multi-column layout in FF & Safari
• Multiple backgrounds in Safari

More
http://css3.info/

ECMAScript 4
(JavaScript 2)

One metric shitload of
awesome new stuff

Type Annotations
• function indexOf(
needle : string,
haystack : string) : int {
// ...
}
• var age : int = 25;
• var name : string! = \"John\";

Classes
class WebDeveloper extends Developer {
// must be initialised:
var favDoctype : string!;
override function say(s) {
return \"<![CDATA[\" + s + \" and AJAX!]]>\";
}
}
var d = new WebDeveloper;

Classes (2)
• final keyword: cannot be extended
• dynamic keyword: can have properties
added at runtime
• Interfaces: just like Java used to make

Functions
• generic keyword: overload function
names, just like Java
• Better var-args
function f(fixed : String,
...extras : [String]) {}
• intrinsic keyword: operator
overloading

More
• let blocks:
let (x = 0) { /* x == 0 */ }
// x is undefined
• for each:
for each (
let n in [1, 2, 3, 5]) // ...

More
http://ejohn.org/blog/ecmascript-4-speaking-tour/

Demo

WTF is CouchDB?

CouchDB
• Succinctly: “a RESTful JSON document
store”
• RESTful: uses nice URLs and HTTP
verbs (GET, POST, PUT & DELETE)
• JSON: JavaScript Object Notation
• Document: an arbitrary (but not
necessarily) JSON structure

CouchDB: what else?
• JavaScript views & queries: built on
Mozilla’s SpiderMonkey
• Lucene powered full-text search
• Replication: online & offline
• No authentication yet (will have doc-level)
• An absolute shit to setup

Demo

WTF is Comet?

You know AJAX ...?
• Great for async- sending to the server
• Rubbish for async- receiving from the
server
• Chat
• Real-time data: stock prices; Weewar
• Other server-event stuff

Comet solves it
• The name is a play on the AJAX bleach
• All sorts of ways to implement it, ‘Comet’
refers to them all
• “Forever frame”
• Dynamic script long polling
• XHR long polling

Comet solves it (2)
• All Comet implementations are mondo-
hacks
• Recent hype is about Bayeux:
• Dojo Foundation specification
• A standard way to pass around JSON
• A pub/sub model

Client-side
• Pages & screens served up as normal
• Use XHR long polling to wait for events
• Server blocks until event worth returning

JavaScript libraries
• Dojo: loads working; responsible for
Bayeux.
• jQuery: plugin available
• Prototype: couldn’t find much
• MooTools: discussion in the forums

The server-side
• I’ve mostly looked at Python
• twisted-cometd
• Orbited (pyEvent based)
• pyorbited (Python Comet client)
• Certainly tools in most languages
• Jetty 6.1 (Java app-server with comet)

Demo

That’s it, questions?

http://sneeu.com/barcampscotland2008/
these slides and more

Photos
• http://flickr.com/photos/cs___/1185503907/
• http://flickr.com/photos/anthonybaker/59254428/
• http://flickr.com/photos/elchicodelaleche/451117110/
• http://flickr.com/photos/stinkypeter/1353500787/
• http://flickr.com/photos/jeffrey/212073003/
• http://flickr.com/photos/roadsidepictures/495353912/
• http://flickr.com/photos/paulmoody/349360565/

Thanks

c bna
This work is licensed under the Creative Commons Attribution-
Noncommercial-Share Alike 2.5 UK: Scotland License. To view a copy
of this license, visit http://creativecommons.org/licenses/by-nc-sa/2.5/
scotland/ or send a letter to Creative Commons, 171 Second Street,
Suite 300, San Francisco, California, 94105, USA.