Showing posts with label ibdom. Show all posts
Showing posts with label ibdom. Show all posts

Wednesday, August 1, 2007

Shared Library Delivery over CDN?

A slew of enabling libraries and frameworks are available to enhance functionality, usability, and interactivity of web applications we build ... mootools, prototype, scriptaculous, dojo, yui, to name a very, very few.

In the process of rebuilding our DWR-driven Used Cars Search application, we've been working on a couple of small, narrowly-scoped libraries of our own: IBDOM, Favoracious.

While these libraries afford developers tremendous agility to build advanced applications, some get large in size, and are often served directly from those applications in less-than-optimal ways, resulting in perceptible sluggishness. This is where a highly-optimized Content-Delivery Network (CDN) to serve such libraries can dramatically improve application performance.

Beyond the authoring and maintenance of an open-source UI framework, Yahoo's YUI group provides an added valuable service: They allow developers to directly include the YUI libraries from their "high-performance" Content Delivery Network.

Yahoo's inaugural blog post on the subject, goes over advantages of leveraging their delivery framework:
(...) Moreover, Yahoo!’s hosting network is configured to serve JavaScript and CSS using gzip compression. We minify YUI JavaScript before pushing it to our servers; in combination with gzipping, this results in a 90% reduction in transmitted filesize as compared to the footprint of YUI’s raw (and commented) source. CSS files weigh 60% less on the wire using gzip compression. If your current host does not support mod-gzip or mod-deflate, the advantages of using Yahoo! hosting could be dramatic. (...)

... while they also caution:
Serving YUI from Yahoo! servers won’t be the right decision for all implementers; if you’re aggregating or customizing YUI source code and serving it from a highly performant host, there will be little reason to switch. However, for some implementers the provision of free, robust, edge-network hosting will have significant upside.

Should a large number of sites elect to load the YUI libraries directly from the same Yahoo CDN URL, the caching benefits and efficiencies could be tremendous.

A person browsing the web, could load a YUI library in their browser's cache upon first visiting "Site A". Since Yahoo sets an aggressive "Expires:" HTTP Header, the user's browser will likely not even try to "revalidate" the file with a conditional HTTP GET for quite some time during subsequent visits to "Site A". Later, the same person might visit "Site B", which also happens to be loading the same YUI Library from the same Yahoo CDN URL. The browser will recognize it, realize it has it in the cache, and, in theory, not even try to revalidate it with a conditional HTTP GET. Meanwhile, "Site B" might feel "impressively fast" as it loaded quickly even though it was the user's first visit to "Site B". That's because "Site A" laid out the ground work!

... You get the idea.

Yahoo's optimizations around HTTP Performance and Caching, many of which they've outlined in their 13 Rules, ought to be a great contributing factor to limiting costs of operating their Library Content Delivery Network.

There are however many other widely-used libraries beyond the ones Yahoo authors, that could benefit from such a model. If I were to look at my browser's cache right now, I could see a dozen instances of the same scriptaculous library loaded from a dozen social networks I've visited in the past. It's getting to be silly, inefficient.

As both Library Authors and Implementers, we'd like to think of ways the developer community could benefit from an optimized framework similar to Yahoo's model

Which is where a Shared Content Delivery Network for client-side libraries might become interesting.

Such framework would allow site owners and developers to "register for the right to include a library on their site from the shared content delivery network URL". Let's face it, bandwidth and CDN infrastructures cost money, and access to such services should be contingent upon modest charges, tied to a Paypal or Google Checkout account specified during the registration process.

As the nature of those libraries is to be embedded within documents, the HTTP Referer (sic) should be sent with every request, at which point the "CDN Service" could verify that the originator site is actually registered. If it isn't, an HTTP 403 (Forbidden) response would be thrown. Each registered "Hit" would be tallied to a given account, and settled via Paypal or Google Checkout at the end of the month (or any other recurrence pattern). If no "Referer" header is present in the request, then a 403 would be thrown.

Beyond site owners, essentially "the consumers/implementers of enabling libraries", we need to consider Library Authors. How do we determine who gets to put their Library on the Shared CDN? A human-driven application process might be appropriate.

Looking at the tip of a likely large iceberg of custom functionality, such a framework definitely falls outside of the typical "file pushing" "out-of-the-box features" you might find on most commercial CDNs. However, it ought to be possible to leverage some of their more advanced features to build this custom framework. One of them might elect to build it in-house, or one of their clients might build a prototype.

Akamai comes to mind. They support deployment of custom J2EE apps onto their network. But there are others too. Most sport a large worldwide infrastructure for edge-caching and optimized content delivery, be it static or transient through efficient network routing.

Developing this framework would likely enable them to gain some revenue, catering to a more "Long-Tail" clientele, be regarded as innovating pioneers among developers potentially leading to larger accounts, and become de-facto "parts" of vital Web Infrastructure, thereby further cementing their longevity.

Meanwhile, web masters would likely save on bandwidth costs, web surfers would experience dramatically faster-loading sites, resulting in an overall more efficient Web.

Update 11/21/2007: See Ajaxian.com's entry on CacheFile.net. It looks promising! As of this writing, it doesn't offer CDN-backed delivery, or compression, and ought to provide for some sort of revenue stream (as offered above) beyond donations to at the very least cover its operating costs. Let's watch them closely as they evolve! :)

Tuesday, May 15, 2007

Introducing IBDOM

