I caught a post on ajaxian today talking about ajax 'anti-patterns', and the term caught my eye. Apparently Ed Burnette has coined the term referring to anti-patterns as things to watch out for while developing your ajax app. Chris Cornutt from ajaxian summed it up with this short list.
- Chatty communication - lots of “chatter� back and forth between the server
- Too much XML parsing - libraries to parse XML in the browser are still relatively slow
- Loading everything before displaying something - don’t make the user wait if things are slow. give them something.
- Rendering on the server - make good decisions as to where to render various page content
- Over thinking the design - don’t use the old mentality of just a few releases, update often and in bits
This got me thinking, as am currently in the redevelopment of my site, and most importantly my portfolio, I have deliberately avoided having my serverside pass XML back to the client, and have instead opted to use formatted XHTML. I had been thinking that this was a copout and that I should in my next build deploy a much more extensible Javascript based XML parser for my list of thumbnails and subsequent portfolio item data. I mean, using XML means that I can free my server up and pass less complex data back to the client right? Well yes and no.
Currently I'm hosted with mediatemple. The renound hosting company for design geeks everywhere. And if I remember correctly, they have pretty decent servers, with decent processing power that I actually give them money every month to be able to use. Additionally, my 'lowest common denominator' testing machine here is a 6-7 year old 700mhz P3. Not so much of a powerhouse, and since it's been beaten to hell over the years, it's not the processing powerhouse that it once was back at the end of the last decade. So if somthing is going to perform badly, my trusty P3 will catch it and let me know. This is where we get to the issue of clientside XML parsing, forthought, and extensibility.
If you're anywhere on my site other than in the portfolio itself, the sidebar nav's casestudies links are generated with a simple mySQL query, and a loop in PHP that builds a link that looks like this.
HTML:
-
http://www.naterkane.com/portfolio.php?casestudy=1&id=231
It basically tells the page to say, hey, we want to show a particular project off the bat, so instead of just calling the function to load up the project thumbnails, lets also specify a particular project, and load it up too, with the related case study data instead of just the basic project description text.
In order to do that I had to make sure that my xmlHttpRequests didn't step on each other's toes. So I instead of specifying a global request/response object, I kept it inside of each method, and used a constructor that created a local object instead.
JavaScript:
-
function xhrCreate(type){
-
var xhr;
-
if (!type) {
-
type = 'text';
-
}
-
if (window.ActiveXObject) {
-
try {
-
xhr = new ActiveXObject("Msxml2.XMLHTTP");
-
} catch (e) {
-
try {
-
xhr = new ActiveXObject("Microsoft.XMLHTTP");
-
} catch (e) {}
-
}
-
} else if (window.XMLHttpRequest) {
-
xhr = new XMLHttpRequest();
-
if (xhr.overrideMimeType) {
-
xhr.overrideMimeType('text/' + type);
-
}
-
}
-
return (xhr);
-
}
-
-
function getPortfolio(role) {
-
var xhrPortfolio = xhrCreate('html');
-
var portfolio = document.getElementById("portfolio");
-
var url = "includes/getPortfolio.php?role=" + role;
-
url +='&t=' + new Date().getTime();
-
portfolio.innerHTML = '<img src="http://www.naterkane.com/blog/images/loading.gif" />';
-
xhrPortfolio.open("GET", url , true);
-
xhrPortfolio.onreadystatechange = function() {
-
if (xhrPortfolio.readyState == 4 && xhrPortfolio.status == 200) {
-
portfolio.innerHTML = xhrPortfolio.responseText;
-
xhrPortfolio = null;
-
} else if (xhrPortfolio.readyState == 4 && xhrPortfolio.status == 404) {
-
portfolio.innerHTML = xhrPortfolio.statusText;
-
xhrPortfolio = null;
-
}
-
}
-
xhrPortfolio.send(null);
-
}
-
-
function getPortfolioDetail(id,casestudy) {
-
var xhrPortfolioDetail = xhrCreate('html');
-
var portfolioDetail = document.getElementById("portfolioDetail");
-
var url = "includes/getPortfolioDetail.php?id=" + id;
-
url +='&t=' + new Date().getTime();
-
if (casestudy){
-
url += "&casestudy=1";
-
}
-
portfolioDetail.innerHTML = '<img src="http://www.naterkane.com/blog/images/loading.gif" />';
-
xhrPortfolioDetail.open("GET", url , true);
-
xhrPortfolioDetail.onreadystatechange = function() {
-
if (xhrPortfolioDetail.readyState == 4 && xhrPortfolioDetail.status == 200) {
-
portfolioDetail.innerHTML = xhrPortfolioDetail.responseText;
-
xhrPortfolioDetail = null;
-
} else if (xhrPortfolioDetail.readyState == 4 && xhrPortfolioDetail.status == 404) {
-
portfolioDetail.innerHTML = xhrPortfolioDetail.statusText;
-
xhrPortfolioDetail = null;
-
}
-
}
-
xhrPortfolioDetail.send(null);
-
}
Ok so now I'm sending two requests at the same time, they're not colliding and everything is peachy.
The
Obj.responseText
in both methods employ AHAH (preformatted XHTML), with calls to other javascript function, and other complex data that I don't care to distribute to anyone else. So why am I not parsing it on the client side? I'd rather have the PHP do the work for me once, instead of having my PHP first have to parse the data into XML, and then use Javascript to reparse it again into somthing that the browser can display as I intend. Which would further slow down the response time of the call.
So am I right or wrong in my approach to returning data this way? I'm still not sure, but at least I know that I'm not burdening my client with additional duties.
Feed
LinkedIn
Facebook
del.icio.us