Web Development: The Next Five Years

Slide 1: Web Development: The Next 5 Years

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

Slide 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

Slide 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

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

Slide 6: Talk slower!

Slide 7: XHTML 2.0 & HTML 5

Slide 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

Slide 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

Slide 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

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

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

Slide 13: CSS 3.0

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

Slide 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; }

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

Slide 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

Slide 18: More http://css3.info/

Slide 19: ECMAScript 4 (JavaScript 2)

Slide 20: One metric shitload of awesome new stuff

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

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

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

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

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

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

Slide 27: Demo

Slide 28: WTF is CouchDB?

Slide 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

Slide 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

Slide 31: Demo

Slide 32: WTF is Comet?

Slide 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

Slide 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

Slide 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

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

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

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

Slide 39: Demo

Slide 40: That’s it, questions?

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

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

Slide 43: Thanks

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