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 iiss AAjjaaxx ?? A dutch football club (a good one) A cleanser (really works) AA WWeebb 22..00 tteechchnnoollooggyy Asynchronous Javascript And XML WWhhaatt©©ss 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 continually-updated 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 ✔ ... AjAjaaxx bbiigg ppiictctuurere 11//22 (courtesy of J. J. Garett) AjAjaaxx bbiigg ppiictctuurere 22//22 (courtesy of J. J. Garett) TThhee LLiistst ooff tthhiinnggss AjAjaaxx rereaallllyy bbririnnggss ✔ Increases interactivity ✔ Save bandwidth ✔ Helps avoiding some interactive tools like Flash ✔ Transforms a web UI ergonomics TThhee lliistst ooff bbaadd tthhiinnggss ttoo sasayy aabboouutt AjAjaaxx ((ssttuuffff jjeeaalloouuss ppeeooppllee wwiillll 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©©ss ddeesisiggnn aanndd cocoddee DDeevevellooppeersrs vsvs 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: CL-Ajax Bindows Sajax CChhoooosisinngg aa ggoooodd AjAjaaxx ttoooollkikitt ththee ddiifffeferreenntt aapppprrooaacchheess 11/3/3 Server-side 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 code-it-in-python-I-spit-javascript approach: CrackAjax ✔ The describe-the-behavior-you-want approach: Azax CChhoooosisinngg aa ggoooodd AjAjaaxx 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 AjAjaaxx 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 AjAjaaxx 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 AjAjaaxx ttoooollkikitt ththee ddiifffeferreenntt aapppprrooaacchheess 22/3/3 Low-level client-side 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 AjAjaaxx ttoooollkikitt tthhee ddiiffffeerreenntt aapppprrooaacchheess 22//33 Client-side framework (CSF) Provides: ✔ all low-level client-side 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 AjAjaaxx ttoooollkikitt tthhee ddiiffffeerreenntt aapppprrooaacchheess 22//33 Client-side framework pro©s and con©s ✔ Test-Driven Development doable :) ✔ Ready-to-use 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 ffrraamemewwoorrkk 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: CL-Ajax Bindows Sajax Let©s code n ow, Pedro AAjjaaxx ggooodod prpracacttiicceess ((ssttuuffff yyoouu ddoo ttoo bbee aa rroocckk ssttaarr)) 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 ssttaarr)) 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 ssttaarr)) 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 ssttaarr)) Unit testing with S criptaculous AAjjaaxx ggooodod prpracacttiicceess ((ssttuuffff yyoouu ddoo ttoo bbee aa rroocckk ssttaarr)) 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 ssttaarr)) 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: server-side on-demand 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 .