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


TOCLibraries

JavaScriptPrototypeDWRDojoSpryPush for Dojo

Potential Problems and Security RulesBusiness Logic ImportanceData Transport Vs. Instructions TransportDesign Patterns :: MVCDegradable SitesExtending Ajax with Flash / Flex


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


!TOC

!(CF || JS)XML || XPathDOMAccessibilityCommercial FrameworksVenkman JavaScript DebuggerMicrosoft JavaScript Debugger


INTRO


What is Ajax?


What is Ajax?

AJAX != DHTML


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.”


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


Other remote scripting

Hidden IFrame<img> src<script> src hackCSS href hackJS to faceless Java appletsJS to faceless FlashNO CONTENT ResponseCookies


AJAX Sites

Google Mail, Maps, Reader, Suggest, Personalized Homepage, Writely37signal’s Basecamp / BackpackBackbaseZimbra Collaboration SuiteBindowsopenlaszlo.org


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


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


Ajax Real Barriers to Entry

Not technologyDesign ElementsApplication design / architecture is not procedural or sequentialThink beyond the clickDo not expose your code


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


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


Two Types

Ajax On The EdgesAjax WidgetsEnhance your current siteAdd usabilityDegradable

RIASingle-page applicationsReplacement for Desktop Applications


The Ajax Buzz


Classic request flow


Partial UI Updates


Classic Vs. Ajax Web

No more single request / response restrictions

Dat

a

HTM

L U

I


Rich / Thin Client


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


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


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.


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


Ajax Vs. Desktop Apps


UI Richness


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



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



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).


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


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.


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.


BASICS


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


XHR Methods


XHR Properties


Cross-browser: IE

new ActiveXOjbect("Microsoft.XMLHTTP"); You can't totally blame them because they invented it Native XMLHttpRequest support should be in IE7


Cross-browser XHR Req.

See Listing 1


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


JSON

A Data Interchange Format.Text-based.Light-weight.Easy to parse.Language Independent.A Subset of ECMA-262 Third Edition (akaJavaScript).


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.


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>


JSON is not XML

elementattributeattribute stringcontent<![CDATA[ ]]>

entitiesdeclarationsschemastylesheetscommentsversionnamespace

objectsarraysstringsnumbersbooleansnull


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


String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g,

function (a, b) { var r = o[b];return typeof r === 'string' ?

r : a; }

); };

Supplant prototype


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

http://jehiah.com/projects/cfjson/

http://cfopen.org/projects/json-serializer/


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?


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!


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


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!


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


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.


Libraries


AJAX Libraries

Many people opt for AJAX libraries. Provides many advantages

Development timeSync / AsyncSerializationMultithread / batchesError handlingLoggingSecurity, encryption, obfuscation

Disadvantages : NONE!Weight?


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


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


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

http://prototype.conio.net/

http://getahead.ltd.uk/dwr

http://dojotoolkit.org/

http://labs.adobe.com/technologies/spry/


Prototype Ajax e.g.

Listing 6Listing 7Listing 8


DWR Ajax e.g.

We’ll cover enough of DWR laterCFAjaxajaxCFC


Dojo Ajax e.g.

Listing 9Note to self: keep an eye on ATF -- AJAX Toolkit Framework http://www.eclipse.org/atf/

http://www.eclipse.org/atf/


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

http://www.robgonda.com/dev/spry/blog.cfm

http://www.robgonda.com/dev/spry/blog2.cfm

http://www.robgonda.com/dev/spry/blog3.cfm


Push for Dojo

Dojo is a Set OfLayered Libraries


Dojo UI Utilities

Dojo.ioDojo.htmlDojo.styleDojo.dnd Drag and dropDojo.lfx effects: fade, wipe, explode, highlight, …Dojo.dom


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


Dojo Widgets

Rich Text EditorContent PaneSplit PanelTabsFisheye ListSorting TableGoogle/Yahoo MapsTreeDialog/Wizard


Dojo Widgets

<script>dojo.require(”dojo.widget.Editor2”);

</script>

<textarea dojoType=”Editor2”minHeight=”40em”relativeImageUrls=”true”toolbarAlwaysVisible=”true”htmlEditing=”true”>...

</textarea>


Dojo Ajax Slide

dojo.io.bind() packs a big punchHandles text encodingsAuto-encodes URL componentsSubmits formsSync or asyncCoerces return data

Pluggable back-ends


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()


Problems


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


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


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


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


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


Ajax Request Header


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


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


Main Architectures


What to transport

DataXMLWDDXSOAPJSON (JavaScript Object Notation)JavaScript Native Objects (one way)

InstructionsJavaScript instructions to be dynamically evaluated using eval()


The Magic Functions

Traditionally you would use DOMCross browser hellcreateNode is a pain

innerHTMLFor modifying content

eval()Dynamic expression evaluation


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);


Design Patterns


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


MVC Diagram


MVC Data Flow


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


Browser history

iframe techniqueFirefox

Frame in html Changes are storedFrame in DOM Changes are not stored

IEAll Changes are stored

SafariNo Changes are stored


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


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.


Degradable Sites

What if JavaScript is disabled?Href’s + onClicksReuse the same logic, just change the views.Model Glue Example


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


Futures Extensions

Flash SVGCanvasJITOff-line


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


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.


ColdFusion


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)


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


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.

http://clearsoftware.net/


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.


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


Thank You

Questions / Comments?Blog: http://www.robgonda.comCorp: http://www.ichameleongroup.comemail: [email protected]

Ajax for ColdFusion Developers

Documents

Transcript of Ajax for ColdFusion Developers