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

50 %
50 %
Information about Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies

Published on September 28, 2007

Author: george.james

Source: slideshare.net

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

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

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

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

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

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)

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

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

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>

<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

read/write property

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…

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

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 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: &quot;compiler&quot;, section: new Array(), selectTab: function(obj) { var pageName = EWD.utils.getPiece(curr.id,&quot;Tab&quot;,1) ; if (pageName != MGW.page.currentPage) { obj.className = &quot;highlightedTab&quot; ; MGW.page.newProperty = “some new value” ; } }

var MGW = {} ;

MGW.page = {

currentPage: &quot;compiler&quot;,

section: new Array(),

selectTab: function(obj) {

var pageName = EWD.utils.getPiece(curr.id,&quot;Tab&quot;,1) ;

if (pageName != MGW.page.currentPage) {

obj.className = &quot;highlightedTab&quot; ;

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/

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

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

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!!

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

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

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”

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

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 ?

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

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

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

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

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

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

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

Add a comment

Related presentations

Related pages

robtweed/ewdGateway · GitHub - GitHub · Where software ...

robtweed / ewdGateway. Code; Issues; ... Gateway for Cache and GT.M. Rob Tweed rtweed@ ... the request for the page in a way similar to the EWD Ajax ...
Read more

Building a Client-Side Ajax Cache: Caching Algorithms ...

Building a Client-Side Ajax Cache: Caching Algorithms. By Rob Gravelle. ... Similar to LRU is the "Least Frequently Used" ... JavaScript 1.6 provides the ...
Read more

New York - Part of a demo for #ProSEO - Ginger Host

New York City exerts a significant impact upon ... culture, art, fashion, research, technology ... Copyright © 2011 Rob Ousbey for #ProSEO in ...
Read more

Rob Cardwell - The world's open source leader | Red Hat

Rob Cardwell VP Middleware Technology ... The Same Problems Continue to Impact IT “ Similar to last year, ... Clustering, Cache Red Hat Enterprise Linux ...
Read more

SharePoint Authentication and Session Management | Rob ...

5 thoughts on “ SharePoint Authentication and Session Management ” Rob August 1, 2013 at 2:37 am. Hi Rob. We dont want SharePoint to store the ...
Read more

jQuery 1.5's AJAX rewrite and ASP.NET services: All is ...

... jQuery 1.5’s new AJAX module has almost no negative impact on ... this was no longer necessary because jQuery contained a similar ... jQuery. ajax ...
Read more

client-side file caching - Stack Overflow

client-side file caching. ... We followed a similar pattern to PJP, ... Setting cache expiry dates for each type of resource ...
Read more

Google

Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.
Read more

Ajax Learning Guide - .Net development information and ...

Ajax Learning Guide. ... Ajax) (Rob Chartier) ... you'll see how to use DOJO and JavaServer Faces technology to include Ajax functionality in a custom ...
Read more

Why ASP.NET AJAX UpdatePanels are dangerous | Encosia

Tweet or email me a ... of ASP.NET AJAX and AjaxPro are very similar in ... how to use these ASP.NET technologies “properly” when ...
Read more