Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ajax and the Impact on Caché and Similar Technologies Rob Tweed M/Gateway Developments Ltd
Ajax: a whole new world! <ul><li>Ajax presents a totally different way of considering and developing web applications </li...
What is Ajax? <ul><li>A term coined by Jesse James Garrett in 2005 to describe a range of techniques and technologies that...
Pioneers of Ajax <ul><li>WebLink’s Event Broker </li></ul><ul><ul><li>Pre-dated Ajax by some 10 years! </li></ul></ul><ul>...
Pioneers of Ajax <ul><li>Three big stimuli: </li></ul><ul><ul><li>XMLHttpRequest object become standard in all browsers </...
What distinguishes an Ajax application? <ul><li>Not page-oriented, breaks away from: </li></ul><ul><ul><li>Fill out a form...
Ajax Key Technologies <ul><li>Javascript and Event Handlers </li></ul><ul><li>Cascading Style Sheets (CSS) </li></ul><ul><...
Typical Ajax technique <ul><li>Catch an in-browser event: </li></ul><ul><ul><li>Standard Javascript event handler </li></u...
Browser’s DOM <ul><li>When a page of HTML is received by a browser, it is parsed into a DOM </li></ul><ul><li>API methods ...
Javascript DOM API var alertPointer = document.getElementById(&quot;ajaxAlert&quot;) ; var head = document.getElementsByTa...
DOM Content Replacement  <ul><li><div id=“myId”> </li></ul><ul><li><h3> </li></ul><ul><li>This is some text </li></ul><ul>...
<div id=“myId”> <h3> This is some text </h3> </div> Element <div> Element <h3> parent Text This is some text firstChild pa...
<div id=“ myId ”> <h3> This is some text </h3> </div> document.getElementById(“ myId ”).innerHTML <ul><li>read/write prope...
document.getElementById(“myId”).innerHTML = “<p>Some new text</p>” ; <div id=“ myId ”> <h3> This is some text </h3> </div>...
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 C...
Browser DOM is active <ul><li>As soon as you make a modification to the browser’s DOM, the browser re-renders the page </l...
Ajax Event Cycle (EWD) Container Page Fetch data Pre-page Script EWD State & Session Management Cach é/ GT.M  Server Front...
Container Page Fetch Page Fragment Page  Fragment Fetch data Event Replaces DOM content Pre-page Script Pre-page Script EW...
Container Page Fetch Page Fragment Page  Fragment Fetch data Event Replaces DOM content Pre-page Script EWD State & Sessio...
Container Page EWD State & Session Management Cach é/ GT.M  Server Ajax Event Cycle (EWD)
Ajax and the role of Javascript <ul><li>Container page doesn’t get replaced </li></ul><ul><ul><li>Just changing bits of it...
Javascript Objects <ul><li>Javascript is an object oriented language </li></ul><ul><li>Classless, dynamic objects </li></u...
Javascript Objects <ul><li>var MGW = {} ; </li></ul><ul><li>MGW.page = { </li></ul><ul><li>currentPage: &quot;compiler&quo...
Javascript Objects <ul><li>Also allow you to namespace methods and properties </li></ul><ul><ul><li>eg, avoid function nam...
Javascript to the fore! <ul><li>Session persistence in Javascript </li></ul><ul><li>Application logic in Javascript: </li>...
Err….what about the back-end? <ul><li>In a “traditional” web application, the back-end did all the work </li></ul><ul><ul>...
Err….what about the back-end? <ul><li>When using Ajax </li></ul><ul><ul><li>Application data storage </li></ul></ul><ul><u...
Consequences: <ul><li>In a Caché-based Ajax application, what need is there for: </li></ul><ul><ul><li>Caché ObjectScript?...
The theory of “good enough” <ul><li>The web is founded on technology that is “good enough” </li></ul><ul><ul><li>The Inter...
Is Caché “too good” for Ajax? <ul><li>For small to medium-sized applications, MySQL is the obvious choice </li></ul><ul><u...
So is there a role for Caché etc? <ul><li>Caché (and similar technologies such as GT.M) have always excelled as: </li></ul...
<ul><li>In the Ajax world, the core features of Cach é, GT.M etc  will benefit the  top-end  user </li></ul><ul><li>Ironic...
Start small, grow large <ul><li>But most applications start small </li></ul><ul><ul><li>Solutions such as MySQL are the cl...
Two strategies <ul><li>Persuade the small to medium application developers to adopt Caché, GT.M etc </li></ul><ul><ul><li>...
EWD: Universal Framework <ul><li>EWD is built around an abstracted definition of a web application </li></ul><ul><li>Altho...
EWD: Technology matrix Caché, GT.M, MySQL Caché, GT.M, MySQL ASP.Net (C# etc) Caché Caché WebLink Caché Caché Caché Server...
<ul><li>EWD therefore provides a universal framework for defining  any  web application for  any  technology combination <...
Conclusions <ul><li>Caché or GT.M-focused Ajax solutions are doomed to being ignored by the mainstream </li></ul><ul><ul><...
Ajax and the Impact on Caché and Similar Technologies Rob Tweed M/Gateway Developments Ltd
Upcoming SlideShare
Loading in …5
×

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

4,641 views

Published on

Published in: Economy & Finance, Technology

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

  1. Ajax and the Impact on Caché and Similar Technologies Rob Tweed M/Gateway Developments Ltd
  2. Ajax: a whole new world! <ul><li>Ajax presents a totally different way of considering and developing web applications </li></ul><ul><li>Brings the web much closer to the typical event-driven client-server GUI style of application </li></ul>
  3. What is Ajax? <ul><li>A term coined by Jesse James Garrett in 2005 to describe a range of techniques and technologies that were starting to appear widely: </li></ul><ul><ul><li>http://adaptivepath.com/publications/essays/archives/000385.php </li></ul></ul><ul><li>Ajax = Asynchronous Javascript and XML </li></ul><ul><li>Actually XML not often used at all! </li></ul><ul><ul><li>Broad and vague term that describes a style of application more than a set of technologies </li></ul></ul>
  4. Pioneers of Ajax <ul><li>WebLink’s Event Broker </li></ul><ul><ul><li>Pre-dated Ajax by some 10 years! </li></ul></ul><ul><li>Many people have been using Ajax-like tricks using hidden frames for many years </li></ul>
  5. Pioneers of Ajax <ul><li>Three big stimuli: </li></ul><ul><ul><li>XMLHttpRequest object become standard in all browsers </li></ul></ul><ul><ul><ul><li>Initially a Microsoft ActiveX component used for Outlook Web Access 2000 </li></ul></ul></ul><ul><ul><li>Widely available broadband at reasonable cost </li></ul></ul><ul><ul><li>Google Maps and GMail </li></ul></ul><ul><ul><ul><li>Created huge interest in the techniques and clearly demonstrated their power </li></ul></ul></ul>
  6. What distinguishes an Ajax application? <ul><li>Not page-oriented, breaks away from: </li></ul><ul><ul><li>Fill out a form </li></ul></ul><ul><ul><li>Click a button </li></ul></ul><ul><ul><li>Page refreshed with another </li></ul></ul><ul><li>To event-oriented - content dynamically changed within a single page </li></ul><ul><ul><li>Some Ajax applications are just a single page of HTML that the user interacts with for hours! </li></ul></ul><ul><ul><li>Looks and behaves much more like a typical client/server VB or Java application </li></ul></ul>
  7. Ajax Key Technologies <ul><li>Javascript and Event Handlers </li></ul><ul><li>Cascading Style Sheets (CSS) </li></ul><ul><li>XMLHttpRequest Object </li></ul><ul><ul><li>“ back-channel” built into the browser that allows a Javascript function to communicate externally via HTTP </li></ul></ul><ul><ul><ul><li>Standard HTTP request/response </li></ul></ul></ul><ul><li>Browser’s Document Object Model (DOM) </li></ul><ul><ul><li>Dynamic HTML </li></ul></ul><ul><li>JSON (JavaScript Object Notation) </li></ul>
  8. Typical Ajax technique <ul><li>Catch an in-browser event: </li></ul><ul><ul><li>Standard Javascript event handler </li></ul></ul><ul><ul><ul><li>onClick, onChange, onMouseOver </li></ul></ul></ul><ul><li>Send an asynchronous request via XMLHTTPRequest object </li></ul><ul><li>Use the response to modify part of the page in the browser by manipulating the DOM </li></ul><ul><ul><li>Or send and optionally invoke a JavaScript object via JSON </li></ul></ul>
  9. Browser’s DOM <ul><li>When a page of HTML is received by a browser, it is parsed into a DOM </li></ul><ul><li>API methods to manipulate the DOM are implemented in Javascript </li></ul><ul><ul><li>document.getElementById(“myField”).parentNode </li></ul></ul><ul><ul><li>document.getElementById(“myField”).firstChild </li></ul></ul>
  10. Javascript DOM API var alertPointer = document.getElementById(&quot;ajaxAlert&quot;) ; var head = document.getElementsByTagName(&quot;head&quot;).item(0); alertPointer = document.createElement(&quot;script&quot;) ; alertPointer.id = &quot;ajaxAlert&quot; ; alertPointer.type = &quot;text/javascript&quot; ; head.appendChild(alertPointer) ; alertPointer.text = &quot;EWD.ajax.errorOn() ;&quot; ; Example:
  11. DOM Content Replacement <ul><li><div id=“myId”> </li></ul><ul><li><h3> </li></ul><ul><li>This is some text </li></ul><ul><li></h3> </li></ul><ul><li></div> </li></ul>Element <div> Element <h3> parent Text This is some text firstChild parent firstChild
  12. <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
  13. <div id=“ myId ”> <h3> This is some text </h3> </div> document.getElementById(“ myId ”).innerHTML <ul><li>read/write property </li></ul>DOM Content Replacement
  14. document.getElementById(“myId”).innerHTML = “<p>Some new text</p>” ; <div id=“ myId ”> <h3> This is some text </h3> </div> DOM Content Replacement
  15. document.getElementById(“myId”).innerHTML = “<p>Some new text</p>” ; <div id=“ myId ”> </div> DOM Content Replacement
  16. document.getElementById(“myId”).innerHTML = “<p>Some new text</p>” ; <div id=“ myId ”> <p> Some new text </p> </div> DOM Content Replacement
  17. Browser DOM is active <ul><li>As soon as you make a modification to the browser’s DOM, the browser re-renders the page </li></ul><ul><li>By replacing DOM content with markup delivered as page fragments, we can create an interactive experience for the user </li></ul><ul><li>Changes the web event model… </li></ul>
  18. 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)
  19. 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)
  20. 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)
  21. Container Page EWD State & Session Management Cach é/ GT.M Server Ajax Event Cycle (EWD)
  22. Ajax and the role of Javascript <ul><li>Container page doesn’t get replaced </li></ul><ul><ul><li>Just changing bits of its DOM </li></ul></ul><ul><li>Javascript environment and context now remains in place across events and DOM changes </li></ul><ul><li>Javascript now becomes a key part of the application </li></ul>
  23. Javascript Objects <ul><li>Javascript is an object oriented language </li></ul><ul><li>Classless, dynamic objects </li></ul><ul><ul><li>Add properties and methods arbitrarily and on the fly </li></ul></ul><ul><ul><li>It’s how Cach é Objects should have been implemented! </li></ul></ul><ul><li>With Ajax, Javascript objects can persist throughout the user’s session </li></ul>
  24. Javascript Objects <ul><li>var MGW = {} ; </li></ul><ul><li>MGW.page = { </li></ul><ul><li>currentPage: &quot;compiler&quot;, </li></ul><ul><li>section: new Array(), </li></ul><ul><li>selectTab: function(obj) { </li></ul><ul><li>var pageName = EWD.utils.getPiece(curr.id,&quot;Tab&quot;,1) ; </li></ul><ul><li>if (pageName != MGW.page.currentPage) { </li></ul><ul><li>obj.className = &quot;highlightedTab&quot; ; </li></ul><ul><li>MGW.page.newProperty = “some new value” ; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  25. Javascript Objects <ul><li>Also allow you to namespace methods and properties </li></ul><ul><ul><li>eg, avoid function name clashes </li></ul></ul><ul><li>Key proponent and guru: </li></ul><ul><ul><li>Douglas Crockford (Yahoo) </li></ul></ul><ul><ul><li>His training videos should be mandatory viewing for anyone involved in Ajax work </li></ul></ul><ul><ul><li>http://developer.yahoo.com/yui/theater/ </li></ul></ul>
  26. Javascript to the fore! <ul><li>Session persistence in Javascript </li></ul><ul><li>Application logic in Javascript: </li></ul><ul><ul><li>Form field validation </li></ul></ul><ul><ul><li>Data manipulation: in and out of Javascript objects </li></ul></ul>
  27. Err….what about the back-end? <ul><li>In a “traditional” web application, the back-end did all the work </li></ul><ul><ul><li>Application data storage </li></ul></ul><ul><ul><li>Session data persistence </li></ul></ul><ul><ul><li>Validation of data sent from browser </li></ul></ul><ul><ul><li>Retrieval of data from database and transformation ready for presentation </li></ul></ul>
  28. Err….what about the back-end? <ul><li>When using Ajax </li></ul><ul><ul><li>Application data storage </li></ul></ul><ul><ul><li>Session data persistence </li></ul></ul><ul><ul><li>Validation of data sent from browser </li></ul></ul><ul><ul><li>Retrieval of data from database and transformation ready for presentation </li></ul></ul><ul><li>Not very demanding role!! </li></ul>
  29. Consequences: <ul><li>In a Caché-based Ajax application, what need is there for: </li></ul><ul><ul><li>Caché ObjectScript? </li></ul></ul><ul><ul><li>Caché Objects? </li></ul></ul><ul><ul><ul><li>Except persistent versions of the Javascript ones </li></ul></ul></ul><ul><li>Indeed, does Caché bring any benefits as the back-end database of an Ajax application? </li></ul><ul><ul><li>Just need to store and retrieve data </li></ul></ul>
  30. The theory of “good enough” <ul><li>The web is founded on technology that is “good enough” </li></ul><ul><ul><li>The Internet and the TCP/IP protocol </li></ul></ul><ul><ul><li>HTTP, HTML, Javascript </li></ul></ul><ul><li>Other “good enough” supporting technologies have also come to the fore: </li></ul><ul><ul><li>MySQL </li></ul></ul><ul><ul><li>PHP </li></ul></ul>
  31. Is Caché “too good” for Ajax? <ul><li>For small to medium-sized applications, MySQL is the obvious choice </li></ul><ul><ul><li>It’s free </li></ul></ul><ul><ul><li>It’s “just there” and working on any LAMP server you buy or hire </li></ul></ul><ul><ul><ul><li>Nothing to buy, install or configure </li></ul></ul></ul><ul><li>For corporates, Oracle or SQL Server will remain the obvious choices </li></ul><ul><li>People will “make do” with “good enough” </li></ul>
  32. So is there a role for Caché etc? <ul><li>Caché (and similar technologies such as GT.M) have always excelled as: </li></ul><ul><ul><li>Very high performance database </li></ul></ul><ul><ul><li>Massively scalable database </li></ul></ul><ul><ul><li>Extremely robust database </li></ul></ul><ul><ul><li>Low maintenance database </li></ul></ul><ul><ul><ul><li>DBA-less! </li></ul></ul></ul><ul><ul><li>Ie Enterprise-grade database technology </li></ul></ul>
  33. <ul><li>In the Ajax world, the core features of Cach é, GT.M etc will benefit the top-end user </li></ul><ul><li>Ironically all the “new stuff” is somewhat redundant in the Ajax world! </li></ul><ul><li>So the really important space that Cach é , GT.M etc can occupy is the massive, top-end enterprise Ajax application </li></ul><ul><ul><li>eg Quest Diagnostics </li></ul></ul>So is there a role for Cach é etc ?
  34. Start small, grow large <ul><li>But most applications start small </li></ul><ul><ul><li>Solutions such as MySQL are the clear choice </li></ul></ul><ul><li>Successful applications grow large </li></ul><ul><ul><li>MySQL can scale </li></ul></ul><ul><ul><li>But there comes a point when it just can’t scale easily to the really high end </li></ul></ul><ul><ul><li>Law of diminishing returns </li></ul></ul>
  35. Two strategies <ul><li>Persuade the small to medium application developers to adopt Caché, GT.M etc </li></ul><ul><ul><li>“ just in case” they need to scale in the future </li></ul></ul><ul><li>Provide an easy transition from other solutions when needed </li></ul><ul><ul><li>Direct database substitution </li></ul></ul><ul><ul><ul><li>Via SQL mappings </li></ul></ul></ul><ul><ul><ul><li>But not necessarily getting full advantage of the technology </li></ul></ul></ul><ul><ul><li>Technology-independent application framework </li></ul></ul><ul><ul><ul><li>eXtc Web Developer </li></ul></ul></ul>
  36. EWD: Universal Framework <ul><li>EWD is built around an abstracted definition of a web application </li></ul><ul><li>Although originally developed for Caché, it is now completely technology-agnostic </li></ul><ul><li>EWD’s abstract definition can be used to generate code in any technology </li></ul><ul><ul><li>and make use of any database </li></ul></ul>
  37. 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
  38. <ul><li>EWD therefore provides a universal framework for defining any web application for any technology combination </li></ul><ul><ul><li>Isn’t this a threat to Caché, GT.M etc? </li></ul></ul><ul><li>Start small with EWD and MySQL </li></ul><ul><li>Migrate simply to EWD and Caché/GT.M when the time comes for their power </li></ul>EWD: Universal Framework
  39. Conclusions <ul><li>Caché or GT.M-focused Ajax solutions are doomed to being ignored by the mainstream </li></ul><ul><ul><li>“ good enough” (PHP, Ruby, Dojo etc) will prevail </li></ul></ul><ul><li>EWD’s technology-independence actually benefits Cach é, GT.M etc in the new Ajax world </li></ul><ul><ul><li>Caché, GT.M etc can and should dominate the high-ground </li></ul></ul><ul><ul><li>We need to facilitate easy migration from “good enough” when it no longer is </li></ul></ul><ul><ul><ul><li>That’s where EWD comes in </li></ul></ul></ul>
  40. Ajax and the Impact on Caché and Similar Technologies Rob Tweed M/Gateway Developments Ltd

×