Your Code should look like Lego

This is my favorite programming analogy of all time, and it bears repeating, your code should be like Lego, not Play-doh. Lego’s are clean, and easy to play with, you can make anything from Lego. You can switch pieces out, to turn a car into a house, or change the color of a roof to purple. As long you have the pieces you need, you can build anything you want.

Your style of coding should be similar, you should strive to build small Lego pieces and then assemble them into bigger pieces. This is very important, especially today, where products and web sites are constantly tweaked and A/B tested. The example below, outlines what I mean when I say small Lego pieces. (http://jsfiddle.net/mxpatel29/YLSJ7/)

var chair = {"name": "Chair","price": "$75",
        "desc": "Hardwood dining room chair."};

//Create Lego Components for the chair object above
 var name = $("<div />", {
    "text": chair.name,
     "class": "name"
 });

 var price = $("<div />", {
    "text": chair.price,
     "class": "price"
 });

 var desc = $("<div />", {
    "text": chair.desc,
    "class": "desc"
 });

//Create a new Lego piece for A/B Test
 var sale = $("<span />", {
    "text": " - limited time offer",
    "class": "sale"
 });

//Basic Example, put together pieces (variant A)
 $("#products").append(name).append(price).append(desc);

//Test for sale (variant B)
var random_num = Math.floor((Math.random()*2)+1);

//add sale info to price for variant
if(random_num == 1)
    $(price).append(sale);

This was a very basic example, but it clearly illustrates the idea of breaking your code into small components and assembling them together as needed. This approach is very useful for variant testing and rapid iteration. It also makes code maintenance easy. Happy coding.

-M

About these ads

2 thoughts on “Your Code should look like Lego

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s