The syntax comparison between CommonJS and AMD modules in a modular AngularJS application

Question

The syntax comparison between CommonJS and AMD modules in a modular AngularJS application

Apologies if this question has already been addressed, but I couldn't find any relevant information. Currently, I'm in the process of refactoring a large AngularJS application by creating components as AMD modules. The build process (grunt) utilizes the requirejs plugin to load and concatenate all the modules into a single JS file along with jQuery.

Recently, I came across CommonJS syntax which seems cleaner compared to AMD. I'm considering switching to CommonJS modules from AMD, especially since the build process would be similar, just replacing requireJS with browserify.

Are there any specific advantages of using AMD modules over CommonJS in my workflow? Can asynchronous module loading still be beneficial at runtime when bundling all modules into a single JS file?

Thank you for your insights.

javascript angularjs requirejs amd commonjs

Answer 1

Answer №1

These days, I recommend looking into ES2015 modules as the native module system in JavaScript. It combines the simplicity of syntax from CommonJS and the ability to load modules asynchronously like AMD.

// my-module.js
export const foo = "foo";
export function bar() { return "bar"; };

...

// main.js
import { foo, bar } from "./my-module.js";
console.log( foo, bar() );

Natively supported only by Chrome 60+ at the moment, but you can make it work in any browser with Webpack or SystemJS. I personally prioritize progressive enhancement and strive to deliver core user experiences quickly. I appreciate being able to combine compiled synchronous and loaded asynchronous modules in one application for optimal performance (thanks to Webpack). This way, you have control over which modules get compiled into a single file and which ones are loaded on demand.

Promise.all([
 import("./module-foo" ),
 import("./module-bar" ),
 import("./module-baz" )
]).then( moduleExports => {
  console.log( moduleExports );
}).catch(( e )=> {
  console.error( e );
});

In my blog post, I discuss how to achieve this setup in detail: https://medium.com/@sheiko/state-of-javascript-modules-2017-6548fc8af54a. Enjoy!

Answer 2

These days, I recommend looking into ES2015 modules as the native module system in JavaScript. It combines the simplicity of syntax from CommonJS and the ability to load modules asynchronously like AMD.

// my-module.js
export const foo = "foo";
export function bar() { return "bar"; };

...

// main.js
import { foo, bar } from "./my-module.js";
console.log( foo, bar() );

Natively supported only by Chrome 60+ at the moment, but you can make it work in any browser with Webpack or SystemJS. I personally prioritize progressive enhancement and strive to deliver core user experiences quickly. I appreciate being able to combine compiled synchronous and loaded asynchronous modules in one application for optimal performance (thanks to Webpack). This way, you have control over which modules get compiled into a single file and which ones are loaded on demand.

Promise.all([
 import("./module-foo" ),
 import("./module-bar" ),
 import("./module-baz" )
]).then( moduleExports => {
  console.log( moduleExports );
}).catch(( e )=> {
  console.error( e );
});

In my blog post, I discuss how to achieve this setup in detail: https://medium.com/@sheiko/state-of-javascript-modules-2017-6548fc8af54a. Enjoy!

The syntax comparison between CommonJS and AMD modules in a modular AngularJS application

Answer №1

Similar questions

Creating a modal with a checkbox option for "remember my preference" in Angular

Is it possible to save data to a file using React?

Storing formatted user input in an array with VueJS: A step-by-step guide

Is the synchronicity problem causing a bug in my JavaScript code?

Converting a JSON PHP array into Javascript

Prevent caching in browser for JavaScript GET requests

Convert numbers to words in the Indian currency format as you type up to a 16-digit number, displaying the Indian rupees symbol automatically without the need to click a button

Uncertainty surrounding $q and commitments

Swapping out a character on a webpage using jQuery

Using AngularJS to bind objects with a checkbox

Retrieve the entity object and convert it into JSON format using json_encode

Obtaining HTML elements from JSON using jQuery (i.e., the opposite of serializing with Ajax)

Generating a list of objects from MongoDB using Node.js

jQuery's AJAX feature fails to identify the newly modified div classes

Align an element at the center of both the x and y axes using CSS

"Encountering issues when trying to retrieve the initial element from an array using underscore.js

Sending MVC3 model information as JSON to a JavaScript block

Creating a background with image overlays in React: A step-by-step guide

Adjusting the slide display in angular-slick based on the window's width automatically

I am unable to reach my pages through their URL directly, I can only access them through links within Next.js