Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies

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 Text This is some text firstChild parent firstChild

<div id=“myId”> <h3> This is some text </h3> </div> Element <div> Element <h3> parent Text This 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) Container Page Fetch data Pre-page Script EWD State & Session Management Cach é/ GT.M Server Front-end technology (WebLink, PHP, CSP etc)

Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script Pre-page Script EWD State & Session Management Cach é/ GT.M Server XMLHttpRequest Ajax Event Cycle (EWD)

Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script EWD State & Session Management Cach é/ GT.M Server Ajax Event Cycle (EWD)

Container Page 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 Caché, GT.M, MySQL Caché, GT.M, MySQL ASP.Net (C# etc) Caché Caché WebLink Caché Caché Caché Server Pages Caché, GT.M, MySQL Caché, GT.M, MySQL Java Server Pages Caché, GT.M, MySQL Caché, GT.M, MySQL PHP Application database Persistence database Web technology/ language

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

http://www.outoftheslipstream.com	49
http://www.outoftheslipstream.org	6
http://www.slideshare.net	3
http://localhost	1

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies

by george.james on Sep 28, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 59

Statistics

Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies — Webinar Transcript