How to get started with RequireJS and What is it?

22 Oct 2020

Modular programming is used to break large applications into smaller blocks of manageable code. Module based coding eases the effort for maintenance and increases reusability. However, managing dependencies between modules is a major concern developers face throughout the application development process. RequireJS is one of the most popular frameworks around for managing dependencies between modules. Basically, RequireJS is an essential loader, which is utilized to loads the JavaScript files, it is a framework to oversee conditions between JavaScript documents, and in measured programming, all the functionality isolates in various modules, so RequireJs is a best instrument to collect different JavaScript files from various modules by which it assists with improving speed and quality of your code.

Why RequireJS

There are a few reasons:

  • In a huge application, a lot of JavaScript files are required, and each Script tag needs a request.
  • You need to place them in the same order in which they are called, for example, a File that is dependent on others should be loaded after the dependent ones.

How to use

You can Download the file.

Take an example path of your JavaScript files:

Now you just need to add a <script> tag in your html file to include Require.js file.

You can place this script tag at the head or at the bottom of the phtml file.

Here main.js is the main JavaScript file of my application.

In above <script> tag by the data-main attribute require.js will start initialization of files.(path of the folder/file name).

data-main is uses when you have only single entry point, if you have multiple entry points then you can include it by html also.

Now in main.js we have following code:

In RequireJS all the code is written under requirejs() or define() functions.

Here, It searched “example.js” in the same folder and take example as an object of the example.js file to call the functions of the example.js.

You can also include files from different folder’s.

Advantages of RequireJs

  • Lazy loading
  • Reduce code Complexity in large application
  • Assembly of different splited file at compile time
  • Less HTTP requests
  • No need to define them in some proper order

Hope this blog will help you to understand the basics of RequireJs.