My New Widget Architecture

~ Doug

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:

My widgetLoader looks for

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

. Dirt simple!

For widgets that require arguments, I just include the values as a Json string within the

such as:

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.

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s