AjAjaax,x, ststaattee ooff tthhee aarrtt
Tarek Ziadé, Nuxeo [email protected]
WWhhoo aamm ii
● I am engineer at Nuxeo
● I work on CPS, the famous ECM Plateform ;)
● I've been lately in charge of Ajax stuff in CPS
● I read Ajax related feeds before I go to bed
WWhhaatt iis s AAjjaax x ??
A dutch football club
(a good one)
A cleanser
(really works)
AA WWeebb 22..00 tteechchnnoollooggyy
Asynchronous Javascript And XML
WWhhaatt''s s WWeebb 22..00 ??
TTiimm OO''RReeiillllyy''ss ''ccoommppaacctt'' ddeeffiinniittiioonn::
Web 2.0 is the network as platform, spanning all connected devices; Web 2.0 applications are those that make the most of the intrinsic advantages of that platform: delivering software as a continuallyupdated service that gets better the more people use it, consuming and remixing data from multiple sources, including individual users, while providing their own data and services in a form that allows remixing by others, creating network effects through an "architecture of participation," and going beyond the page metaphor of Web 1.0 to deliver rich user experiences.
MMaarrkkuuss AAnnggeerrmmeeiieerr''ss vviieeww ooff WWeebb 22..00::
(courtesy of Markus Angermeier)
WWeebb 22..00 AAppppss
✔ del.icio.us ✔ flickr ✔ Voo2do ✔ Digg ✔ Google Mail (Gmail) ✔ Writely ✔ Basecamp ✔ ...
AjAjaax x bbiigg ppiictctuurere 11//22
(courtesy of J. J. Garett) AjAjaax x bbiigg ppiictctuurere 22//22
(courtesy of J. J. Garett) TThhee LLiistst ooff tthhiinnggs s AjAjaax x rereaalllly y bbririnnggss
✔ Increases interactivity
✔ Save bandwidth
✔ Helps avoiding some interactive tools like Flash
✔ Transforms a web UI ergonomics
TThhee lliistst ooff bbaadd tthhiinnggs s ttoo sasay y aabboouutt AjAjaaxx ((ssttuuffff jjeeaalloouuss ppeeooppllee w wiillll tetellll yyoouu))
“Search engine won't index your website right”
“One url can lead to various states of the application”
“The browser back button is broken !”
“OK, now that Javascript is deactivated, your app doesn't work”
“Your Javascript code is hard to debug, and lower in quality”
EEvveerryybbooddyy aaggrreeeess mmooddeerrnn wweebb aappppss sshhoouulldd uussee AAJJAAXX ffoorr tthheeiirr UUIIss
WWiitthhoouutt AAjjaax.x.....
WWiitthh AjAjaax.x.....
ook,k, lleett''s s ddeesisiggnn aanndd cocoddee
DDeevevellooppeers rs vs vs DDeesisiggnneerrss
MeMeeett RRaamomonn & & PePeddroro
Complex yet cool design
Ramon, designer Pedro, developer
TThhee bbririeeffiinngg (man, I am really bad at it, cannot write Js code that works) We need Ajax, Pedro
I hate Javascript Ramon, it's not a real language, it suck big time !
Yes, but it improves a lot the user experience
(c'mon dude, I need to sell this app to the client)
TThhee bbririeeffiinngg (doing a good UI is hard, I don't want to bother) I am more a core guy. I am bad in UIs.
I understand your concern Pedro, but I know you can do it. You rock !
(Sorry, the boss said you are the one in charge)
TThhee ddeebbrriieeffiinngg
uhuuu ?!
Ramon 1, Pedro 0
Let's help Pedro CChhoooosisinngg aa ggoooodd ttoooollkikitt
The Dojo Toolkit Isomorphic XOAD Prototype ThyAPI xajax Script.aculo.us Tibet AjaxAC Rico AjaxFace JPSpan Behaviour DWR CPAINT MochiKit Echo2 Pear::Html::Ajax Moo.fx Ajax Tags Ajax.NET AJFORM WebWork 2 Microsoft Atlas Qooxdoo Struts Layout AjaxAspects Zimbra AjaxTK Tapestry Tacos WebORB for .NET Backbase Wicket Crack Ajax TIBCO ICEfaces CGI::Ajax JackBe ThinkCap JX Lisp: CLAjax Bindows Sajax CChhoooosisinngg aa ggoooodd AjAjaax x ttoooollkikitt ththee ddiifffeferreenntt aapppprrooaacchheess 11/3/3
Serverside javascript generation frameworks (SSF)
The idea:
✔ Javascript is dynamically created by the server ✔ The developer describes how it should be, with server language and tools
2 approaches :
✔ The codeitinpythonIspitjavascript approach: CrackAjax ✔ The describethebehavioryouwant approach: Azax
CChhoooosisinngg aa ggoooodd AjAjaax x ttoooollkikitt tthhee ddiiffffeerreenntt aapppprrooaacchheess 11//33
CrackAjax
import crackajax import cherrypy import ituneslib
class iTunesAjaxPage(crackajax.AjaxPage):
@crackajax.clientside def do_search(): update_list(search_songs(document.getElementById("searchbox").value))
@crackajax.serverside def get_all_songs(self): return [self.SONGS]
@crackajax.serverside def search_songs(self, query): query = query.lower() return [filter(lambda s: self.does_song_match(query, s), self.SONGS)]
crackajax.init("jsolait") cherrypy.root = iTunesAjaxPage(ituneslib.Library("Library.xml"), "") cherrypy.server.start()
(The only slide of code of the whole presentation, enjoy) CChhoooosisinngg aa ggoooodd AjAjaax x ttoooollkikitt tthhee ddiiffffeerreenntt aapppprrooaacchheess 11//33
CrackAjax pro's and con's
✔ The code is not testable: it's Javascript disguised in Python :'(
✔ The project seem dead :'(
✔ Exciting concept ! Let's keep an eye on it :)
CChhoooosisinngg aa ggoooodd AjAjaax x ttoooollkikitt tthhee ddiiffffeerreenntt aapppprrooaacchheess 11//33
Azax pro's and con's
✔ You describe the JS behavior of a view in an XML file :)
✔ The collection of implemented behavior is small :'(
✔ Young project, let's keep an eye on it :)
CChhoooosisinngg aa ggoooodd AjAjaax x ttoooollkikitt ththee ddiifffeferreenntt aapppprrooaacchheess 22/3/3
Lowlevel clientside framework (LLF)
Provides: ✔ a thin layer over XMLHTTPRequest ✔ sometimes tools to play with DOM
Examples: ✔ Sarissa ✔ XHConn ✔ LibXMLHttpRequest
Forget them: they become obsolete
CChhoooosisinngg aa ggoooodd AjAjaax x ttoooollkikitt tthhee ddiiffffeerreenntt aapppprrooaacchheess 22//33
Clientside framework (CSF)
Provides: ✔ all lowlevel clientside features ✔ an object oriented framework ✔ a very high level solution for common use cases ✔ sometimes library of effects ✔ sometimes unit testing tools ✔ a community of users
Examples: ✔ Scriptaculous+Prototype ✔ MochiKit
CChhoooosisinngg aa ggoooodd AjAjaax x ttoooollkikitt tthhee ddiiffffeerreenntt aapppprrooaacchheess 22//33
Clientside framework pro's and con's
✔ TestDriven Development doable :) ✔ Readytouse and simple patterns for common use case :) ✔ Community :) ✔ Sometimes part of your favorite Python web framework :) ✔ Another framework to learn :'(
SoSo ??
(i(inntteennsese sususpspenensese hheerree))
>> CClliieenntt sisiddee ffrraamemewwoorrk k aapppprrooachach <<
The Dojo Toolkit Isomorphic XOAD Prototype ThyAPI xajax Script.aculo.us Tibet AjaxAC Rico AjaxFace JPSpan Behaviour DWR CPAINT MochiKit Echo2 Pear::Html::Ajax Moo.fx Ajax Tags Ajax.NET AJFORM WebWork 2 Microsoft Atlas Qooxdoo Struts Layout AjaxAspects Zimbra AjaxTK Tapestry Tacos WebORB for .NET Backbase Wicket Crack Ajax TIBCO ICEfaces CGI::Ajax JackBe ThinkCap JX Lisp: CLAjax Bindows Sajax Let's code n ow, Pedro AAjjaaxx ggooodod prpracacttiicceess ((ssttuuffff yyoouu ddoo ttoo bbee aa rroocckk s sttaarr))
Accessibility still matters !
Keep it by gracefully degrading your UIs
✔ Should still work when Javascript is deactivated ✔ It's ok though for back ends Uis or very specific apps ✔ When graceful degradation gets complex, do two versions
Graceful degradation == DOM Squatting
bblliinndd ppeeooppllee ddoonn''tt cacarree aabboouutt AAjjaaxx
“I swear the god René, the application is awesome, and looks so darn' good” AAjjaaxx ggooodod prpracacttiicceess ((ssttuuffff yyoouu ddoo ttoo bbee aa rroocckk s sttaarr))
Accessibility matters, but...
✔ Most of Jacob Nielsen thoughts on Ajax are right. Keep in mind though his websites are just usable, but not sexy at all...
✔ Ajax brings pleasure to the user
AAjjaaxx ggooodod prpracacttiicceess ((ssttuuffff yyoouu ddoo ttoo bbee aa rroocckk s sttaarr))
Practice TDD ! (Javascript deserves it too)
It's as easy as in Python
✔ HTML Static page == test fixture ✔ Avoid headaches in debugging with obscure Firefox plug ins
TDD will make you as productive as with Python (almost ;))
AAjjaaxx ggooodod prpracacttiicceess ((ssttuuffff yyoouu ddoo ttoo bbee aa rroocckk s sttaarr))
Unit testing with S criptaculous AAjjaaxx ggooodod prpracacttiicceess ((ssttuuffff yyoouu ddoo ttoo bbee aa rroocckk s sttaarr))
Practice OO Programming !
Modern toolkit provides all you need (they love you)
✔ The era of hundreds of functions in a single .js file is over ✔ Build your Ajax library in classes, on the top of a toolkit ✔ Reuse !
Think component like in Z.. Python
AAjjaaxx ggooodod prpracacttiicceess ((ssttuuffff yyoouu ddoo ttoo bbee aa rroocckk s sttaarr))
Do continuous integration in your Python environment
Bundle your Javascript tests in your Python test suite
With Scriptaculous test kit you can:
✔ Launch js tests in a browser and grab the results ✔ Translate the results in Python assertions
Launching Python and Js tests in the same move == Better productivity
CCPPSS AAjjaaxx GGooododiieses
✔ nuxeo.javascript: provides all JS libs in Zope 3 resources
✔ CPSResourceLibrary: serverside ondemand Javascript file
loading
✔ Ajax in CPS:
✔ Dynamic Treeview
✔ Drag'n'drop in containers (item reordering, drop on treeview,..)
✔ Dynamic pages in CPSWiki
✔ ...
CCoonncclluussiioonn((ss))
✔ Ajax is not a revolution but
✔ It's a great thing to enhance your web apps with no pain
Use it !
ThThee eenndd..
Thank you Thanks to Ramon & Pedro
RReessoouurrcceess
✔ Nuxeo blogs: http://blogs.nuxeo.org My pronostic:
✔ Planet Ajaxian:
http://planet.ajaxian.com/
✔ Ajax Patterns: http://ajaxpatterns.org/
✔ from there, all websites you can grab