JavaScript Last

JavaScript should enhance the usability of a website, not make it unusable. This is why we build our JavaScript last.

In building the new Sparkbox website, I didn't do a lot until the site was getting close to being done. Why? Because, while there is a decent amount of JavaScript doing some really cool things on our website, the website works just fine without JavaScript. This is very intentional.

There are people who browse the web without JavaScript, who use screen readers to access content, or spiders indexing content for search engines. We want to be sure that all of the content is accessible to anyone/anything trying to access it. There has been a lot of talk recently about the use of #! URLs for making AJAX content accessible for search engines. Honestly, I fail to see the need for this. Why not build a site that just works. Without JavaScript, clicking on a link should take you to a destination or download some resource. Then use JavaScript to make it awesome! I think most JavaScript developers, at some point (myself included), are guilty of creating JavaScript solutions that make the site inaccessible.

We have made it a priority to make our sites work without JavaScript. Sometimes that may mean that some of the cool things we want our sites to do just won't work. But if it means having a more accessible, more robust site in the end - I believe that it's worth it. Jeremy Keith wrote this article 4 years ago. Yet, we (the collective of web developers) are still building sites that fail to work without JavaScript, or that completely fall apart if there is an error. If a site is built in a way that it'll work without JavaScript, chances are good that if there's an error and the browser stops parsing your code the natural behavior of the page will take over and everything will be fine.

For Example

If your code triggers the following function from a click handler:

  
    function clickHandler(e) {
      e.preventDefault();

      /* AJAX call to get get data */
    }
  

If there is an error somewhere in the AJAX call, the user will likely be left wondering what happened. At best they will probably receive an error message from the browser saying there was an error on the page, which won't look very good. If the function is written instead, as:

  
    function clickHandler(e) {
      /* AJAX call to get get data */

      e.preventDefault();
    }
  

At least this way if the AJAX code is built on top of an already functioning link and there is an error, the natural link will still work. The worst case now is that the nice AJAX refresh doesn't work and it's a page refresh instead.

I believe that taking this approach to developing for our customers results in sites that break less often and are less complicated. We build the best sites we can and this is why we use JavaScript to add functionality, not to be the driving force behind accessing content.

Bottom Line

Build a site that just works. Then use the magic of JavaScript to make it freaking awesome!