Why do you RequireJS?

Get it? RequireJS is a dependency management framework I use in JavaScript to manage…well my dependencies. But, the title is a play on words cause…of course you require JS…cause…JavaScript is required to…

cough

Yeah…well, I think I’m funny. (Sad Trombone)


Here’s why I use RequireJS: it ensures that the JavaScript I need to run my code is loaded. I don’t need to worry about the order of the <script> tags in the HTML. I don’t need to do any sort of checking or onload event stuff, I just know it’s good to go.

Check out the code on JSBin

Second reason: It defines a single point to start the application with the definition of the data-main JavaScipt file. So, when I load an HTML page, I know the first line of JavaScript that will be executed and can build from there. Again, not worrying about multiple files loading at the same time and executing in parallel or anything.

<!DOCTYPE html>
 <html>
  <head>
  </head>
  <body>
    <script data-main="path/to/main" src="path/to/require.js"></script>
  </body>
 </html>

The path/to/main is a reference to a main.js file. RequireJS doesn’t need the JS, as it’s implied.

Plus, because of the whole “knowing that my JavaScript is already loaded”, I know that the libraries that I leverage (e.g. jQuery, Bootstrap, whatever…) will already be loaded and setup before I start running my application code.

#### Ha! What about your library dependencies?

I define and configure those in the RequireJS config JSON that gets run before we start the application.

require.config
paths:
# dummy path for demo
'jquery': 'https://davidwesst.com'
shim:
# This is a sample of defining dependencies
"bootstrap":
deps: "jquery"
exports: "Bootstrap"

Double “Ha”! What about your text file dependencies?

I don’t usually need it, but if I do there is a plugin.

Plus, if you’re using text files to localize your site, there is another plugin to help that that too.

The Point

When I start a project, I make sure I wire up RequireJS first before I start writing any code. Because:

  • I don’t need to worry about libraries and other script not being loaded
  • I know where my application will start every time the page loads

Ultimately, it gives me less things that could go wrong while I’m focusing on writing code. Plus, as a keep building the application, it forces me to think about what my “new” code needs to depend on as I go making it cleaner and easier for someone to get into.

Learn about it here. Given, it’s a steep learning curve with that documentation, but I guarantee it’s worth it.

Thanks for Playing. ~ DW

Category:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.