Enterprise JavaScript Error Handling

The New Yahoo! Homepage and YUI 3.0
Nicholas C. Zakas
Principal Front End Engineer, Yahoo!

Over the past couple of years, we've seen JavaScript development earn recognition as a true discipline. The idea that you should architect your code, use patterns and good programming practices has really elevated the role of the front end engineer. In my opinion, part of this elevation has been the adoption of what has traditionally been considered back end methodologies. We now focus on performance and algorithms, there's unit testing for JavaScript, and so much more. One of the areas that I've seen a much slower than adoption that I'd like is in the area of error handling.

How many people have an error handling strategy for their backend? How many have dashboards that display problems with uptime and performance? How many have anything similar for the front end?

Typically, the front end has been this black hole of information. You may get a few customer reports here and there, but you have no information about what's going on, how often it's occurring, or how many people have been affected.

1996

1997

1999

2002

2004

2006

YUI 2

Homepage Stats

300 million unique users worldwide per month

100 million unique users in the United States per month

2008

YUI 3

Goals

Eliminate global dependencies

Make it small, make it fast

Create version independence

Allow code portability

Eliminate Global Dependencies

YAHOO

YAHOO.util

YAHOO.util.Dom

YAHOO.util.Event

YAHOO.My

YAHOO.My.Namespace

Dependencies:

Eliminate Global Dependencies

Make It Small, Make It Fast

YUI 2.6.0

dragdrop.js (24 KB)

YUI 3.0 PR1

dd-ddm-base.js (2 KB)

dd-ddm.js (1 KB)

dd-ddm-Drop.js (3 KB)

dd-drag.js (7 KB)

dd-drop.js (4 KB)

dd-proxy.js (2 KB)

dd-constrain.js (3 KB)

dd-plugin.js (0.2 KB)

dd-drop-plugin.js (0.2 KB)

Make It Small, Make It Fast

Create Version Independence

Allow Code Portability

Be Forward Compatible

3 > 2

Etcetera

My blog:
www.nczonline.net

My email:
nzakas@yahoo-inc.com

Twitter:
@slicknet

YUI 3:
http://developer.yahoo.com/yui/3/

So what have we talked about? Maintainable JavaScript is made up of four components.

First is Code Conventions that describe the format of the code youre writing.

Second is Loose Coupling keeping HTML, JavaScript, and CSS on separate layers and keeping application logic out of event handlers.

Third is Programming Practices that ensure your code is readable and easily debugged.

Fourth is creating a Build Process

Click to edit the title text format

Click to edit the outline text format

Second Outline Level

Third Outline Level

Fourth Outline Level

Fifth Outline Level

Sixth Outline Level

Seventh Outline Level

Eighth Outline Level

Ninth Outline Level