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! 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
- 3. 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
- 4. 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
- 5. 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
- 6. 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
- 7. 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)
- 8. 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
- 9. 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
- 10. 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:
- 11. 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
- 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 read/write property 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 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…
- 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 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
- 23. 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
- 24. 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” ; } }
- 25. 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/
- 26. Javascript to the fore! Session persistence in Javascript Application logic in Javascript: Form field validation Data manipulation: in and out of Javascript objects
- 27. 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
- 28. 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!!
- 29. 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
- 30. 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
- 31. 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”
- 32. 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
- 33. 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 ?
- 34. 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
- 35. 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
- 36. 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
- 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. 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
- 39. 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
- 40. Ajax and the Impact on Caché and Similar Technologies Rob Tweed M/Gateway Developments Ltd