Tag: design

RequireJS defines itself as a file and module loader. The first part is easy to understand; it can be used to load files but what about loading a module? What are modules anyway? Modules are containers encapsulating a piece of code that performs a particular function. A module should also have an interface that lets you access its functionality in a uniform manner.

Why should you care about modules?

Splitting an application into a group of modules is similar to dividing a book into chapters and sections. It makes it easier to read and find the parts you need. Writing modules at the beginning might seem like a lot of work and sometimes developers get confused and ask themselves “Do I really need to do this?” When your application grows, you start to appreciate the time you invested in decoupling your code and writing reusable modules that interact with each other.

What are the benefits of using modules?

Perhaps the greatest benefit of using modules is code reusability. Modules can be imported anywhere in an application to perform its task whenever it is needed without having to worry about duplicating the code. It also becomes easier to export a module to be able to use it in a different project because it is encapsulated. Generally speaking, it facilitates maintenance and readability of the code as well as making it more manageable and easier to test.

How I entered the world of modules loading

From my experience, I used to include all my scripts each in a separate script tag. It doesn’t matter how many scripts I am loading; they will be executed in the same order they are written. There isn’t any abstraction or anything that will add complexity, so why would I need a library to do what I can already do? My build process was taken care of concatenating and uglifying my files so what’s the problem with loading a single nice file?

I wasn’t convinced until I read a couple of discussions and a few questions began to arise in my mind especially when projects I work grew larger as follows:

• Most of the plugins and the codes I write aren’t required to run on every page. Why would I load something huge like a WYSIWYG editor on a dashboard while the user won’t really need it at the moment?
• Most of the time, it was difficult to debug something without checking many files to find where exactly is that function defined.

I decided to give RequireJS a try. To be honest, I fell in love with the sense of power it gave me with the conditional loading of the scripts I define. Errors became much easier to debug. I no longer have to care about the loading order of my scripts–things just work out themselves magically. I got rid of the serving-one-fat-file anti-pattern with the rise of HTTP/2. What I do now is ship small files that can be transferred in parallel. Focusing on splitting my code into modules helped me improve the work.

I started to see things from another perspective and, after using it for a while, I really had a hard time imagining developing anything without it. We will explore how to start using RequireJS in the upcoming article. See you soon!