[ 2014-April-03 10:10 ]

Google's big web apps like Gmail, Maps, and Calendar, use the Closure Compiler to minify and type check their JavaScript. Since my current theory is that type checking makes it faster to develop large software, I figured a good experiment would be to run the Closure compiler on Mitro's JavaScript (a few thousand lines). The summary is that it found real bugs, but they were all in rarely executed error paths, or cross-browser issues that our testing hadn't noticed yet. Perhaps the most valuable part is that when we rearrange JavaScript files, it finds duplicate or missing includes (script tag references). I found the Closure compiler annoying to get working, however now that I understand how to make it work, if I were to start a new, large JavaScript project from scratch, I would try to use it from the beginning. Below is a summary of the bugs it found in our code.

• Missing imports after code refactorings. We have a number of rarely used "utility" pages that we tend to forget about. The compiler never forgets.
• Duplicate imports. Not strictly a bug, but it could cause problems if parsing and executing has side effects.
• Missing event variable in event handlers (2 instances). On Chrome, window.event is automatically defined, so referencing a variable called event works, but on Firefox this is a bug. Example:

  element.addEventListener('click', function() {
      var data = event.target.getAttribute('data-attribute');
      // ...
  });
  

• Global variables being initialized twice, in slightly different ways (2 instances). This isn't really a bug, but is extremely misleading when debugging. Example:

  var someMagicGlobal = globalInit({option: 'default'});
  // ... some other file ...
  var someMagicGlobal = globalInit({option: 'alternative'});
  

• Calling a function that doesn't do anything (jQuery outerHeight takes a boolean and returns a value): $('.sidebar').outerHeight(0)
• jQuery attr can return undefined. If this happened, our code would have thrown an exception:

  var name = $icon.attr('data-icon-text');
  var $newDiv = generateIcon(name);  // name could be undefined, causing an Exception!
  

• Calling a method without this. Since the method currently didn't reference this, it was not currently a bug, but it would have caused difficult debugging if the method was ever modified in the future.