What is the difference between SystemJS and CommonJS

Question

I see there are article explaining difference between commonJs and AMD but I am unable to relate between commonJS and SystemJS. Both of these are used in AngularJS 2 development. As both of these are module loader then why do we require both?

Answer 1

CommonJS is a specification while SystemJS is opensource Javascript a loader which follows specifications like CommonJS. CommonJS specification defines how modules in JavaScript work , how they can be exposed and how they can be called. SystemJS is a loader which follows CommonJS specs and other specs.

Below is a simple 20 minutes youtube video tutorial which explains how CommonJS module specs look like and how SystemJS respects that spec.

https://www.youtube.com/watch?v=jN4IM5tp1SE

Answer 2

CommonJS is used in NodeJS to require modules at build time. E.g. the modules are compiled and are then delivered to the browser with all code loaded up front.

SystemJS however replaces requireJS. SystemJS loads modules dynamically at run time. In Angular2 if you watch your browser's NET tab you will see SystemJS loading files as you explore more parts of you app.

You could require a module inside a click event handler or something too.