WizIQ helps you learn and teach online - any subject you can think of!
Join for FREE

ajax

Add to Favourites
Post to:
Comments
Presentation Transcript Presentation Transcript

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: 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? : 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 : 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 : 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? : 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 : 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 : 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 : 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 : 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 : DOM Content Replacement

This is some text

Element
Element

parent Text This is some text firstChild parent firstChild

Slide12 :

This is some text

Element
Element

parent Text This is some text firstChild parent firstChild Special HTML DOM property: innerHTML DOM Content Replacement

Slide13 :

This is some text

document.getElementById(“myId”).innerHTML read/write property DOM Content Replacement

Slide14 : document.getElementById(“myId”).innerHTML = “

Some new text

” ;

This is some text

DOM Content Replacement

Slide15 : document.getElementById(“myId”).innerHTML = “

Some new text

” ;
DOM Content Replacement

Slide16 : document.getElementById(“myId”).innerHTML = “

Some new text

” ;

Some new text

DOM Content Replacement

Browser DOM is active : 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) : 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)

Slide19 : 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)

Slide20 : 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)

Slide21 : Container Page EWD State & Session Management Caché/ GT.M Server Ajax Event Cycle (EWD)

Ajax and the role of Javascript : 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 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 : 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 : 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! : 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? : 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

Slide28 : 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: : 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 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? : 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? : 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

So is there a role for Caché etc? : 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 : 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 : 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: 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 : EWD: Technology matrix

EWD: Universal Framework : 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 : 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 : Ajax and the Impact on Caché and Similar Technologies Rob Tweed M/Gateway Developments Ltd

Want to learn?

Sign up and browse through relevant courses.

Name:
Your Email:
Password:
Country:
Contact no.:


Area code Number
Subject you are interested in:
Word verification: (Enter the text as in image)


Sign Up Already a member? Sign In
I agree to WizIQ's User Agreement & Privacy Policy
WizIQ Tech Support
Teach WizIQ
User
86 Members Recommend
17 Followers

Your Facebook Friends on WizIQ