Should You Extend or Wrap jQuery UI 1.8 Widgets

As part of a recent project I was tasked with creating a set of custom jQuery UI widgets. When specing my widgets I discovered almost all would use some existing widget features, like sortable. I found myself trying to decide if I should extend existing widgets or somehow wrap the existing widgets with my custom code? I think this is a common question.

The jQuery UI widget factory provides a method to inherit one and only one widget. For example If you look at some of the jquery ui widget source code (draggable, droppable, sortable) you will notice that most inherit mouse. However when writing my own widgets I found that I never needed to do any of the things inheritance was intended for, such as overriding methods.

For me, I just needed some of the default widget behaviors (like sortable) applied to my own custom code. I decided to wrap the existing widget behavior rather than extend.

So how does this work? Let’s take the example of a page selector.

(more…)

Communication Between jQuery UI Widgets

When writing user interfaces using jQuery I often need widgets to interact with each other. For example, an ajax status widget that displays a spinner when an ajax call starts, and displays a status message when the ajax call completes. This widget should be accessible by whatever other widgets are on the page.

In the past I directly called methods from each widget, but this creates a lot of “glue code” and dependencies. I had recently watched this YUI Theatre video on Scalable Javascript Application Architecture and wanted to apply the following to my jQuery UI Widgets:

• Widgets should be able to live on their own
• Keep everything loosely coupled

Approach

Given the above I decided to use jQuery’s custom events to enable publish/speak and subscribe/listen into my widgets. Each widget would publish certain events and subscribe to others. This approach effectively decouples the widgets and allows them to function independently.
(more…)

Debugging Front End Code, New Tools

Front End debugging tools have come a long way. Below are some of the tools I am using on a daily basis to debug and fine-tune my front end code.

Firebug – Firefox Plugin

Firebug is my workhorse for general debugging. It has the standard set of CSS inspectors and a robust net monitor. The net monitor is essential for debugging XHR requests. I could not develop Ajax applications without it.

(more…)

Lectures on JavaScript History & Future

Douglas Crockford is currently giving a series of lectures on JavaScript. So far there are 2 and they are fascinating:

http://developer.yahoo.com/yui/theater/

Installing Node.Js On OS X 10.6

Updated May 7 2010, With Version 0.1.94 From GitHub

Node.js is evented i/o for Google’s V8 Server Side JavaScript engine. For me . . . node.js means I can write apps that can handle tons of requests without having to learn/think about threads & locks (all I know about threads is that they are scary and involve big books from O’reilly).

As a front-end developer the node.js approach is fantastic because I already think in terms of events and I love writing code in JavaScript.

Installing node.js on OS X is super-easy and the documentation on the node.js site is great, but I figured I would write a step-by-step for OS X since I had just installed it for the first time. The node.js install includes Google’s V8 JS engine so no need to worry about installing that.

(more…)