Ajax and the Impact on Caché and Similar Technologies

Rob Tweed

M/Gateway Developments Ltd

Ajax: a whole new world!

• Ajax presents a totally different way of considering and developing web applications

• Brings the web much closer to the typical event-driven client-server GUI style of application

What is Ajax?

• A term coined by Jesse James Garrett in 2005 to describe a range of techniques and technologies that were starting to appear widely:– http://adaptivepath.com/publications/essays/archives/000385.php

• Ajax = Asynchronous Javascript and XML• Actually XML not often used at all!

– Broad and vague term that describes a style of application more than a set of technologies

Pioneers of Ajax

• WebLink’s Event Broker– Pre-dated Ajax by some 10 years!

• Many people have been using Ajax-like tricks using hidden frames for many years

Pioneers of Ajax

• Three big stimuli:– XMLHttpRequest object become standard in

all browsers• Initially a Microsoft ActiveX component used for

Outlook Web Access 2000

– Widely available broadband at reasonable cost

– Google Maps and GMail• Created huge interest in the techniques and clearly

demonstrated their power

What distinguishes an Ajax application?

• Not page-oriented, breaks away from:– Fill out a form– Click a button– Page refreshed with another

• To event-oriented - content dynamically changed within a single page– Some Ajax applications are just a single page of

HTML that the user interacts with for hours!– Looks and behaves much more like a typical

client/server VB or Java application

Ajax Key Technologies

• Javascript and Event Handlers• Cascading Style Sheets (CSS)• XMLHttpRequest Object

– “back-channel” built into the browser that allows a Javascript function to communicate externally via HTTP

• Standard HTTP request/response

• Browser’s Document Object Model (DOM)– Dynamic HTML

• JSON (JavaScript Object Notation)

Typical Ajax technique

• Catch an in-browser event:– Standard Javascript event handler

• onClick, onChange, onMouseOver

• Send an asynchronous request via XMLHTTPRequest object

• Use the response to modify part of the page in the browser by manipulating the DOM– Or send and optionally invoke a JavaScript object via

JSON

Browser’s DOM

• When a page of HTML is received by a browser, it is parsed into a DOM

• API methods to manipulate the DOM are implemented in Javascript– document.getElementById(“myField”).parentNode– document.getElementById(“myField”).firstChild

Javascript DOM API

var alertPointer = document.getElementById("ajaxAlert") ;var head = document.getElementsByTagName("head").item(0);alertPointer = document.createElement("script") ;alertPointer.id = "ajaxAlert" ;alertPointer.type = "text/javascript" ;head.appendChild(alertPointer) ;alertPointer.text = "EWD.ajax.errorOn() ;" ;

Example:

DOM Content Replacement

<div id=“myId”>

<h3>

This is some text

</h3>

</div>

Element<div>

Element<h3>

parent

TextThis is some text

firstChild

parent

firstChild

<div id=“myId”>

<h3>

This is some text

</h3>

</div>

Element<div>

Element<h3>

parent

TextThis is some text

firstChild

parent

firstChild

Special HTML DOM property:innerHTML

DOM Content Replacement

<div id=“myId”>

<h3>

This is some text

</h3>

</div>document.getElementById(“myId”).innerHTML

• read/write property

DOM Content Replacement

document.getElementById(“myId”).innerHTML = “<p>Some new text</p>” ;

<div id=“myId”> <h3> This is some text </h3></div>

DOM Content Replacement

document.getElementById(“myId”).innerHTML = “<p>Some new text</p>” ;

<div id=“myId”>

</div>

DOM Content Replacement

document.getElementById(“myId”).innerHTML = “<p>Some new text</p>” ;

<div id=“myId”> <p> Some new text </p></div>

DOM Content Replacement

Browser DOM is active

• As soon as you make a modification to the browser’s DOM, the browser re-renders the page

• By replacing DOM content with markup delivered as page fragments, we can create an interactive experience for the user

• Changes the web event model…

Ajax Event Cycle (EWD)

ContainerPage

Fetchdata

Pre-pageScript

EWD State & Session Management

Caché/ GT.M Server

Front-end technology (WebLink, PHP, CSP etc)

ContainerPage

FetchPage

Fragment

Page Fragment

Fetchdata

Event

Replaces DOM content

Pre-pageScript

Pre-pageScript

EWD State & Session Management

Caché/ GT.M Server

XMLHttpRequest

Ajax Event Cycle (EWD)

ContainerPage

FetchPage

Fragment

Page Fragment

Fetchdata

Event

Replaces DOM content

Pre-pageScript

EWD State & Session Management

Caché/ GT.M Server

Ajax Event Cycle (EWD)

ContainerPage

EWD State & Session Management

Caché/ GT.M Server

Ajax Event Cycle (EWD)

Ajax and the role of Javascript

