The talk I gave at BarcampScotland2008.

1. Web Development:
The Next 5 Years

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

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

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

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

6. Talk slower!

7. XHTML 2.0 & HTML 5

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

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

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

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

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

13. CSS 3.0

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

15. 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;
}

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

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

18. More
http://css3.info/

19. ECMAScript 4
(JavaScript 2)

20. One metric shitload of
awesome new stuff

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

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

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

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

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

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

27. Demo

28. WTF is CouchDB?

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

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

31. Demo

32. WTF is Comet?

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

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

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

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

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

38. 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)

39. Demo

40. That’s it, questions?

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

42. 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/

43. Thanks

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