What is RequireJS and why is it important?

RequireJS is a JavaScript file and module loader. Oracle JET uses Require to load only the libraries and modules/components that are needed for a particular part of an Oracle JET application.

As the JavaScript world has taken off, web applications have grown large, and monolithic client.js files have become the norm. This type of code “organization” is difficult to maintain, read and test. In addition, more and more libraries, frameworks, plugins, etc. are being included in applications, making the loading of those resources complicated and slow. Truly, it is a waste to load every script file for each page of an application if it is not needed to run that particular page.

Require was born out of the need to reduce this code complexity. As such, it improves the speed and quality of our code. At its heart, RequireJS was designed to encourage and support modular development.

What is modular development?

Modular development separates out code into distinct functional units. This kind of organization is easy to maintain, easy to read (when coming into an existing project, for example), easy to test, and increases code re-usability. RequireJS supports the Asynchronous Module Definition (AMD) API for JavaScript modules. AMD has a particular way of encapsulating a module and embraces asynchronous loading of a module and its dependencies:

In this module, we call define with an array of the dependencies needed. The dependencies are passed into the factory function as arguments. Importantly, the function is only executed once the required dependencies are loaded.

What does Require look like in Oracle JET

In an Oracle JET application, RequireJS is set up in the main.js (aka “bootstrap”) file. First we need to configure the paths to the various scripts/libraries needed for the app. Here is an example of the RequireJS configuration in the main.js file of the Oracle JET QuickStart template. It establishes the names and paths to all of the various libraries necessary to run the application:

Next we have the top-level “require” call which “starts”our application. It follows the AMD API method of encapsulating the module with the require, and passing in dependencies as an array of string values, then executing the callback function once the dependencies have loaded.

Here we are requiring any scripts and modules needed to load the application, and subsequently calling the function that creates the initial view. Any other code which is used in the initial view of the application is also written here (routing, for example). Note, we only pass in the dependencies that we need to load the initial application, saving valuable resources.

Using RequireJS in other modules/viewModels

RequireJS is also used in the other JavaScript files of a JET application to define viewModels. The syntax used, however, is slightly different, and can be confusing. Let’s take a look:

Here we are passing in an array of dependencies, but we’re using “define”, and not “require.” In short, “define” is used to facilitate module definition, while “require” is used to handle dependency loading. In a module definition, for example, we can utilize “require” WITHIN a module to fetch other dependencies dynamically. “Require” is typically used to load code in the top-level JavaScript file, and “define” is used to define a module, or distinct functional portion of the application.

Oracle JET makes use of RequireJS to support modular development. Require manages the many JavaScript files and module dependencies needed in an Oracle JET application. It simplifies and organizes the development process, and makes reading, writing and testing code much more straightforward.