A month or so ago we released a long overdue redesign of the most important feature on our website, the Create Ad page. This wasn’t a simple visual overhaul, but a throw-everything-away-and-start-from-scratch project. You can see the new page here.

We took what was originally a 5 page wizard and made a single page “wizard”. (Can a wizard be a single page?) We also added a long awaited feature of the ability to add images to their Text Link ads. This is important as images drive user engagement by helping advertisers better communicate their message.

We had to overcome numerous obstacles trying to simplify the wizard into a single page but I’m only going to cover the engineering ones.

When we started the project we knew that it was going to be heavy in regards to javascript. The final javascript payload for the single page ad wizard weighs in at ~55k and 1500 lines. We had several engineers concurrently working the project so making sure we didn’t step on each other toes was crucial. We divided the page up into modules and laid down some basic rules.
Each module …

• follows the module pattern
• will have an init() function to be called onDocumentReady
• will have an getValues() that returns values to be passed back when the entire page is submitted
• needs minimal knowledge of other modules

Following these rules we were able to parallelize development much easier. Another benefit is we are able to initialize the page easily with the following code:

MB.createAd.modules = ['copy', 'adText', 'images',
                      'channels', 'targeting', 'preview', 'submit'];
Ext.each(MB.createAd.modules, function(item) {
 MB.createAd[item].init.defer(10, MB.createAd[item]);
}, this);

This runs the init() for each modules pausing 10ms between each. This allows the browser to catch up and render what’s in the queue before executing the next init().

The largest problem that we had was that we needed a tree widget with very specific requirements. We’ve standardized on the Ext JS library, however the baseline tree widget was missing a 3 state checkbox mode. That is if any child nodes of a leaf are checked, the parent node will be in a partially checked state. You can see what I mean on the right.

To solve this problem we developed a new TreeNodeUI class as an extension to Ext JS’s tree. You can see the class here. We want to release this tree as an easily re-usable extension for the Ext JS community. We’re in the process of packaging and documenting so stay tuned!

–Wayne Pan, Lead, Frontend Engineering