Ajax for ColdFusion Developers
-
Upload
sampetruda -
Category
Documents
-
view
1.562 -
download
2
Transcript of Ajax for ColdFusion Developers
Ajax Intensive for ColdFusion Developers
6/27/2006 Rob Gonda :: www.robgonda.com 2
TOCIntro
What is AjaxAjax Vs. Classic WebThe Characteristics of an Ajax AppAlternatives to Ajax
FlashFlexLaszlo
HistoryBasics
DefinitionElementsJavaScriptXMLHttpRequestXML / JSON / WDDX / SOAPJSON and CFDevelopers OversightsTestingDebugging
HTTP Sniffing: Firebug, Fiddler, Ethereal, ServiceCapture
6/27/2006 Rob Gonda :: www.robgonda.com 3
TOCLibraries
JavaScriptPrototypeDWRDojoSpryPush for Dojo
Potential Problems and Security RulesBusiness Logic ImportanceData Transport Vs. Instructions TransportDesign Patterns :: MVCDegradable SitesExtending Ajax with Flash / Flex
6/27/2006 Rob Gonda :: www.robgonda.com 4
TOCCF Frameworks
Model Glue 1.1 / 2.0Mach II
CF Ajax LibrariesajaxCFCCFAjax
Potential Problems ConcurrencyBack buttonBook-marking
Tips and tricksExamples
Simple Ajax EchoModel Glue Ajax EchoModel Glue Contact ManagerModel Glue Ajax / XMLSockets Contact ManagerMach II Ajax Contact ManagerMVC Ajax RSS ReaderSpry RSS Reader
6/27/2006 Rob Gonda :: www.robgonda.com 5
!TOC
!(CF || JS)XML || XPathDOMAccessibilityCommercial FrameworksVenkman JavaScript DebuggerMicrosoft JavaScript Debugger
6/27/2006 Rob Gonda :: www.robgonda.com 6
INTRO
6/27/2006 Rob Gonda :: www.robgonda.com 7
What is Ajax?
6/27/2006 Rob Gonda :: www.robgonda.com 8
What is Ajax?
AJAX != DHTML
6/27/2006 Rob Gonda :: www.robgonda.com 9
Coined
Ajax: A New Approach to Web Applicationsby Jesse James Garrett February 18, 2005
“Google Suggest and Google Maps aretwo examples of a new approach to webapplications that we at Adaptive Path havebeen calling Ajax. The name is shorthandfor Asynchronous JavaScript + XML, and itrepresents a fundamental shift in what’spossible on the Web.”
6/27/2006 Rob Gonda :: www.robgonda.com 10
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 togetherFlash Remoting for JavaScript? Not really, but close
6/27/2006 Rob Gonda :: www.robgonda.com 11
Other remote scripting
Hidden IFrame<img> src<script> src hackCSS href hackJS to faceless Java appletsJS to faceless FlashNO CONTENT ResponseCookies
6/27/2006 Rob Gonda :: www.robgonda.com 12
AJAX Sites
Google Mail, Maps, Reader, Suggest, Personalized Homepage, Writely37signal’s Basecamp / BackpackBackbaseZimbra Collaboration SuiteBindowsopenlaszlo.org
6/27/2006 Rob Gonda :: www.robgonda.com 13
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 14
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, votingInput suggest: i.e. Google suggestEdit in placeActive SearchFiltering large recordsets of dataPre-fetch data sets to improve speedChat: Ajax Vs. Comet
6/27/2006 Rob Gonda :: www.robgonda.com 15
Ajax Real Barriers to Entry
Not technologyDesign ElementsApplication design / architecture is not procedural or sequentialThink beyond the clickDo not expose your code
6/27/2006 Rob Gonda :: www.robgonda.com 16
Design Elements
User InterfaceProvide the user with immediate feedbackUsers are used to the click and page reload flow; make new experience as intuitive as possible
ApplicationDesign for error, not only successAsynchronous implies concurrency, packets may not arrive in the same order they were requestedClient application should ignore timed out responsesKeep state in the server
6/27/2006 Rob Gonda :: www.robgonda.com 17
Principles for Ajax Design
1. Keep it direct2. Provide live feedback3. Offer an invitation4. Cross borders reluctantly5. Leave a light footprint6. Show transitions7. Think in objects
6/27/2006 Rob Gonda :: www.robgonda.com 18
Two Types
Ajax On The EdgesAjax WidgetsEnhance your current siteAdd usabilityDegradable
RIASingle-page applicationsReplacement for Desktop Applications
6/27/2006 Rob Gonda :: www.robgonda.com 19
The Ajax Buzz
6/27/2006 Rob Gonda :: www.robgonda.com 20
Classic request flow
6/27/2006 Rob Gonda :: www.robgonda.com 21
Partial UI Updates
6/27/2006 Rob Gonda :: www.robgonda.com 22
Classic Vs. Ajax Web
No more single request / response restrictions
Dat
a
HTM
L U
I
6/27/2006 Rob Gonda :: www.robgonda.com 23
Rich / Thin Client
6/27/2006 Rob Gonda :: www.robgonda.com 24
Alternatives
FlashFeatures support for vector and raster graphics, a scripting language called ActionScript and bidirectional streaming of audio and video
FlexDeclarative RIA development to build RIA’s using the Flash Platform
LaszloDeclarative RIA development to build RIA’s using the Flash Platform or Ajax/DHTML output
6/27/2006 Rob Gonda :: www.robgonda.com 25
Ajax / Flash / Java
Strengths Weaknesses
Ajax(JS)
Most compatible with existing HTML infrastructure and content;
Built-in support in most browsers – easy to try without the need for additional software;
JavaScript/DHTML code is difficult to maintain;JavaScript/DHTML code is difficult to develop;Not designed for team developmentPerformance and functionality limitations
Java Large and broad industry support for Java Large Java developer community;Widely adopted in the enterpriseRobust performance, scalability and reliabilityRobust OOPDesigned for team developmentMaintainable and manageable code
Requires higher programming skill set than scripting
Requires a Java Virtual Machine to run the application
Flash Supports rich UI features like animation and video
Flash engine is small and widely availableLarge Flash designer community
ActionScript code is difficult to maintain;Not designed for team developmentPerformance and functionality limitationsFlash designers are not developers – lack of
enterprise developer mindshare
6/27/2006 Rob Gonda :: www.robgonda.com 26
Flash Vs. Ajax
Feature Flash Ajax
Audio Native Support Needs plug-ins
Browser Integration Plug-in required Native Support
Compatibility Issues Minor variations between versions of Flash.
Major compatibility differences between browser versions.
CSS Limited support. Full Support (depending on browser).
Dynamic Content Difficult. SWF is a pre-compiled closed format.
HTML can be written out using just about any kind of Server technology.
Programming Model ActionScript 2.0 provides robust, java-like framework.
JavaScript 2.0 not yet supported by any major browser. JS 1.5 not recommended for large OOP applications.
6/27/2006 Rob Gonda :: www.robgonda.com 27
Flash Vs. Ajax
Feature Flash Ajax
(Bitmap) Graphics Bitmap manipulation. Load static images dynamically.
Regular Expressions
Not supported natively by AS 2.0
Full support.
Server Integration Web Services, XML, Flash Remoting
IFRAME trick or XMLHttpRequest
Text Text API mimics some HTML functionality.
Powerful layout capabilities.
Vector Graphics Full Support. None.
Video Dynamically load FLV video files or playback embedded videos.
Supported only through external plug-ins
XML Full support. Limited Support
6/27/2006 Rob Gonda :: www.robgonda.com 28
Ajax Vs. Desktop Apps
6/27/2006 Rob Gonda :: www.robgonda.com 29
UI Richness
6/27/2006 Rob Gonda :: www.robgonda.com 30
One Size Doesn’t Fit All
RIA Approaches and Application Profile Map
Application Scale, Complexity and User Responsiveness
Application Business Criticality
Scripting:Ajax (JS)Flash
OOP:Java.NET
6/27/2006 Rob Gonda :: www.robgonda.com 31
One Size Doesn’t Fit All
Suitable Application Profile Developer Fit
Ajax(JS)
HTML-centric or web content oriented applicationsCasual usage pattern applicationsFast application loading and startup is importantLimited client side logic (lower maintenance
requirement)
JavaScript developers (CSS, DHTML, JavaScript, cross browser skills)
Java Transaction oriented applicationsResponsive user interaction and runtime
performance are importantExpert usage pattern applications (frequent usage,
long duration usage)Performance, scalability and reliability can not be
sacrificed. Applications that must be maintained for many
years.
Java developers
6/27/2006 Rob Gonda :: www.robgonda.com 32
One Size Doesn’t Fit All
Suitable Application Profile Developer Fit
Flash Casual usage pattern Limited client side logic (lower maintenance
requirement)Rich media oriented applications
Flash developers
.NET Transaction oriented applicationsResponsive user interaction and runtime
performance are importantExpert usage pattern applications (frequent usage,
long duration usage)Performance, scalability and reliability can not be
sacrificed. Applications that must be maintained for many
years.
.NET developers (C#, XAML, etc).
6/27/2006 Rob Gonda :: www.robgonda.com 33
History
1/1/1993 12/31/2006
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
1996Introduction of the iframe
1998Microsoft Remote Scripting
2002XMLHttpRequest 2/18/2005
AJAX Term Coined
6/27/2006CFUnited
10/2001The End of theBrowser Wars
4/30/1993WWW Became Public
6/27/2006 Rob Gonda :: www.robgonda.com 34
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 35
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 36
BASICS
6/27/2006 Rob Gonda :: www.robgonda.com 37
XMLHttpRequest (XHR)
A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript Allows to kick off HTTP requests in the backgroundA call back JavaScript function is invoked at each state of the HTTP request and response
6/27/2006 Rob Gonda :: www.robgonda.com 38
XHR Methods
6/27/2006 Rob Gonda :: www.robgonda.com 39
XHR Properties
6/27/2006 Rob Gonda :: www.robgonda.com 40
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 41
Cross-browser XHR Req.
See Listing 1
6/27/2006 Rob Gonda :: www.robgonda.com 42
Xml, wddx, json, soap
XML: Extensible Markup Language is heavy
WDDX: Web Distributed Data Exchangeis structured XML, native for ColdFusion
JSON: JavaScript Object Notationlightweight computer data interchange format
SOAP: Service-Oriented architectural pattern
successor of XML RPC
6/27/2006 Rob Gonda :: www.robgonda.com 43
JSON
A Data Interchange Format.Text-based.Light-weight.Easy to parse.Language Independent.A Subset of ECMA-262 Third Edition (akaJavaScript).
6/27/2006 Rob Gonda :: www.robgonda.com 44
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 45
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 46
JSON is not XML
elementattributeattribute stringcontent<![CDATA[ ]]>
entitiesdeclarationsschemastylesheetscommentsversionnamespace
objectsarraysstringsnumbersbooleansnull
6/27/2006 Rob Gonda :: www.robgonda.com 47
JSON supplant
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);
See Listing 3
6/27/2006 Rob Gonda :: www.robgonda.com 48
String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g,
function (a, b) { var r = o[b];return typeof r === 'string' ?
r : a; }
); };
Supplant prototype
6/27/2006 Rob Gonda :: www.robgonda.com 49
JSON and CF
Cfjson: http://jehiah.com/projects/cfjson/UDFSerializes and de-serializes objectsMissing de-serializing a recordset
json-serializer: http://cfopen.org/projects/json-serializer/
CFCOnline serializes.
Listings 4 and 5
6/27/2006 Rob Gonda :: www.robgonda.com 50
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 51
Testing JavaScript is Not Easy
BrowsersFirefox, Mozilla, Internet Explorer, Opera, Safari, etcMultiple Versions (Main releases, betas, etc)Different Security SettingsDifferent Browser Plug-ins
Different Operating Systems and PatchesDifferent CPUs, RAM, Memory, Multiple Programs running, Multiple browsers open, etc!
6/27/2006 Rob Gonda :: www.robgonda.com 52
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 serverHTTP Traffic Sniffers
Live HTTP HeadersFireBugFiddlerEthereal
6/27/2006 Rob Gonda :: www.robgonda.com 53
Sending Error to the server
Ajax RequestGreat if error does not effect page functionality and user supports XHR!
Hidden IframeGreat if error does not effect page functionality and user has problems with XHR
Redirect PageFunctionality is hosed, nothing to do but run!
Set Image SourceGreat if you are sending small amounts of data. Very X-Browser Friendly!
6/27/2006 Rob Gonda :: www.robgonda.com 54
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 errorsUse MochiKit logging and interpreterUse Venkman or Microsoft Script Debugger to troubleshoot behaviorial problems
6/27/2006 Rob Gonda :: www.robgonda.com 55
Weight and Performance
Minification Vs. ObfuscationA minifier removes the comments and unnecessary white space from a program.An obfuscator also minifies, but it will also make modifications to the programAny transformation carries the risk of introducing a bug.Easier to minify dynamically generated code than obfuscate it
GZIP15% of original file. Makes Minication and Obfuscation file size modification almost irrelevant.
6/27/2006 Rob Gonda :: www.robgonda.com 56
Libraries
6/27/2006 Rob Gonda :: www.robgonda.com 57
AJAX Libraries
Many people opt for AJAX libraries. Provides many advantages
Development timeSync / AsyncSerializationMultithread / batchesError handlingLoggingSecurity, encryption, obfuscation
Disadvantages : NONE!Weight?
6/27/2006 Rob Gonda :: www.robgonda.com 58
Use a Framework
Browsers are different across key areas: Event registration and event handlingHTTP request object implementationDocument Object Model (DOM) API.
Multithreading, handle request queue or batchSerializationError handlingLoggingSecurity, encryption, obfuscation
6/27/2006 Rob Gonda :: www.robgonda.com 59
JavaScript AJAX Libraries
LibrariesPrototype (the most popular, used by RoR)Dojo (used by Open Ajax, XAP, Kabuki)DWR (integrate with Java Struts and JSF)Adobe Spry
ToolkitsMicrosoft Altas (commercial)Open Ajax (IBM, Zimbra, Dojo | open source)Open Laszlo (Flash and Ajax)Tibco GIBackbase
6/27/2006 Rob Gonda :: www.robgonda.com 60
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 61
Prototype Ajax e.g.
Listing 6Listing 7Listing 8
6/27/2006 Rob Gonda :: www.robgonda.com 62
DWR Ajax e.g.
We’ll cover enough of DWR laterCFAjaxajaxCFC
6/27/2006 Rob Gonda :: www.robgonda.com 63
Dojo Ajax e.g.
Listing 9Note to self: keep an eye on ATF -- AJAX Toolkit Framework http://www.eclipse.org/atf/
6/27/2006 Rob Gonda :: www.robgonda.com 64
Spry Ajax e.g.
Listing 10Listing 11http://www.robgonda.com/dev/spry/blog.cfmhttp://www.robgonda.com/dev/spry/blog2.cfmhttp://www.robgonda.com/dev/spry/blog3.cfm
6/27/2006 Rob Gonda :: www.robgonda.com 65
Push for Dojo
Dojo is a Set OfLayered Libraries
6/27/2006 Rob Gonda :: www.robgonda.com 66
Dojo UI Utilities
Dojo.ioDojo.htmlDojo.styleDojo.dnd Drag and dropDojo.lfx effects: fade, wipe, explode, highlight, …Dojo.dom
6/27/2006 Rob Gonda :: www.robgonda.com 67
Dojo Widgets
What’s A Widget?Encapsulated, reusable rendering andbehaviorHTML+CSS bound by JavaScriptCan be built from markupSubclass of dojo.widget.WidgetUsually derives from dojo.widet.HtmlWidget
6/27/2006 Rob Gonda :: www.robgonda.com 68
Dojo Widgets
Rich Text EditorContent PaneSplit PanelTabsFisheye ListSorting TableGoogle/Yahoo MapsTreeDialog/Wizard
6/27/2006 Rob Gonda :: www.robgonda.com 69
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 70
Dojo Ajax Slide
dojo.io.bind() packs a big punchHandles text encodingsAuto-encodes URL componentsSubmits formsSync or asyncCoerces return data
Pluggable back-ends
6/27/2006 Rob Gonda :: www.robgonda.com 71
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 72
Problems
6/27/2006 Rob Gonda :: www.robgonda.com 73
Potential Problems
Breaks back button support URL's don't change as state changes SEO / Search Engine IndexingCross Browser Issues can be a pain Cross-domain requests (SOA, WS)Viewable Source CodeClient side business logicServer Load if not properly codedConcurrency
6/27/2006 Rob Gonda :: www.robgonda.com 74
Security Concerns (I)
JavaScript applications are easily decoded and reengineeredOn-demand (server side) loading will not help if you load your entire application; keep business logic on serverObfuscation makes it more difficult, but can also generate bugs
6/27/2006 Rob Gonda :: www.robgonda.com 75
Security Concerns (II)
XMLHttpRequest is nothing more than a normal form submission
Authentication elementsSession cookiesBlank Referrer by default You should manually set this header in your API
Get / Post Verbs are sent in plain textConsider encrypting requests and obfuscating responses
Developers forget to send sensitive data over SSL
6/27/2006 Rob Gonda :: www.robgonda.com 76
Security Rules
Don't trust user inputDo not trust client side validationDo not trust server side AJAX validation
Will improve user experienceWill not reduce code, only increase it.You still need to re-validate in the server side
Do not assume every Ajax request is realKeep you business logic in the serverNo framework is yet encrypting transmitted data
6/27/2006 Rob Gonda :: www.robgonda.com 77
Ajax Request Header
Treat it just like a regular requestValidate:
User-Agent (IE, Mozilla, Gecko)Referer: make sure it was posted from your siteCookie: validate valid sessionVerbs: require post vs. get
6/27/2006 Rob Gonda :: www.robgonda.com 78
Ajax Request Header
6/27/2006 Rob Gonda :: www.robgonda.com 79
Cross-site restrictions
Impediment to communicate with other domains is good. Cross-domain requests are a security holeThere is no real need for it, Web Services should be consumed by server side scriptingIf really needed, use iframes technique instead
6/27/2006 Rob Gonda :: www.robgonda.com 80
Do not expose your business logic
Most important aspect for Enterprise ApplicationsAjax uses JavaScript, but it does not have to reside in the clientUse remote calls only as a transport layerTransport state and commands, not raw dataMVC
Model must remain on the severView or presentation layer is managed with DOMController layer simply requests commands and dynamically evaluates them
6/27/2006 Rob Gonda :: www.robgonda.com 81
Main Architectures
6/27/2006 Rob Gonda :: www.robgonda.com 82
What to transport
DataXMLWDDXSOAPJSON (JavaScript Object Notation)JavaScript Native Objects (one way)
InstructionsJavaScript instructions to be dynamically evaluated using eval()
6/27/2006 Rob Gonda :: www.robgonda.com 83
The Magic Functions
Traditionally you would use DOMCross browser hellcreateNode is a pain
innerHTMLFor modifying content
eval()Dynamic expression evaluation
6/27/2006 Rob Gonda :: www.robgonda.com 84
The eval() function
Dynamic evaluationONLY in the clientNEVER in the server
Evaluation in the server could cause xml or sqlinjection.
Evaluate innerHTML instructioni.e. result = “ $(‘div1’).innerHTML = ‘text’ ”;eval(result);
6/27/2006 Rob Gonda :: www.robgonda.com 85
Design Patterns
6/27/2006 Rob Gonda :: www.robgonda.com 86
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 87
MVC Diagram
6/27/2006 Rob Gonda :: www.robgonda.com 88
MVC Data Flow
6/27/2006 Rob Gonda :: www.robgonda.com 89
Architecture Recommendations
Clearly separate content from code - MVCStore data that spans pages or sessions on the serverConsider an AJAX centric controller Use Facades to provide generalized access to data or servicesUse care with fined grained access to model/services
6/27/2006 Rob Gonda :: www.robgonda.com 90
Browser history
iframe techniqueFirefox
Frame in html Changes are storedFrame in DOM Changes are not stored
IEAll Changes are stored
SafariNo Changes are stored
6/27/2006 Rob Gonda :: www.robgonda.com 91
The back button
Not needed for Ajax snippets or widgets, but imperative for Ajax applicationsThe problem is not new; Flash applications always faced the sameNo history means no bookmarks, no sharing, no back buttonUse frameworks
6/27/2006 Rob Gonda :: www.robgonda.com 92
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 93
Degradable Sites
What if JavaScript is disabled?Href’s + onClicksReuse the same logic, just change the views.Model Glue Example
6/27/2006 Rob Gonda :: www.robgonda.com 94
Extending Ajax
Flash plays friendly with AjaxThe Flash Platform does not have the browser limitationsDojo uses Flash for persistent storageFlash 8’s IO classes have been used for file transfersRob uses Flash for XML Sockets messaging services
6/27/2006 Rob Gonda :: www.robgonda.com 95
Futures Extensions
Flash SVGCanvasJITOff-line
6/27/2006 Rob Gonda :: www.robgonda.com 96
Do’s and Don’ts
Do’sUse Ajax!Plan your application, more thought than standard web sitesKeep your business logic in the serverGZIP data transmissionProvide progress indicator and visual feedback. The user is used to page refreshesDesign for error, not only for success
6/27/2006 Rob Gonda :: www.robgonda.com 97
Do’s and Don’ts
Dont’sUse 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 linksFetch important content that has to be indexed by search enginesPerform some server action without a proper visual representationOveruse XML. XML is heavy and JavaScript objects or JSON improve performance.
6/27/2006 Rob Gonda :: www.robgonda.com 98
ColdFusion
6/27/2006 Rob Gonda :: www.robgonda.com 99
ColdFusion Frameworks
Mach II (Ben Edwards and Hal Helms)Model Glue 1.1 / 2.0 (Joe Rinehart)Fusebox (Steve Nelson and GabeRoffman)SAM (Simon Horwith)ColdBox (Luis Majano)
6/27/2006 Rob Gonda :: www.robgonda.com 100
ColdFusion AJAX Libraries
ajaxCFCOOP, CF extends objects, Design PatternsBuilt-in error handling, security, debuggingIntegrates with Model Glue 1.1 / 2.0, Mach II
CFAjaxFirst Ajax CF Library
JSMXClient side library only
Simple Remote Scripting (SRS)Uses iframes
WddxAjax
6/27/2006 Rob Gonda :: www.robgonda.com 101
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 102
ajaxCFCAjaxCFC 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 103
Switch to Live Demos
Simple Echo / Traditional AjaxModel Glue Ajax EchoModel Glue Ajax Contact ManagerModel Glue Ajax / XMLSockets Contact ManagerMach II Contact ManagerMVC AJAX RSS ReaderSpry AJAX RSS Reader
6/27/2006 Rob Gonda :: www.robgonda.com 104
Thank You
Questions / Comments?Blog: http://www.robgonda.comCorp: http://www.ichameleongroup.comemail: [email protected]