We briefly mentioned what would become IBDOM when we wrote about working with DWR.

Tonight we're pleased to release IBDOM version 0.1 under an MIT License.

The source code is on SourceForge's svn repository.

While we've yet to release the API and Usage docs, linkage to our test page from the IBDOM Site, and a cursory look at ibdom.js should reveal plenty of useful information. Update: 05/16/2006: Initial stab at Using IBDOM is up.

What is it, you might ask?

It's a 20KB (uncompressed), narrowly-scoped JavaScript library aimed at "Wielding the Document Object Model with Ease and Standards-Compliance", and most notably ease the process of injecting JavaScript Data Objects, and Arrays of JS Objects into HTML or XML documents.

IBDOM should not only be useful when working with the Direct Web Remoting framework, but also any application where you find yourself trying to plug asynchronously-loaded data into an HTML document.

IBDOM coverage on Ajaxian.

Thursday, March 22, 2007

Working with DWR


Update 6/26/2007: See also Working with DWR on the IBDOM site.

Update 5/15/2007: Meet IBDOM, our enabling framework.

Direct Web Remoting (DWR) is one of a few nifty enabling frameworks to build more interactive web applications with less pain.

Unlike most other frameworks, DWR doesn't so-much focus on User Interface. Instead, it focuses on enabling developers to expose business logic written in Java to web browser calls, through a Servlet Container such as Tomcat, Jetty or Resin.

It provides a layer that serializes data returned by a Java Method, into JavaScript JSON-esque objects, retrieved over XmlHttpRequests, and passed into JavaScript call-back functions for client-side processing.

What's interesting about this approach is that what goes over the wire is little more than just "data", versus "markup + data" ... Which doesn't matter if you're only dynamically updating a small portion of an HTML document. But if you're retrieving, say 30 listings, each of which has many fields you need to represent in a table with 7 columns, the Markup required to draw each row really starts adding-up.

Say that in Java-land, we have a SearchManager class, that has a method called "getListings(int zipcode)", that returns a collection of Listing objects. Pretending this method is "static", we could call it from another Java class as such:

listingsCollection = SearchManager.getListings(myZip);


The DWR framework exposes this very class to JavaScript, as well as all of its public methods, so calling this method from JavaScript looks very similar. But when calling it from JavaScript, we always must pass a reference to a JavaScript call-back method: it will receive the output of the method call as a parameter.

SearchManager.getListings(90254,displayListings);


Where displayListings is defined as a simple JavaScript function as such:

function displayListings(theListings) {
...
}


The question now becomes ... "what happens inside of function displayListings(theListings)" ?

The function receives a JavaScript Array, whose members are Objects whose properties match those defined back in Java in a Listing bean. We need to loop thru the Array, and for each member, update the HTML in the document, to render that listing:


listingsTable = document.getElementById("listingsTable");
for (i=0; i < theListings.length;i++) {
currentListing = theListings[i];
listingsTable.innerHTML += "" + currentListing.id + "" + currentListing.title + "
...repeat 5 more times for each column ;
}
...

ew.

.innerHTML is very simple to use, but it facilitates the mix of Markup inside scripting and that has a few disadvantages: Since it's possible to pass any string to .innerHTML, it's very possible to generate broken markup, and when broken enough, it could even crash some old version of Safari, sweet! -- not.

Further, having markup live inside JavaScript, makes it more tedious to rethink and tweak the user interface, or simply troubleshoot presentation issues. Which means more work.

Last, .innerHTML isn't part of the DOM specification, or any other spec for that matter. But all browsers do support it.

Instead of using .innerHTML, one could stick to pure DOM methods to update the listingsTable, such as:

loop ...
theRow = listingsTable.appendChild(document.createElement("tr")); theCell = theRow.appendChild(document.createElement("td"));theText = theCell.appendChild(document.createTextNode(listing.id));...repeat 6 more times for column in the row
end loop


... Sticking to DOM methods pretty-much prevents us from injecting horribly broken HTML.

But this gets very tedious, fast, and we're still building Markup inside JavaScript, leading to ... more work.

...ew.

We were looking to easily "Map JavaScript objects to HTML Elements". Imagine having reusable "templates" in your HTML document, made of any number of elements inside of which you placed "data:somePropertyName" placeholder values:

<tr class="resultRowTemplate">
<td>
<a href="data:vehicleDetailUrl">data:listingTagLine</a>
</td>
<td>
$<span>data:price</span>
</td>
<td>
<span>data:mileage</span>
</td>
<td>
<span>data:distanceFromDealer</span>
</td>
</tr>
This template was mapped to a JavaScript object with the following fields:
listing.vehicleDetailUrl
listing.tagLine
listing.price
listing.mileage
listing.distanceFromDealer


Achieving this set-up thoroughly increased the fun of working with DWR, and beyond DWR, ought to be highly useful in any situation where developers are faced with injecting JavaScript Object data into HTML documents.

We're looking to gauge interest from fellow JS/AJaX/DWR developers (Yes, YOU!), in our releasing some enabling libraries within an open-source context. Our current code is in need of serious re-factoring before any sort of public consumption. If you come across this entry, please voice your thoughts in comments. Some of us will be at BarCamp Los Angeles 3, hoping to do a little demo, code reviews about this and a few other things.

Also: We're looking for a User Interface Engineer to help out with existing similar projects, and many cooler "things" coming down the pipe.