There&apos;s been a lot of discussion recently about the page size being generated by the CF8 Ajax components and most of it has been really positive with Adobe assuring us that they&apos;re working on minimizing the YUI, Ext and Spry libs before final release.

I&apos;ve been having a great exchange with Damon and Ashwin of Adobe about this and sent the code for my version of <a href="http://cfsilence.com/blog/client/index.cfm/2007/5/30/CF8-Ajax-Feed-Reader-In-Less-Then-60-Lines-Of-Code">Todd Sharp&apos;s CF8 Feed Reader app</a>. Todd did a great job leveraging CF8&apos;s Ajax widgets and when I saw the results, I was truly floored by the simplicity of the implementation.
Well, Ashwin really stepped it up and took it a step further. With a few tweaks, he was able to take it a step further and come up with a VERY clean and concise version of the feed reader. I was shocked at how clean this was. He also managed to get it down from 717k to 242k. He also mentioned that the Ajax indicator (loading.gif) had not been optimized (107k) and he was going to update that as well. That would probably bring the page size down another 80-100k! That is amazing work Ashwin!!

Below is Ashwin&apos;s code:

index.cfm:

Notice that he uses the CFDIV tag to dynamically bind the results of feeds.cfm to the div. Very sweet!


<code>
<html>
<head>
<title>Ashwin&apos;s version of Todd Sharp&apos;s Feed Reader</title>
<link rel="STYLESHEET" type="text/css" href="style.css">

<invalidTag>
</script>
</head>
<body>
<div>
<cfdiv id="feedDiv" bind="url:feeds.cfm"></div>

<div id="feedContainer"></div>
</div>
</body>
</html>
</code>

feeds.cfm:

The big change from Todd & my code here is that Ashwin built the links on the fly within the CF page and used the ColdFusion.navigate method to create the XHR call to feed.cfm and bind it to the feedContainer div. Again very sweet!

<code>

<cfxml variable="feedList">
<?xml version="1.0" encoding="UTF-8"?><feeds><feed><url>http://cfsilence.com/blog/client/rss.cfm?mode=full</url><feedTitle>Todd Sharp</feedTitle></feed><feed><url>http://feeds.feedburner.com/RaymondCamdensColdfusionBlog</url><feedTitle>Raymond Camden</feedTitle></feed><feed><url>http://www.remotesynthesis.com/blog/rss.cfm?mode=full</url><feedTitle>Brian Rinaldi</feedTitle></feed></feeds>

</cfxml>
<cfloop index="i" from="1" to="#ArrayLen(feedList.feeds.feed)#">
<cfoutput><a class=&apos;feedLink&apos; href=&apos;javascript:ColdFusion.navigate("feed.cfm?feed=#feedList.feeds.feed[i].url.xmltext#", "feedContainer")&apos;>#feedList.feeds.feed[i].feedTitle.xmltext#</a><br /></cfoutput>

</cfloop>
</code>

feed.cfm:

<code>
<cfparam name="url.feed" default="">
<cfparam name="enclosureDir" default="#expandPath("enclosures")#">

<cfif len(url.feed)>
<cffeed action="read" source="#url.feed#" properties="feedData" query="thisFeed" enclosureDir="#enclosureDir#" ignoreEnclosureError = "true" />

<div style="margin:10px;">
<span><cfoutput><a href="#feedData.link#">#feedData.description#</a></cfoutput></span>
<cfoutput query="thisFeed">
<cfif currentRow mod 2>

<cfset bg = "CCCCDD">
<cfelse>
<cfset bg = "FFFFFF">
</cfif>
<div style="background-color:#bg#; margin: 10px 0 10px 0; border: 1px solid ##000000;">
<div style="width: 100%; margin-bottom: 10px;">
<div style="float:left;">

<a href="#rsslink#">#title#</a>
</div>
<div style="float:right; text-align: right;">
#publishedDate#
</div>
</div>
<div>

#content#
</div>
</div>
</cfoutput>
</div>
<cfelse>
</cfif>
</code>

I have to say that I truly love this version. Its very streamlined and so easy. The *only* thing that I didn&apos;t like was the inline JS being created in feeds.cfm using ColdFusion.navigate. I would prefer to have an more unobtrusive method and dynamically bind the click event after the feed authors have been returned. I&apos;m not sure if that&apos;s possible. Ashwin?

Overall, this is a REALLY awesome implementation and shows how powerful the CF8 Ajax functionality can be.