Web 2.0 Blog reporting it to you

0 Eliminating async Javascript callbacks by preprocessing

According to Harry Fuecks in this post on the SitePoint PHP blog, using Ajax should be easier:
The Catch 22 of AJAX is, for the sake of an easy life, most of the time we want to write “synchronous code” but asynchronous is the only way to avoid some rather nasty usability issues. This means rather than being able to write simple code, as we’d like to. We’re required instead to handle this via callbacks, but that’s now introduced a whole load more potential issues.
These issues he mentions include requiring a global XMLHttpRequest object to be available and handling multiple calls to a javascript function (like if the user gets a little too impatient). To help combat these issues, Harry recommends a two projects out there that have the functionality to make life a little bit simpler:

0 JavaScript Persistent Object Notation (JSPON)

Kris Zyp has written up a RFC for JavaScript Persistent Object Notation (JSPON). The idea is to standardize a method for the identification of objects for efficient transfer and persistence of objects within large object graphs.
JavaScript Persistent Object Notation (JSPON) is a data-interchange format with the goal of simply being a defined usage of JavaScript Object Notation (JSON) to facilitate JavaScript objects that are intended to persist by defining a scheme to provide the necessary semantics needed for efficient and meaningful persistent objects. JSPON is pure JSON and maintains the same simplicity of JSON, and establishes a format for serializing and referring to objects to enable the persistence of JavaScript objects and object graphs by defining a set of fields for identification, deferred value loading, decentralized object creation, and primitive value, function and array object augmentation. JSON provides simple straightforward mechanism for serialization of objects that can efficiently and easily be read by humans and machines. JSON can be adequate for the persistence of simple small objects. However applications that have large complex object graphs and sets of data generally require the exchange of smaller subsets of the data/object graph to be transferred and persisted at a time rather than requiring an entire object graph to be treated as whole, as well as allow objects to be referred from multiple fiels. Such operations on subsets of data entail identifying objects within a graph and allowing for transfers of subsections of object graphs (and not just end point subsets). JSPON provides the common language so that objects can be passed with proper identification and reference information. This also allows objects to be referred to more than once (not possible within a normal JSON object graph). Standard JSPON simply defines several fields that can be added to JSON object to assist in data description.

0 Lightbox using iFrames instead of AJAX

The Find Motive blog has a quick tip for Lightbox users looking for a little bit different way to tdisplay the images. They show how to push the information into an iframe instead.
Particle tree's hack of Lightbox allows other content besides images to be put into a Lightbox, but it uses AJAX to pull the content into the box. For my purposes this is overkill because an AJAX call is loading an iFrame which results in 2 HTTP requests and for forms inside a lightbox this won't function the way I want. I want the form to act separately from the current page so the user will not be redirected when the form is submitted. To me this gives the UI a smoother feel. Here is the code section that I modified.
Here's the code:
JAVASCRIPT:
  1. // Write an iFrame instead of using an AJAX call to pull the content
  2. loadInfo: function() {
  3. info = "<div id='lbContent'><center><a xhref='#' class='lbAction' rel='deactivate'>(x) close.</a></center><iframe frameborder='0' width='500' height='350' xsrc='" + this.content + "'</iframe></iframe></div>";
  4. new Insertion.Before($('lbLoadMessage'), info)
  5. $('lightbox').className = "done";
  6. this.actions();
  7. },
You can also just download the code to make the update.

0 Survey of Javascript Inheritance Techniques

Josh Gertzen of Thinwire has written up a detailed survey of techniques for OO-style inheritance in Javascript, leading up to the technique he’s recently developed to overcome flaws in the existing approaches.
I set out to see if I could devise a working design of my own. It took me about a week to work out something that behaved correctly under all situations, but once I felt confident that it was working, I quickly integrated the approach into the framework. As it stands now, both the beta and beta2 releases of ThinWire leverage that initial design.
His analysis starts with standard prototype chaining techniques (SubClass.prototype = new BaseClass();) and explains where they fall down, in particular problems with calling superclass methods. He then walks through a range of improvements, notably Doug Crockford’s well-known “classic inheritance” technique.
Admittedly, Crockford’s approach is one of the most solid that I found and there is no arguing that based on the body of work he has done on JavaScript programming, he is a master of JavaScript. However, if you review the code for the three classes and then look at the output, you’ll notice that there is subtle issue. … (I)t should be clear that the results of the above example are incorrect. Additionally, a downside of Crockford’s approach and of many other approaches, is that every super call requires an additional method call and additional processing of some kind. Whether this is an issue for your situation, will depend on how many super calls you have in your code. ThinWire makes extensive use of super calling in it’s client-side code and therefore it’s important that super calls are as fast as possible.
Josh eventually developed an alternative solution that is somewhat Aspect-Oriented:
Essentially, ‘extend’ wraps every method in your class definition with an intermediate function that swaps the super class reference ‘$’ to the correct reference with every method call. The only real issue with this approach is that it requires a number of intermediate functions, which may have an impact on performance.
A further refinement exploits the little-known callee property.
(T)he ‘arguments’ array contains a reference in the property ‘callee’, which points to the current function that is being executed. This is important, because it’s the only way that you can get such a reference since the function reference available via the ‘this’ object, always refers to the overridden function that is defined in the class at the top of the hierarchy.
See Josh’s article for all the code and analysis on Javascript inheritance techniques. (Thanks to Ted Howard for the link.)

0 Adding AJAX to a Website step by step, Part II

Back with the second part of his postings on adding Ajax to a website, Joshua Eichorn has this new item on his blog today (picking up from this previous post) - a look at polling the server for the latest data with the HTML_AJAX PEAR package.
I have a lot more change’s i’d like to make to webthumb so the last article (Adding AJAX to a website step by step) is now the start of the series. In this article will be taking front page of webthumb and making it live. The the stats and recent thumbnails will update in real time, making for a nice slick presentation.
He first focuses on getting real-time information back with the help of Ajax. In his case, it's grabbing the latest thumbnails created by the application, fetched by periodic polling back from a timed script performing an Ajax request. He moves on to the code, showing how to export the PHP class for the updater, a sample result for the request and the code for the actual server the Ajax request will be made to. Then, it's back to the client side of things with the Javascript needed to make the call back to the server, parse the response, and update the page with the latest information. There's also a little aside that talks about how the HTML_AJAX package delivers it's Javascript libraries and how this can be used to grab and push out the moo.fx library along with the other scripts to create a a fade in and out of the updates made to the page to make them more apparent to the user.
Next Generation Ecommerce Software & Web Store Platform > Fast, Simple, Friendly Stores
RSS
Stores  Features  Blog  Archives  About  Contact       © 2006 Web 2.0 Stores