Drupal 8 JavaScript Excellence Roadmap

Over the past several months there has been a bit of talk attempting to answer the question, how can we make our JavaScript something we can be proud of and others want to use. Through the conversations, which included a Birds of a Feature session at DrupalCon Chicago, we (a number of people in the community) have come up with eight points of attack to make the JavaScript in Drupal 8 awesome. These aren’t everything we hope to accomplish but are an important piece of the puzzle.

Clean Up The Current Code

Our current JavaScript needs to be cleaned up to reflect JavaScript best practices. Katherine Senzee has already started the effort to clean up drupal.js. Cleaning up the current JavaScript is a great way to learn the best practices and improve the code quality along the way.

JSLint/JSHint

One of the best ways to identify when we aren't following the best practices is to use JSLint or JSHint, a community fork of JSLint. While we don't have an agreed upon set of settings for either of these tools, the basics are something we can use to identify items we can cleanup in our code.

Once we have settings we like for one of these tools it will make a potentially great way to extend the coder module.

Testing

Drupal 7 started us down the path of Test Driven Development which has a lot of benefits. Testing is something we should bring to our JavaScript. This could include unit testing, using tools like swarm, and maybe even testing pages as they dynamically change.

The QUnit Drupal module looks like a promising start to unit testing Drupal’s JavaScript.

Better Inline Documentation

Drupal, as a project, is known for excellent API documentation. Unfortunately, this high level of documentation doesn't always apply to our JavaScript. Let's make the JavaScript documentation rock and be useful. That may mean documenting the JavaScript in Doxygen, which isn't really designed for it, or possibly switching to a toolset like JSDoc.

In any case, we can document and explain our JavaScript better.

Minify the JavaScript

JavaScript performance is important. There is a lot that goes into front end performance. One of those elements is the size of the JavaScript files. Libraries like jQuery are available in development and production versions. The production versions are minified. This is for good reason.

Not only would it be helpful for the Drupal core JavaScript to be minified, it would be helpful to identify contrib JavaScript that has not been minified and do some basic minification to it.

Drupal JavaScript Handbook Awesomeness

JavaScript is the only language that I'm aware of that people feel they don't need to learn before they start using it." -- Douglas Crockford

A lot of the people who write JavaScript for Drupal are PHP programmers. JavaScript is a very different language. Lets make the Drupal handbook useful for people who are writing JavaScript inside Drupal. Documenting standards, common solutions, and references will make it easier for those who want to write good JavaScript consistent with the rest of Drupal.

Pluggable Preprocessing

The last few versions of Drupal have had modules that radically altered the way preprocessing worked within Drupal. This was done in different ways based on different use cases. As we now have an increasing number of ways to insert JavaScript into a page we should make it easier to do so.

Solid Architectural Patterns For All The JavaScript

Drupal has grown from a PHP CMS into a PHP and JavaScript CMS. We've grown from a handful of JavaScript files to over 5,000 lines of JavaScript that we use in a modular manner. Yet, we plug it all together in a hap hazard manner. Other modular JavaScript libraries have already solved this problem elegantly. It's time for us to do the same.

It’s time to make the JavaScript within Drupal awesome. These eight separate tasks will help us do just that.

Update: If you want to follow along or join in this effort the JavaScript community initiative page is a great place on drupal.org to keep these efforts summarized with pointers to where the work is being done.