Writing Javascript Widgets – Trial and Error

The Old

Today I’m going to look at two Javascript widgets that I’ve written. One is from 2011 from my job at PropertyRoom.com and the other is for my current job.

The widget we’ll look at for PropertyRoom.com displays paged products on the home page (http://www.propertyroom.com). It simply scrolls left and right through a list of products.

To start I want to look at function names. The function content is not as important as the actual function names.

var PANEL_PAGE_SIZE = 5;
var SLIDE_DIRECTION = 'none';
var USER_CAN_CLICK = true;

function LoadPanelPage(panel, pageNumber) { ... }
function SetPanelArrowEvents(panel, pageNumber, listingCount) { ... }
function LoadListingsAJAX(panel, categoryId, panelId, pageNumber) { ... }
function SlidePanelPage(panel, pageNumber) { ... }
function EnablePanelClicks() { ... }
function SetPanelPagingIndicators(panel, pageNumber, listingCount) { ... }

Some things to notice from these global variables and functions:

  • I am using global variables.
  • One word is all over, namely panel. This is my lazy way of making sure functions don’t collide.
  • State is passed all over. Several functions need at least two parameters to work.

These examples reflect how I’ve written Javascript widgets in the past. Long function names instead of namespaces. A few choice global variables to track state. A hierarchy of function calls where needed data is simply passed from function to function.

The New

I’ve been wanting to develop a better approach to Javascript code for a long time. I keep coming across articles and libraries where the code is pretty elegant. It looks object oriented, it’s organized well and it looks nothing like what I’ve usually written in the past.

The latest widget I’ve written went through this process:

1. Start simple to get a prototype working.
2. Quickly add features, which means I fall into old habits. Functions that act as namespaces, global variables, lots of state, etc.
3. My first refactor was to convert the code into a proper jQuery plugin. This was surprisingly easy.
4. My second refactor was to rename all functions to avoid collisions with other jQuery plugins. Especially important since our company will have many more widgets in the future.
5. My third refactor was to create objects to group functions. This was a fanstastic feeling! It went from this:

function LoadSegments() { ... }
function DrawSegments() { ... }
function BindSegments() { ... }
function LoadSubscriberSegments() { ... }
function BindSubscriberSegments() { ... }

… to this …

var Segment = { 
	load : function() { ... },
	draw : function() { ... },
	bind : function() { ... }	
}

var SubScriberSegment = {
	load : function() { ... },
	bind : function() { ... }
}

This was a revelation to me. If I want to make a call to load segments I can just do this:

Segment.load();

Notepad++ works really well with Javascript when objects are written this way. It’s easy to collapse entire objects and it makes navigating around the code easy.

6. My last refactor was to include a debug mode into my plugin/widget. Really simple, but something I’ve lacked in the past. I write to the Console (if it exists) and it allows me to trace the flow of the code and more importantly, see the data going in and out.

Conclusion

Making the transition to a more object oriented way of writing Javascript is exciting, but I know I have a long way to go.

Up next is to investigate whether or not Dart can make widget writing easier.

Writing Javascript Widgets – Trial and Error