Web Development: The Next Five Years

19,183 views

Published on

The talk I gave at BarcampScotland2008.

Published in: Technology
1 Comment
53 Likes
Statistics
Notes
No Downloads
Views
Total views
19,183
On SlideShare
0
From Embeds
0
Number of Embeds
157
Actions
Shares
0
Downloads
1,040
Comments
1
Likes
53
Embeds 0
No embeds

No notes for slide

Web Development: The Next Five Years

  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.

×