• Container page doesn’t get replaced– Just changing bits of its DOM

• Javascript environment and context now remains in place across events and DOM changes

• Javascript now becomes a key part of the application

Javascript Objects

• Javascript is an object oriented language

• Classless, dynamic objects– Add properties and methods arbitrarily and on

the fly– It’s how Caché Objects should have been

implemented!

• With Ajax, Javascript objects can persist throughout the user’s session

Javascript Objects var MGW = {} ;

MGW.page = { currentPage: "compiler", section: new Array(), selectTab: function(obj) { var pageName = EWD.utils.getPiece(curr.id,"Tab",1) ; if (pageName != MGW.page.currentPage) { obj.className = "highlightedTab" ; MGW.page.newProperty = “some new value” ; } }

Javascript Objects

• Also allow you to namespace methods and properties– eg, avoid function name clashes

• Key proponent and guru:– Douglas Crockford (Yahoo)– His training videos should be mandatory

viewing for anyone involved in Ajax work– http://developer.yahoo.com/yui/theater/

Javascript to the fore!

• Session persistence in Javascript

• Application logic in Javascript:– Form field validation– Data manipulation: in and out of Javascript

objects

Err….what about the back-end?

• In a “traditional” web application, the back-end did all the work– Application data storage– Session data persistence– Validation of data sent from browser– Retrieval of data from database and

transformation ready for presentation

Err….what about the back-end?

• When using Ajax– Application data storage– Session data persistence– Validation of data sent from browser– Retrieval of data from database and

transformation ready for presentation

• Not very demanding role!!

Consequences:

• In a Caché-based Ajax application, what need is there for:– Caché ObjectScript?– Caché Objects?

• Except persistent versions of the Javascript ones

• Indeed, does Caché bring any benefits as the back-end database of an Ajax application?– Just need to store and retrieve data

The theory of “good enough”

• The web is founded on technology that is “good enough”– The Internet and the TCP/IP protocol– HTTP, HTML, Javascript

• Other “good enough” supporting technologies have also come to the fore:– MySQL– PHP

Is Caché “too good” for Ajax?

• For small to medium-sized applications, MySQL is the obvious choice– It’s free– It’s “just there” and working on any LAMP

server you buy or hire• Nothing to buy, install or configure

• For corporates, Oracle or SQL Server will remain the obvious choices

• People will “make do” with “good enough”

So is there a role for Caché etc?

• Caché (and similar technologies such as GT.M) have always excelled as:– Very high performance database– Massively scalable database– Extremely robust database– Low maintenance database

• DBA-less!

– Ie Enterprise-grade database technology

• In the Ajax world, the core features of Caché, GT.M etc will benefit the top-end user

• Ironically all the “new stuff” is somewhat redundant in the Ajax world!

• So the really important space that Caché, GT.M etc can occupy is the massive, top-end enterprise Ajax application– eg Quest Diagnostics

So is there a role for Caché etc?

Start small, grow large

• But most applications start small– Solutions such as MySQL are the clear choice

• Successful applications grow large– MySQL can scale– But there comes a point when it just can’t

scale easily to the really high end– Law of diminishing returns

Two strategies

• Persuade the small to medium application developers to adopt Caché, GT.M etc– “just in case” they need to scale in the future

• Provide an easy transition from other solutions when needed– Direct database substitution

• Via SQL mappings• But not necessarily getting full advantage of the technology

– Technology-independent application framework• eXtc Web Developer

EWD: Universal Framework

• EWD is built around an abstracted definition of a web application

• Although originally developed for Caché, it is now completely technology-agnostic

• EWD’s abstract definition can be used to generate code in any technology– and make use of any database

EWD: Technology matrix

Web technology/

language

Persistence database Application database

PHP Caché, GT.M, MySQL Caché, GT.M, MySQL

Java Server Pages Caché, GT.M, MySQL Caché, GT.M, MySQL

Caché Server Pages Caché Caché

WebLink Caché Caché

ASP.Net (C# etc) Caché, GT.M, MySQL Caché, GT.M, MySQL

• EWD therefore provides a universal framework for defining any web application for any technology combination– Isn’t this a threat to Caché, GT.M etc?

• Start small with EWD and MySQL

• Migrate simply to EWD and Caché/GT.M when the time comes for their power

EWD: Universal Framework

Conclusions

• Caché or GT.M-focused Ajax solutions are doomed to being ignored by the mainstream– “good enough” (PHP, Ruby, Dojo etc) will prevail

• EWD’s technology-independence actually benefits Caché, GT.M etc in the new Ajax world– Caché, GT.M etc can and should dominate the high-

ground– We need to facilitate easy migration from “good

enough” when it no longer is• That’s where EWD comes in

Ajax and the Impact on Caché and Similar Technologies

Rob Tweed

M/Gateway Developments Ltd