Ajax for-coldfusion-developers


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ajax for-coldfusion-developers

  1. 1. Ajax for ColdFusion Developers
  2. 2. INTRO12/07/2006 Rob Gonda :: www.robgonda.com 2
  3. 3. What is Ajax?12/07/2006 Rob Gonda :: www.robgonda.com 3
  4. 4. What is Ajax? AJAX != DHTML AJAX Vs. Ajax12/07/2006 Rob Gonda :: www.robgonda.com 4
  5. 5. What is AJAX? (tech view)Asynchronous data retrieval usingXMLHttpRequest (or not)Data interchange and manipulation usingXML (or not)Dynamic display and interaction usingDocument Object Model - DOM (or not)JavaScript binding everything togetherFlash Remoting for JavaScript? Not really,but close 12/07/2006 Rob Gonda :: www.robgonda.com 5
  6. 6. Other remote scriptingHidden IFrame<img> src<script> src hackCSS href hackJS to faceless Java appletsJS to faceless FlashNO CONTENT ResponseCookies 12/07/2006 Rob Gonda :: www.robgonda.com 6
  7. 7. What does it do for us?Make server hits without fullrequest/response cycleWhy? Reduce server load Dramatic improvement in user experience Reduced load on browser/script 12/07/2006 Rob Gonda :: www.robgonda.com 7
  8. 8. Two TypesAjax On The Edges Ajax Widgets Enhance your current site Add usability DegradableRIA Single-page applications Replacement for Desktop Applications 12/07/2006 Rob Gonda :: www.robgonda.com 8
  9. 9. Classic request flow12/07/2006 Rob Gonda :: www.robgonda.com 9
  10. 10. Partial UI Updates12/07/2006 Rob Gonda :: www.robgonda.com 10
  11. 11. Rich / Thin Client12/07/2006 Rob Gonda :: www.robgonda.com 11
  12. 12. AlternativesFlash Features support for vector and raster graphics, a scripting language called ActionScript and bidirectional streaming of audio and videoFlex Declarative RIA development to build RIA’s using the Flash PlatformLaszlo Declarative RIA development to build RIA’s using the Flash Platform or Ajax/DHTML output 12/07/2006 Rob Gonda :: www.robgonda.com 12
  13. 13. BASICS12/07/2006 Rob Gonda :: www.robgonda.com 13
  14. 14. XMLHttpRequest (XHR)A JavaScript Class that lets you makeasynchronous HTTP requests fromJavaScriptAllows to kick off HTTP requests in thebackgroundA call back JavaScript function is invokedat each state of the HTTP request andresponse 12/07/2006 Rob Gonda :: www.robgonda.com 14
  15. 15. XHR Methods12/07/2006 Rob Gonda :: www.robgonda.com 15
  16. 16. XHR Properties12/07/2006 Rob Gonda :: www.robgonda.com 16
  17. 17. Xml, wddx, json, soapXML: Extensible Markup Language is heavyWDDX: Web Distributed Data Exchange is structured XML, native for ColdFusionJSON: JavaScript Object Notation lightweight computer data interchange formatSOAP: Service-Oriented architecturalpattern successor of XML RPC 12/07/2006 Rob Gonda :: www.robgonda.com 17
  18. 18. JSONA Data Interchange Format.Text-based.Light-weight.Easy to parse.Language Independent.A Subset of ECMA-262 Third Edition (akaJavaScript). 12/07/2006 Rob Gonda :: www.robgonda.com 18
  19. 19. XML Vs. JSON{"menu": { "id": "file", "value": "File:", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] }}}<menu id="file" value="File" > <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup></menu> 12/07/2006 Rob Gonda :: www.robgonda.com 19
  20. 20. JSON and CFCfjson: http://jehiah.com/projects/cfjson/ UDF Serializes and de-serializes objects Missing de-serializing a recordsetjson-serializer:http://cfopen.org/projects/json-serializer/ CFC Online serializes. 12/07/2006 Rob Gonda :: www.robgonda.com 20
  21. 21. Testing JavaScript is Not EasyBrowsers Firefox, Mozilla, Internet Explorer, Opera, Safari, etc Multiple Versions (Main releases, betas, etc) Different Security Settings Different Browser Plug-insDifferent Operating Systems and PatchesDifferent CPUs, RAM, Memory, MultiplePrograms running, Multiple browsers open, etc! 12/07/2006 Rob Gonda :: www.robgonda.com 21
  22. 22. DebuggingHTTP Traffic Sniffers Live HTTP Headers FireBug Fiddler Ethereal Service Capture 12/07/2006 Rob Gonda :: www.robgonda.com 22
  23. 23. More on DebuggingUse the DOM Inspector to observe the currentstate of your page Use MODI for easier live inspection and DOM manipulationUse the JavaScript console / firebug to check forerrorsUse MochiKit logging and interpreterUse Venkman or Microsoft Script Debugger totroubleshoot behaviorial problems 12/07/2006 Rob Gonda :: www.robgonda.com 23
  24. 24. Libraries12/07/2006 Rob Gonda :: www.robgonda.com 24
  25. 25. AJAX LibrariesMany people / everyone opt for AJAX libraries.Provides many advantages Development time Sync / Async Serialization Multithread / batches Error handling Logging Security, encryption, obfuscationDisadvantages : NONE! 12/07/2006 Rob Gonda :: www.robgonda.com 25
  26. 26. Use a FrameworkBrowsers are different across key areas: Event registration and event handling HTTP request object implementation Document Object Model (DOM) API.Multithreading, handle request queue or batchSerializationError handlingLoggingSecurity, encryption, obfuscation 12/07/2006 Rob Gonda :: www.robgonda.com 26
  27. 27. JavaScript AJAX Libraries Libraries Adobe Spry Dojo (used by Open Ajax, XAP, Kabuki) DWR (integrate with Java Struts and JSF) jQuery (light-weight, extensible, community involvement) Prototype (the most popular, used by RoR) YUI (Yahoo User Interface Library) Toolkits Microsoft Altas (commercial) Open Ajax (IBM, Zimbra, Dojo | open source) Open Laszlo (Flash and Ajax) Tibco GI Backbase 12/07/2006 Rob Gonda :: www.robgonda.com 27
  28. 28. JavaScript LibrariesDojo (http://dojotoolkit.org/) used by Open Ajax, XAP, Kabuki Lack of documentationDWR (http://getahead.ltd.uk/dwr) Commonly used with Java, implements Comet (Reverse Ajax)Prototype (http://prototype.conio.net/) Used by RoR, script.aculo.us, Rico, BehaviuorSpry (http://labs.adobe.com/technologies/spry/) Simple, limited, lightweight, targeting designers 12/07/2006 Rob Gonda :: www.robgonda.com 28
  29. 29. JavaScript LibrariesjQuery (http://jquery.com/) light-weight, extensible, community involvementYUI (http://developer.yahoo.com/yui/) Yahoo User Interface Library Well documented Well supported (wink wink) 12/07/2006 Rob Gonda :: www.robgonda.com 29
  30. 30. Dojo Ajax Slidedojo.io.bind() packs a big punch Handles text encodings Auto-encodes URL components Submits forms Sync or async Coerces return dataPluggable back-ends 12/07/2006 Rob Gonda :: www.robgonda.com 30
  31. 31. Dojo other IOdojo.require(”dojo.io.ScriptSrcIO”); Cross-domain and JSON-Pdojo.require(”dojo.io.IframeIO”) Background uploads, plugs right into bind()!dojo.io.updateNode()dojo.io.encodeForm() 12/07/2006 Rob Gonda :: www.robgonda.com 31
  32. 32. Problems12/07/2006 Rob Gonda :: www.robgonda.com 32
  33. 33. Potential ProblemsBreaks back button supportURLs dont change as state changesSEO / Search Engine IndexingCross Browser Issues can be a painCross-domain requests (SOA, WS)Viewable Source CodeClient side business logicServer Load if not properly codedConcurrency 12/07/2006 Rob Gonda :: www.robgonda.com 33
  34. 34. Security Concerns (I)JavaScript applications are easily decodedand reengineeredOn-demand (server side) loading will nothelp if you load your entire application;keep business logic on serverObfuscation makes it more difficult, butcan also generate bugs 12/07/2006 Rob Gonda :: www.robgonda.com 34
  35. 35. Security Concerns (II)XMLHttpRequest is nothing more than a normalform submission Authentication elements Session cookies Blank Referrer by default You should manually set this header in your APIGet / Post Verbs are sent in plain text Consider encrypting requests and obfuscating responsesDevelopers forget to send sensitive data overSSL 12/07/2006 Rob Gonda :: www.robgonda.com 35
  36. 36. Security RulesDont trust user inputDo not trust client side validationDo not trust server side AJAX validation Will improve user experience Will not reduce code, only increase it. You still need to re-validate in the server sideDo not assume every Ajax request is realKeep you business logic in the serverNo framework is yet encrypting transmitted data 12/07/2006 Rob Gonda :: www.robgonda.com 36
  37. 37. Do not expose your business logicMost important aspect for EnterpriseApplicationsAjax uses JavaScript, but it does not have toreside in the clientUse remote calls only as a transport layerTransport state and commands, not raw dataMVC Model must remain on the sever View or presentation layer is managed with DOM Controller layer simply requests commands and dynamically evaluates them 12/07/2006 Rob Gonda :: www.robgonda.com 37
  38. 38. Main Architectures12/07/2006 Rob Gonda :: www.robgonda.com 38
  39. 39. What to transportData XML WDDX SOAP JSON (JavaScript Object Notation) JavaScript Native Objects (one way)Instructions JavaScript instructions to be dynamically evaluated using eval() 12/07/2006 Rob Gonda :: www.robgonda.com 39
  40. 40. The Magic FunctionsTraditionally you would use DOM Cross browser hell createNode is a paininnerHTML For modifying contenteval() Dynamic expression evaluation 12/07/2006 Rob Gonda :: www.robgonda.com 40
  41. 41. The eval() functionDynamic evaluation ONLY in the client NEVER in the server Evaluation in the server could cause xml or sql injection.Evaluate innerHTML instruction i.e. result = “ $(‘div1’).innerHTML = ‘text’ ”; eval(result); 12/07/2006 Rob Gonda :: www.robgonda.com 41
  42. 42. Design Patterns12/07/2006 Rob Gonda :: www.robgonda.com 42
  43. 43. MVCModel-view-controller (MVC) is a softwarearchitecture that separates an applicationsdata model, user interface, and controllogic into three distinct components.Clear distinction between the presentationlayer and business logic 12/07/2006 Rob Gonda :: www.robgonda.com 43
  44. 44. MVC Diagram12/07/2006 Rob Gonda :: www.robgonda.com 44
  45. 45. MVC Data Flow12/07/2006 Rob Gonda :: www.robgonda.com 45
  46. 46. Architecture Recommendations Clearly separate content from code - MVC Store data that spans pages or sessions on the server Consider an AJAX centric controller Use Facades to provide generalized access to data or services Use care with fined grained access to model/services 12/07/2006 Rob Gonda :: www.robgonda.com 46
  47. 47. Browser historyiframe technique Firefox Frame in html Changes are stored Frame in DOM Changes are not stored IE All Changes are stored Safari No Changes are stored 12/07/2006 Rob Gonda :: www.robgonda.com 47
  48. 48. The back buttonNot needed for Ajax snippets or widgets,but imperative for Ajax applicationsThe problem is not new; Flash applicationsalways faced the sameNo history means no bookmarks, nosharing, no back buttonUse frameworks 12/07/2006 Rob Gonda :: www.robgonda.com 48
  49. 49. Fixing the back buttonWhen a user hits the back button, thebrowser typically returns a cached versionof the previous page. If the HTTPresponse headers have marked the pageas not cacheable, a new request is made.In most browsers, if a fragment identifierexists (#) and the user clicks the backbutton, history pulls the previous pagefrom the browser’s cache. 12/07/2006 Rob Gonda :: www.robgonda.com 49
  50. 50. Degradable SitesWhat if JavaScript is disabled?Href’s + onClicksReuse the same logic, just change theviews.jQuery Example 12/07/2006 Rob Gonda :: www.robgonda.com 50
  51. 51. Extending AjaxFlash plays friendly with AjaxThe Flash Platform does not have thebrowser limitationsDojo uses Flash for persistent storageFlash 8’s IO classes have been used forfile transfersRob uses Flash for XML Socketsmessaging services 12/07/2006 Rob Gonda :: www.robgonda.com 51
  52. 52. Futures ExtensionsFlashSVGCanvasJITOff-line 12/07/2006 Rob Gonda :: www.robgonda.com 52
  53. 53. ColdFusion12/07/2006 Rob Gonda :: www.robgonda.com 53
  54. 54. ColdFusion AJAX LibrariesAjaxCFC OOP, CF extends objects, Design Patterns Built-in error handling, security, debugging, logging Integrates with Model Glue 1.1 / 2.0, Mach IICFAjax First Ajax CF LibraryJSMX Client side library onlySimple Remote Scripting (SRS) Uses iframesWddxAjax 12/07/2006 Rob Gonda :: www.robgonda.com 54
  55. 55. Now Let’s codeAjaxcfc Echo, complexObjects, formValidation1, modelglue, machiidojo.0.4.1 IO, widgetsJquery Contactmanager, formPost, history, tool tips, rating, thickboxPrototypeSpryXHR 12/07/2006 Rob Gonda :: www.robgonda.com 55
  56. 56. Thank YouQuestions / Comments?Blog: http://www.robgonda.comCorp: http://www.ichameleongroup.comemail: rob@robgonda.com 12/07/2006 Rob Gonda :: www.robgonda.com 56