Web Development:The Next 5 Years

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

Morehttp://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

Morehttp://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]) // ...

Morehttp://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 bnaThis 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.