web development: the next five years
DESCRIPTION
The talk I gave at BarcampScotland2008.TRANSCRIPT
![Page 1: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/1.jpg)
Web Development:The Next 5 Years
![Page 2: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/2.jpg)
IntroductionJohn Sutherland
http://sneeu.com/john/
![Page 3: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/3.jpg)
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
![Page 4: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/4.jpg)
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
![Page 5: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/5.jpg)
The topics
• XHTML 2.0 & HTML 5
• CSS 3.0
• ECMAScript 4 (JavaScript 2)
• WTF is CouchDB?
• WTF is Comet? (the money-shot)
![Page 6: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/6.jpg)
Talk slower!
![Page 7: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/7.jpg)
XHTML 2.0 & HTML 5
![Page 8: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/8.jpg)
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
![Page 9: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/9.jpg)
X2: What’s not cool?
• h1-h6 remain despite section and h
• a and img are still around
• The lengthy and closed W3C process
![Page 10: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/10.jpg)
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
![Page 11: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/11.jpg)
H5: What’s not cool?
• font returns‽
• Predefined @class names
• Continued support for b, i, iframe, small & co.
![Page 12: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/12.jpg)
Morehttp://xhtml.com/en/future/x-html-5-versus-xhtml-2/
![Page 13: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/13.jpg)
CSS 3.0
![Page 14: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/14.jpg)
It’s going to rock
• Multiple background images
• Box shadows
• Multi-column layout
• Hot-ass attribute & pseudo selectors
• Media queries
• Advanced layout
![Page 15: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/15.jpg)
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;
}
![Page 16: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/16.jpg)
Advanced Layout
body {
display: “abb”
“cbb”
}
#branding { position: a; }
#interest { position: b; }
#navigation { position: c; }
![Page 17: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/17.jpg)
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
![Page 18: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/18.jpg)
Morehttp://css3.info/
![Page 19: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/19.jpg)
ECMAScript 4(JavaScript 2)
![Page 20: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/20.jpg)
One metric shitload of awesome new stuff
![Page 21: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/21.jpg)
Type Annotations
• function indexOf(
needle : string,
haystack : string) : int {
// ...
}
• var age : int = 25;
• var name : string! = "John";
![Page 22: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/22.jpg)
Classes
class WebDeveloper extends Developer {
// must be initialised:
var favDoctype : string!;
override function say(s) {
return "<![CDATA[" + s + " and AJAX!]]>";
}
}
var d = new WebDeveloper;
![Page 23: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/23.jpg)
Classes (2)
• final keyword: cannot be extended
• dynamic keyword: can have properties added at runtime
• Interfaces: just like Java used to make
![Page 24: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/24.jpg)
Functions
• generic keyword: overload function names, just like Java
• Better var-args
function f(fixed : String,
...extras : [String]) {}
• intrinsic keyword: operator overloading
![Page 25: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/25.jpg)
More
• let blocks:
let (x = 0) { /* x == 0 */ }
// x is undefined
• for each:
for each (
let n in [1, 2, 3, 5]) // ...
![Page 26: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/26.jpg)
Morehttp://ejohn.org/blog/ecmascript-4-speaking-tour/
![Page 27: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/27.jpg)
Demo
![Page 28: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/28.jpg)
WTF is CouchDB?
![Page 29: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/29.jpg)
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
![Page 30: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/30.jpg)
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
![Page 31: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/31.jpg)
Demo
![Page 32: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/32.jpg)
WTF is Comet?
![Page 33: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/33.jpg)
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
![Page 34: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/34.jpg)
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
![Page 35: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/35.jpg)
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
![Page 36: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/36.jpg)
Client-side
• Pages & screens served up as normal
• Use XHR long polling to wait for events
• Server blocks until event worth returning
![Page 37: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/37.jpg)
JavaScript libraries
• Dojo: loads working; responsible for Bayeux.
• jQuery: plugin available
• Prototype: couldn’t find much
• MooTools: discussion in the forums
![Page 38: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/38.jpg)
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)
![Page 39: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/39.jpg)
Demo
![Page 40: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/40.jpg)
That’s it, questions?
![Page 41: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/41.jpg)
http://sneeu.com/barcampscotland2008/
these slides and more
![Page 42: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/42.jpg)
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/
![Page 43: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/43.jpg)
Thanks
![Page 44: Web Development: The Next Five Years](https://reader035.vdocuments.site/reader035/viewer/2022062701/553826f255034680358b46e5/html5/thumbnails/44.jpg)
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.