To require or not to require?

Question

So I've been building a single page web app for a while now and I've been writing all my code in an extremely modular approach. I've been using the javascript module pattern for all modules and my main API uses the revealing module pattern to expose a small API for plugins and other modules.

So even if I've been writing my code like this someone mentioned I should be using require.js as it gives a better modular approach.

I decided that require.js doesn't really make it more modular so my next thought was how require.js separates out dependencies. Require.js forces you to name dependencies in each module file. But this to me seems to be a task I have to do for every module and I have a lot of modules. At the moment all my files are concatenated into a single javascript file in my grunt build process so really all my files are loaded at the start. I need most of my modules loaded at the start so it made sense to do this.

So my question is... Should I use require.js even though my code is modular and all my files are concatenated together and loaded at the start? Do i need to worry about dependencies or loading order? Any help/advise or previous experience when dealing with this situation would really help. Thanks

Answer 1

1. Have you had annoyances putting <script> tags in the correct order to handle dependencies right?

   Having a requirejs config file where you declare the third-party code and your own code dependency tree is a much more organised approach than declaring <script> tags by yourself.

2. When you are testing your app in dev environment, wouldn't be helpful to have all those modules in separated files that are easier to debug instead of all of them concatenated?

   With requirejs you can switch between optimised/concatenated/minified code used in production environment and a list of independent files representing each module in the development environment.

3. Are you creating a global variable for each module in your app?

   Requirejs avoids creating a global variable for each module so your global scope doesn't get cluttered.

4. It's usually a good practice to follow conventions in the way you declare modules. Requirejs implements AMD specification that is a well thought way of loading modules in client javascript.

   http://requirejs.org/docs/whyamd.html

   It's way easier to follow conventions if they're already implemented in a mature framework. And sometimes we don't notice but between apps we do the same thing differently and that affects in the maintenance phase.

5. Take a look at the requirejs optimizer. Look all the options it give you. It allows you to exclude files, to change versions of a given module, to change the minification tool, to integrate the optimization process with other tools like grunt or bower , etc.

http://requirejs.org/docs/optimization.html

If you don't need any of this, then just continue doing it in your way.