Ajax for ColdFusion Developers
Upcoming SlideShare
Loading in...5
×
 

Ajax for ColdFusion Developers

on

  • 1,777 views

 

Statistics

Views

Total Views
1,777
Views on SlideShare
1,776
Embed Views
1

Actions

Likes
0
Downloads
13
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ajax for ColdFusion Developers Ajax for ColdFusion Developers Presentation Transcript

  • Ajax Intensive for ColdFusion Developers
  • TOC Intro What is Ajax Ajax Vs. Classic Web The Characteristics of an Ajax App Alternatives to Ajax Flash Flex Laszlo History Basics Definition Elements JavaScript XMLHttpRequest XML / JSON / WDDX / SOAP JSON and CF Developers Oversights Testing Debugging HTTP Sniffing: Firebug, Fiddler, Ethereal, ServiceCapture 6/27/2006 Rob Gonda :: www.robgonda.com 2
  • TOC Libraries JavaScript Prototype DWR Dojo Spry Push for Dojo Potential Problems and Security Rules Business Logic Importance Data Transport Vs. Instructions Transport Design Patterns :: MVC Degradable Sites Extending Ajax with Flash / Flex 6/27/2006 Rob Gonda :: www.robgonda.com 3
  • TOC CF Frameworks Model Glue 1.1 / 2.0 Mach II CF Ajax Libraries ajaxCFC CFAjax Potential Problems Concurrency Back button Book-marking Tips and tricks Examples Simple Ajax Echo Model Glue Ajax Echo Model Glue Contact Manager Model Glue Ajax / XMLSockets Contact Manager Mach II Ajax Contact Manager MVC Ajax RSS Reader Spry RSS Reader 6/27/2006 Rob Gonda :: www.robgonda.com 4
  • !TOC !(CF || JS) XML || XPath DOM Accessibility Commercial Frameworks Venkman JavaScript Debugger Microsoft JavaScript Debugger 6/27/2006 Rob Gonda :: www.robgonda.com 5
  • INTRO 6/27/2006 Rob Gonda :: www.robgonda.com 6
  • What is Ajax? 6/27/2006 Rob Gonda :: www.robgonda.com 7
  • What is Ajax? AJAX != DHTML 6/27/2006 Rob Gonda :: www.robgonda.com 8
  • Coined Ajax: A New Approach to Web Applications by Jesse James Garrett February 18, 2005 “Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.” 6/27/2006 Rob Gonda :: www.robgonda.com 9
  • What is AJAX? (tech view) Asynchronous data retrieval using XMLHttpRequest (or not) Data interchange and manipulation using XML (or not) Dynamic display and interaction using Document Object Model - DOM (or not) JavaScript binding everything together Flash Remoting for JavaScript? Not really, but close 6/27/2006 Rob Gonda :: www.robgonda.com 10
  • Other remote scripting Hidden IFrame <img> src <script> src hack CSS href hack JS to faceless Java applets JS to faceless Flash NO CONTENT Response Cookies 6/27/2006 Rob Gonda :: www.robgonda.com 11
  • AJAX Sites Google Mail, Maps, Reader, Suggest, Personalized Homepage, Writely 37signal’s Basecamp / Backpack Backbase Zimbra Collaboration Suite Bindows openlaszlo.org 6/27/2006 Rob Gonda :: www.robgonda.com 12
  • What does it do for us? Make server hits without full request/response cycle Why? Reduce server load Dramatic improvement in user experience Reduced load on browser/script 6/27/2006 Rob Gonda :: www.robgonda.com 13
  • How can Ajax help me? Form Validation move business rule validation to the server while still enforcing them in real time. Check usernames, passwords, emails, etc. "pushing data" - update scores, stock quotes, weather, etc. Rating, voting Input suggest: i.e. Google suggest Edit in place Active Search Filtering large recordsets of data Pre-fetch data sets to improve speed Chat: Ajax Vs. Comet 6/27/2006 Rob Gonda :: www.robgonda.com 14
  • Ajax Real Barriers to Entry Not technology Design Elements Application design / architecture is not procedural or sequential Think beyond the click Do not expose your code 6/27/2006 Rob Gonda :: www.robgonda.com 15
  • Design Elements User Interface Provide the user with immediate feedback Users are used to the click and page reload flow; make new experience as intuitive as possible Application Design for error, not only success Asynchronous implies concurrency, packets may not arrive in the same order they were requested Client application should ignore timed out responses Keep state in the server 6/27/2006 Rob Gonda :: www.robgonda.com 16
  • Principles for Ajax Design 1. Keep it direct 2. Provide live feedback 3. Offer an invitation 4. Cross borders reluctantly 5. Leave a light footprint 6. Show transitions 7. Think in objects 6/27/2006 Rob Gonda :: www.robgonda.com 17
  • Two Types Ajax On The Edges Ajax Widgets Enhance your current site Add usability Degradable RIA Single-page applications Replacement for Desktop Applications 6/27/2006 Rob Gonda :: www.robgonda.com 18
  • The Ajax Buzz 6/27/2006 Rob Gonda :: www.robgonda.com 19
  • Classic request flow 6/27/2006 Rob Gonda :: www.robgonda.com 20
  • Partial UI Updates 6/27/2006 Rob Gonda :: www.robgonda.com 21
  • Classic Vs. Ajax Web No more single HTML UI request / response Data restrictions 6/27/2006 Rob Gonda :: www.robgonda.com 22
  • Rich / Thin Client 6/27/2006 Rob Gonda :: www.robgonda.com 23
  • Alternatives Flash Features support for vector and raster graphics, a scripting language called ActionScript and bidirectional streaming of audio and video Flex Declarative RIA development to build RIA’s using the Flash Platform Laszlo Declarative RIA development to build RIA’s using the Flash Platform or Ajax/DHTML output 6/27/2006 Rob Gonda :: www.robgonda.com 24
  • Ajax / Flash / Java Strengths Weaknesses Ajax Most compatible with existing HTML JavaScript/DHTML code is difficult to maintain; (JS) infrastructure and content; JavaScript/DHTML code is difficult to develop; Built-in support in most browsers – easy to try Not designed for team development without the need for additional software; Performance and functionality limitations Java Large and broad industry support for Java Requires higher programming skill set than Large Java developer community; scripting Widely adopted in the enterprise Requires a Java Virtual Machine to run the Robust performance, scalability and reliability application Robust OOP Designed for team development Maintainable and manageable code Flash Supports rich UI features like animation and ActionScript code is difficult to maintain; video Not designed for team development Flash engine is small and widely available Performance and functionality limitations Large Flash designer community Flash designers are not developers – lack of enterprise developer mindshare 6/27/2006 Rob Gonda :: www.robgonda.com 25
  • Flash Vs. Ajax Feature Flash Ajax Audio Native Support Needs plug-ins Browser Integration Plug-in required Native Support Compatibility Issues Minor variations between Major compatibility versions of Flash. differences between browser versions. CSS Limited support. Full Support (depending on browser). Dynamic Content Difficult. SWF is a pre- HTML can be written out compiled closed format. using just about any kind of Server technology. Programming Model ActionScript 2.0 provides JavaScript 2.0 not yet robust, java-like framework. supported by any major browser. JS 1.5 not recommended for large OOP applications. 6/27/2006 Rob Gonda :: www.robgonda.com 26
  • Flash Vs. Ajax Feature Flash Ajax (Bitmap) Graphics Bitmap manipulation. Load static images dynamically. Regular Not supported natively by AS Full support. 2.0 Expressions Server Integration Web Services, XML, Flash IFRAME trick or Remoting XMLHttpRequest Text Text API mimics some HTML Powerful layout capabilities. functionality. Vector Graphics Full Support. None. Video Dynamically load FLV video Supported only through files or playback embedded external plug-ins videos. XML Full support. Limited Support 6/27/2006 Rob Gonda :: www.robgonda.com 27
  • Ajax Vs. Desktop Apps 6/27/2006 Rob Gonda :: www.robgonda.com 28
  • UI Richness 6/27/2006 Rob Gonda :: www.robgonda.com 29
  • One Size Doesn’t Fit All RIA Approaches and Application Profile Map Application Business Criticality OOP: Java Scripting: .NET Ajax (JS) Flash Application Scale, Complexity and User Responsiveness 6/27/2006 Rob Gonda :: www.robgonda.com 30
  • One Size Doesn’t Fit All Suitable Application Profile Developer Fit Ajax HTML-centric or web content oriented applications JavaScript developers (CSS, DHTML, (JS) Casual usage pattern applications JavaScript, cross browser skills) Fast application loading and startup is important Limited client side logic (lower maintenance requirement) Java Transaction oriented applications Java developers Responsive user interaction and runtime performance are important Expert usage pattern applications (frequent usage, long duration usage) Performance, scalability and reliability can not be sacrificed. Applications that must be maintained for many years. 6/27/2006 Rob Gonda :: www.robgonda.com 31
  • One Size Doesn’t Fit All Suitable Application Profile Developer Fit Flash Casual usage pattern Flash developers Limited client side logic (lower maintenance requirement) Rich media oriented applications .NET Transaction oriented applications .NET developers (C#, XAML, etc). Responsive user interaction and runtime performance are important Expert usage pattern applications (frequent usage, long duration usage) Performance, scalability and reliability can not be sacrificed. Applications that must be maintained for many years. 6/27/2006 Rob Gonda :: www.robgonda.com 32
  • History 2002 1998 4/30/1993 XMLHttpRequest 2/18/2005 Microsoft Remote Scripting WWW Became Public AJAX Term Coined 1996 Introduction of the iframe 10/2001 The End of the 6/27/2006 Browser Wars CFUnited 1/1/1994 1/1/1995 1/1/1996 1/1/1997 1/1/1998 1/1/1999 1/1/2000 1/1/2001 1/1/2002 1/1/2003 1/1/2004 1/1/2005 1/1/2006 1/1/1993 12/31/2006 6/27/2006 Rob Gonda :: www.robgonda.com 33
  • History April 30, 1993, CERN announced that the World Wide Web would become public and free for anyone to use. Browser asynchronous hacks have been possible since 1996, when Internet Explorer introduced the IFRAME tag. Microsoft’s Remoting Scripting or MSRS was introduced in 1998. This technique was more elaborated than all previous hack attempts. 6/27/2006 Rob Gonda :: www.robgonda.com 34
  • History In 2002, Microsoft chose to replace Remoting Scripting with the XMLHttpRequest object, which shortly after all major browsers copied. The term was coined February 18, 2005, by Jesse James Garret in a short essay, coincidently, days after Google released their Maps application. When Google launched their AJAX services, it gave it awareness, trust, and credibility. 6/27/2006 Rob Gonda :: www.robgonda.com 35
  • BASICS 6/27/2006 Rob Gonda :: www.robgonda.com 36
  • XMLHttpRequest (XHR) A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript Allows to kick off HTTP requests in the background A call back JavaScript function is invoked at each state of the HTTP request and response 6/27/2006 Rob Gonda :: www.robgonda.com 37
  • XHR Methods 6/27/2006 Rob Gonda :: www.robgonda.com 38
  • XHR Properties 6/27/2006 Rob Gonda :: www.robgonda.com 39
  • Cross-browser: IE new ActiveXOjbect("Microsoft.XMLHTTP"); You can't totally blame them because they invented it Native XMLHttpRequest support should be in IE7 6/27/2006 Rob Gonda :: www.robgonda.com 40
  • Cross-browser XHR Req. See Listing 1 6/27/2006 Rob Gonda :: www.robgonda.com 41
  • Xml, wddx, json, soap XML: Extensible Markup Language is heavy WDDX: Web Distributed Data Exchange is structured XML, native for ColdFusion JSON: JavaScript Object Notation lightweight computer data interchange format SOAP: Service-Oriented architectural pattern successor of XML RPC 6/27/2006 Rob Gonda :: www.robgonda.com 42
  • JSON A Data Interchange Format. Text-based. Light-weight. Easy to parse. Language Independent. A Subset of ECMA-262 Third Edition (aka JavaScript). 6/27/2006 Rob Gonda :: www.robgonda.com 43
  • JSON is not JSON is not a document format. JSON is not a markup language. JSON is not a general serialization format. No recursive/recurring structures. No invisible structures. No functions. 6/27/2006 Rob Gonda :: www.robgonda.com 44
  • 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> 6/27/2006 Rob Gonda :: www.robgonda.com 45
  • JSON is not XML element objects attribute arrays attribute string content strings <![CDATA[ ]]> numbers entities declarations booleans schema stylesheets null comments version namespace 6/27/2006 Rob Gonda :: www.robgonda.com 46
  • JSON supplant See Listing 3 var template = '<table border="{border}">' + '<tr><th>Last</th><td>{last}</td></tr>' + '<tr><th>First</th><td>{first}</td></tr>' + '</table>'; var data = { "first": "Carl", "last": "Hollywood", "border": 2 }; mydiv.innerHTML = template.supplant(data); 6/27/2006 Rob Gonda :: www.robgonda.com 47
  • Supplant prototype String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 'string' ? r : a; } ); }; 6/27/2006 Rob Gonda :: www.robgonda.com 48
  • JSON and CF Cfjson: http://jehiah.com/projects/cfjson/ UDF Serializes and de-serializes objects Missing de-serializing a recordset json-serializer: http://cfopen.org/projects/json-serializer/ CFC Online serializes. Listings 4 and 5 6/27/2006 Rob Gonda :: www.robgonda.com 49
  • Developer Oversights Are you verifying your data? How are you handling server errors? Are you using a session? Any ClientSide errors? Did you test your application in every browser? 6/27/2006 Rob Gonda :: www.robgonda.com 50
  • Testing JavaScript is Not Easy Browsers Firefox, Mozilla, Internet Explorer, Opera, Safari, etc Multiple Versions (Main releases, betas, etc) Different Security Settings Different Browser Plug-ins Different Operating Systems and Patches Different CPUs, RAM, Memory, Multiple Programs running, Multiple browsers open, etc! 6/27/2006 Rob Gonda :: www.robgonda.com 51
  • Debugging window.onerror = function(message, url, lineNum) { alert("Error: '" + message + "'. At " + url + ", Line " + lineNum); } Use onerror and a simple Ajax call to store it in the server HTTP Traffic Sniffers Live HTTP Headers FireBug Fiddler Ethereal 6/27/2006 Rob Gonda :: www.robgonda.com 52
  • Sending Error to the server Ajax Request Great if error does not effect page functionality and user supports XHR! Hidden Iframe Great if error does not effect page functionality and user has problems with XHR Redirect Page Functionality is hosed, nothing to do but run! Set Image Source Great if you are sending small amounts of data. Very X-Browser Friendly! 6/27/2006 Rob Gonda :: www.robgonda.com 53
  • More on Debugging Use the DOM Inspector to observe the current state of your page Use MODI for easier live inspection and DOM manipulation Use the JavaScript console / firebug to check for errors Use MochiKit logging and interpreter Use Venkman or Microsoft Script Debugger to troubleshoot behaviorial problems 6/27/2006 Rob Gonda :: www.robgonda.com 54
  • Weight and Performance Minification Vs. Obfuscation A minifier removes the comments and unnecessary white space from a program. An obfuscator also minifies, but it will also make modifications to the program Any transformation carries the risk of introducing a bug. Easier to minify dynamically generated code than obfuscate it GZIP 15% of original file. Makes Minication and Obfuscation file size modification almost irrelevant. 6/27/2006 Rob Gonda :: www.robgonda.com 55
  • Libraries 6/27/2006 Rob Gonda :: www.robgonda.com 56
  • AJAX Libraries Many people opt for AJAX libraries. Provides many advantages Development time Sync / Async Serialization Multithread / batches Error handling Logging Security, encryption, obfuscation Disadvantages : NONE! Weight? 6/27/2006 Rob Gonda :: www.robgonda.com 57
  • Use a Framework Browsers are different across key areas: Event registration and event handling HTTP request object implementation Document Object Model (DOM) API. Multithreading, handle request queue or batch Serialization Error handling Logging Security, encryption, obfuscation 6/27/2006 Rob Gonda :: www.robgonda.com 58
  • JavaScript AJAX Libraries Libraries Prototype (the most popular, used by RoR) Dojo (used by Open Ajax, XAP, Kabuki) DWR (integrate with Java Struts and JSF) Adobe Spry Toolkits Microsoft Altas (commercial) Open Ajax (IBM, Zimbra, Dojo | open source) Open Laszlo (Flash and Ajax) Tibco GI Backbase 6/27/2006 Rob Gonda :: www.robgonda.com 59
  • JavaScript Libraries Prototype (http://prototype.conio.net/) Used by RoR, script.aculo.us, Rico, Behaviuor DWR (http://getahead.ltd.uk/dwr) Commonly used with Java, implements Comet (Reverse Ajax) Dojo (http://dojotoolkit.org/) The most complete JavaScript toolkit Spry (http://labs.adobe.com/technologies/spry/) Simple, limited, lightweight, targeting designers 6/27/2006 Rob Gonda :: www.robgonda.com 60
  • Prototype Ajax e.g. Listing 6 Listing 7 Listing 8 6/27/2006 Rob Gonda :: www.robgonda.com 61
  • DWR Ajax e.g. We’ll cover enough of DWR later CFAjax ajaxCFC 6/27/2006 Rob Gonda :: www.robgonda.com 62
  • Dojo Ajax e.g. Listing 9 Note to self: keep an eye on ATF -- AJAX Toolkit Framework http://www.eclipse.org/atf/ 6/27/2006 Rob Gonda :: www.robgonda.com 63
  • Spry Ajax e.g. Listing 10 Listing 11 http://www.robgonda.com/dev/spry/blog.cfm http://www.robgonda.com/dev/spry/blog2.cfm http://www.robgonda.com/dev/spry/blog3.cfm 6/27/2006 Rob Gonda :: www.robgonda.com 64
  • Push for Dojo Dojo is a Set Of Layered Libraries 6/27/2006 Rob Gonda :: www.robgonda.com 65
  • Dojo UI Utilities Dojo.io Dojo.html Dojo.style Dojo.dnd Drag and drop Dojo.lfx effects: fade, wipe, explode, highlight, … Dojo.dom 6/27/2006 Rob Gonda :: www.robgonda.com 66
  • Dojo Widgets What’s A Widget? Encapsulated, reusable rendering and behavior HTML+CSS bound by JavaScript Can be built from markup Subclass of dojo.widget.Widget Usually derives from dojo.widet.HtmlWidget 6/27/2006 Rob Gonda :: www.robgonda.com 67
  • Dojo Widgets Rich Text Editor Content Pane Split Panel Tabs Fisheye List Sorting Table Google/Yahoo Maps Tree Dialog/Wizard 6/27/2006 Rob Gonda :: www.robgonda.com 68
  • Dojo Widgets <script> dojo.require(”dojo.widget.Editor2”); </script> <textarea dojoType=”Editor2” minHeight=”40em” relativeImageUrls=”true” toolbarAlwaysVisible=”true” htmlEditing=”true”> ... </textarea> 6/27/2006 Rob Gonda :: www.robgonda.com 69
  • Dojo Ajax Slide dojo.io.bind() packs a big punch Handles text encodings Auto-encodes URL components Submits forms Sync or async Coerces return data Pluggable back-ends 6/27/2006 Rob Gonda :: www.robgonda.com 70
  • Dojo other IO dojo.require(”dojo.io.ScriptSrcIO”); Cross-domain and JSON-P dojo.require(”dojo.io.IframeIO”) Background uploads, plugs right into bind()! dojo.io.updateNode() dojo.io.encodeForm() 6/27/2006 Rob Gonda :: www.robgonda.com 71
  • Problems 6/27/2006 Rob Gonda :: www.robgonda.com 72
  • Potential Problems Breaks back button support URL's don't change as state changes SEO / Search Engine Indexing Cross Browser Issues can be a pain Cross-domain requests (SOA, WS) Viewable Source Code Client side business logic Server Load if not properly coded Concurrency 6/27/2006 Rob Gonda :: www.robgonda.com 73
  • Security Concerns (I) JavaScript applications are easily decoded and reengineered On-demand (server side) loading will not help if you load your entire application; keep business logic on server Obfuscation makes it more difficult, but can also generate bugs 6/27/2006 Rob Gonda :: www.robgonda.com 74
  • Security Concerns (II) XMLHttpRequest is nothing more than a normal form submission Authentication elements Session cookies Blank Referrer by default You should manually set this header in your API Get / Post Verbs are sent in plain text Consider encrypting requests and obfuscating responses Developers forget to send sensitive data over SSL 6/27/2006 Rob Gonda :: www.robgonda.com 75
  • Security Rules Don't trust user input Do not trust client side validation Do 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 side Do not assume every Ajax request is real Keep you business logic in the server No framework is yet encrypting transmitted data 6/27/2006 Rob Gonda :: www.robgonda.com 76
  • Ajax Request Header Treat it just like a regular request Validate: User-Agent (IE, Mozilla, Gecko) Referer: make sure it was posted from your site Cookie: validate valid session Verbs: require post vs. get 6/27/2006 Rob Gonda :: www.robgonda.com 77
  • Ajax Request Header 6/27/2006 Rob Gonda :: www.robgonda.com 78
  • Cross-site restrictions Impediment to communicate with other domains is good. Cross-domain requests are a security hole There is no real need for it, Web Services should be consumed by server side scripting If really needed, use iframes technique instead 6/27/2006 Rob Gonda :: www.robgonda.com 79
  • Do not expose your business logic Most important aspect for Enterprise Applications Ajax uses JavaScript, but it does not have to reside in the client Use remote calls only as a transport layer Transport state and commands, not raw data MVC Model must remain on the sever View or presentation layer is managed with DOM Controller layer simply requests commands and dynamically evaluates them 6/27/2006 Rob Gonda :: www.robgonda.com 80
  • Main Architectures 6/27/2006 Rob Gonda :: www.robgonda.com 81
  • What to transport Data XML WDDX SOAP JSON (JavaScript Object Notation) JavaScript Native Objects (one way) Instructions JavaScript instructions to be dynamically evaluated using eval() 6/27/2006 Rob Gonda :: www.robgonda.com 82
  • The Magic Functions Traditionally you would use DOM Cross browser hell createNode is a pain innerHTML For modifying content eval() Dynamic expression evaluation 6/27/2006 Rob Gonda :: www.robgonda.com 83
  • The eval() function Dynamic 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); 6/27/2006 Rob Gonda :: www.robgonda.com 84
  • Design Patterns 6/27/2006 Rob Gonda :: www.robgonda.com 85
  • MVC Model-view-controller (MVC) is a software architecture that separates an application's data model, user interface, and control logic into three distinct components. Clear distinction between the presentation layer and business logic 6/27/2006 Rob Gonda :: www.robgonda.com 86
  • MVC Diagram 6/27/2006 Rob Gonda :: www.robgonda.com 87
  • MVC Data Flow 6/27/2006 Rob Gonda :: www.robgonda.com 88
  • 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 6/27/2006 Rob Gonda :: www.robgonda.com 89
  • Browser history iframe 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 6/27/2006 Rob Gonda :: www.robgonda.com 90
  • The back button Not needed for Ajax snippets or widgets, but imperative for Ajax applications The problem is not new; Flash applications always faced the same No history means no bookmarks, no sharing, no back button Use frameworks 6/27/2006 Rob Gonda :: www.robgonda.com 91
  • Fixing the back button When a user hits the back button, the browser typically returns a cached version of the previous page. If the HTTP response headers have marked the page as not cacheable, a new request is made. In most browsers, if a fragment identifier exists (#) and the user clicks the back button, history pulls the previous page from the browser’s cache. 6/27/2006 Rob Gonda :: www.robgonda.com 92
  • Degradable Sites What if JavaScript is disabled? Href’s + onClicks Reuse the same logic, just change the views. Model Glue Example 6/27/2006 Rob Gonda :: www.robgonda.com 93
  • Extending Ajax Flash plays friendly with Ajax The Flash Platform does not have the browser limitations Dojo uses Flash for persistent storage Flash 8’s IO classes have been used for file transfers Rob uses Flash for XML Sockets messaging services 6/27/2006 Rob Gonda :: www.robgonda.com 94
  • Futures Extensions Flash SVG Canvas JIT Off-line 6/27/2006 Rob Gonda :: www.robgonda.com 95
  • Do’s and Don’ts Do’s Use Ajax! Plan your application, more thought than standard web sites Keep your business logic in the server GZIP data transmission Provide progress indicator and visual feedback. The user is used to page refreshes Design for error, not only for success 6/27/2006 Rob Gonda :: www.robgonda.com 96
  • Do’s and Don’ts Dont’s Use Ajax for the sake of Ajax. Assume DOM or JavaScript calls are universal. Every browser is different, furthermore in different OS. Modify elements unexpectedly. Users are used to trigger changes. Break the back button and direct links Fetch important content that has to be indexed by search engines Perform some server action without a proper visual representation Overuse XML. XML is heavy and JavaScript objects or JSON improve performance. 6/27/2006 Rob Gonda :: www.robgonda.com 97
  • ColdFusion 6/27/2006 Rob Gonda :: www.robgonda.com 98
  • ColdFusion Frameworks Mach II (Ben Edwards and Hal Helms) Model Glue 1.1 / 2.0 (Joe Rinehart) Fusebox (Steve Nelson and Gabe Roffman) SAM (Simon Horwith) ColdBox (Luis Majano) 6/27/2006 Rob Gonda :: www.robgonda.com 99
  • ColdFusion AJAX Libraries ajaxCFC OOP, CF extends objects, Design Patterns Built-in error handling, security, debugging Integrates with Model Glue 1.1 / 2.0, Mach II CFAjax First Ajax CF Library JSMX Client side library only Simple Remote Scripting (SRS) Uses iframes WddxAjax 6/27/2006 Rob Gonda :: www.robgonda.com 100
  • Model Glue An Implicit Invocation framework simplifying use of the Model View Controller design pattern in ColdFusion applications. A framework encouraging clear separation of Model, View, and Controller Written by Joe Rinehart Released under the Lesser GPL, meaning that it's free to download, use, and alter. 6/27/2006 Rob Gonda :: www.robgonda.com 101
  • ajaxCFC AjaxCFC is a Coldfusion/JavaScript framework meant to speed up ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems. Programming with ajaxCFC involves extending components and creating your own ajax façades. Intergration with Model-Glue and MachII, two of the most popular MVC frameworks widely used by the ColdFusion community. Works with ColdFusion MX 6.0, 6,1, 7.0, 7.1 and Blue Dragon. Automatically handles complex object transmitted from the client to the server and vice versa. Licensed under the Apache License Version 2.0, by Rob Gonda. 6/27/2006 Rob Gonda :: www.robgonda.com 102
  • Switch to Live Demos Simple Echo / Traditional Ajax Model Glue Ajax Echo Model Glue Ajax Contact Manager Model Glue Ajax / XMLSockets Contact Manager Mach II Contact Manager MVC AJAX RSS Reader Spry AJAX RSS Reader 6/27/2006 Rob Gonda :: www.robgonda.com 103
  • Thank You Questions / Comments? Blog: http://www.robgonda.com Corp: http://www.ichameleongroup.com email: rob@robgonda.com 6/27/2006 Rob Gonda :: www.robgonda.com 104