Blogarithms

Doug Kaye’s Weblog

5/1/2008

My New Widget Architecture

8:19 pm

I was chatting with David Marks of Loomia about the version 4 rewrite of The Conversations Network’s web sites, and he asked whether I’d blogged about it. Haven’t yet, so here’s part of it…

The new sites will be extremely dynamic with nearly everything loaded at runtime via Ajax widgets, some nested within other widgets, sometimes three-deep. Even with all the HTTP requests, the pages are so much simpler and built with so many fewer lines of code, the new site is noticeably faster.

Placing a widget on a page is about as simple as it gets. For example, the following HTML is all it takes to display the most-popular recently published shows for a channel:

<div class=”cnWidget mostPopularRecent”></div>

My widgetLoader looks for <div> elements with className ‘cnWidget’. In the above case it then makes a prototype.js Ajax call to /widget/mostPopularRecent (which is rewritten to mostPopularRecent.php in our case), which then returns the content of the <div>. Dirt simple!

For widgets that require arguments, I just include the values as a Json string within the <div> such as:

<div class=”cnWidget selectedTopics” style=”display:none”>
    ["software","blogging","opensource","security"]
</div>

Redesigning the pages takes nothing more than moving the widgets around and changing the CSS. And in version 4.1 I hope to have a drag-and-drop tool for adding and moving widgets.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Powered by WordPress