Why do I need to load a JavaScript module and what is the difference between all these loaders?

Question

Question 1 :

Why do I need to upload my JavaScript files to a web page asynchronously? I see the rationale for it on the server side, but if I know all the files that I need to download on the client, why not combine all the source files into one file and upload them to the page load? Is the first initial loading of the page so important that future operations may slow down due to the delay in receiving each JS file?

Question 2 :

Assuming the answer to question 1 is that I need to download the JS files separately:

AMD downloads each JS file asynchronously, CommonJS loads synchronously. CJS is required for server-side loading (which works Node.js if I am not mistaken). AMD seems to be better for the client. Thus, the only reason for using CJS in the client is code sharing with the server.

Is there a way to get AMD and CJS to play well so that client JS files can load asynchronously but still have CJS syntax?

(What exactly does require.js do? I can't have life read me between the lines on their website.)

Answer 1

You do not need to “download” javascript files asynchronously or through some kind of custom loader. Here are a few reasons why asynchronous loading or custom loading can provide an advantage:

• When a javascript file is usually not needed, and you can download it on demand, and not all the time
• When a javascript file is not needed for the initial display of the page, and you want to maximize the speed of the first display for your page
• If you want to control the time when the javascript file is loaded
• When you decide, based on some state, whether to download the javascript file or not (for example, if the download from the CDN failed, you can download from the backup location)
• If you want the script to load in parallel with other things and not serialize one after another

If you do not need any of these benefits or any other benefit provided by software downloads, you can simply use regular <script> tags and let them load synchronously.

Answer 2

Part of the problem with just concatenating a file is not the time it took to download, it is the time it took to compile on each page.

If you have 20,000 lines of the file, and you need only 600 of these lines to make it work (provided that everything is written as modular and asynchronous, using any template for resource management) then you are going to save, which can be for half a second or more if you serve the main program and expand as necessary (or on a delayed timer, serving large pieces of functionality that are closely related to each other).

The total time spent downloading is higher.
The total number of HTTP connections used is higher.
But the time required for the page to be visible to the user is lower.
The time required to add basic functions to the page is below.
Then, additional functionality can be broadcast, either after loading and initialization, or just on time, as requested by the user, and in both cases, while the code you passed is oriented towards this and does not require half a dozen other dependencies, the time between the request and adding functionality will be minimal.

RequireJS uses the promise system mainly.

It allows you to declare dependencies in front and pass the code (as a callback), which will be implemented after processing all its dependencies.
If these dependencies have any dependencies, then they will not be initialized until their dependencies are loaded.
If you just want it loaded, and the order is not important, you do not need to specify its dependencies.

General moral: if you have a system where all your files are small, the total weight of JS on the page is very small, you need only a few hundred lines to do everything you need on the page ...... plus, you know, where are all your dependencies, you have a system on the server to make sure they are in the correct order, etc. (plus you have excellent documentation, or you are the only one who deals with this code, and you live inside it, every day) ... ... then there is nothing wrong with doing what you do.

You may not see any difference if the compilation time is outweighed by the number of HTTP requests you make. But for general applications that are tens (or hundreds) of thousands of lines, where only part of this functionality is required on one page, there can be significant savings in terms of the estimated time between page loading and the application is “ready” for basic user interaction.

Answer 3

If you want to download all your javascript source for each page, be sure to compile it into one file. If you download other code based on what actions the user takes or on which page is loaded, use the modules loaded by AMD. Another alternative would be to list a bunch of script tags, which, of course, will only load one at a time and may take some time.

AMD is not a specific library; it is in fact the standard for loading javascript modules that are used by most loaders. This means that they all use the same syntax to define and load modules. They are considering making AMD part of the ECMA script specification. The usefulness of this is that you can also define dependencies, so if your code requires jQuery to run, you can specify it as a dependency and it will be loaded into the namespace of your modules.

 define( [ 'jquery' ], function ( $ ) { // use jquery in here without clouding up the global namespace return {}; // return your module for use in a different module or whatever }; 

In this example, the code in the specific module will not run until the jquery module is loaded. Then it will insert the jquery module directly into your new module as an argument to $ .

Now you can neatly organize your code in files containing modules. None of your modules will have a global namespace. All your dependencies will be surely loaded before the launch of your module (no loading status errors for dependent code fragments).

Another advantage is that you can configure the bootloader to use different paths for the same module, so you can define the path for the jquery module as "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery .min.js' in one place of your code, even if it can be used in almost every module. Now that I need to upgrade my version of jQuery to version 1.8.3, I can just change the path in one place in my code, and it will use this path for each module, which uses jquery like dependence. It may also be useful for simple changeover Nia when tested using modules or debug versions of some modules.

Now this is not necessary for tiny projects. However, the larger your project, the more this type of download is felt.