Comparaison entre CommonJS et AMD/RequireJS

Introduction

Contrairement aux serveurs web tels qu’Apache et Microsoft IIS, qui sont tous deux préconfigurés, node.js est assez différent. Avec node.js, les développeurs construisent des serveurs web à partir de zéro. Les compétences en codage d’un développeur sont censées protéger le serveur Web. Ainsi, Node.js diffère d’Apache et du reste.

Dans cet article, nous allons nous concentrer sur deux modules système principaux – AMD et Common.js – dans node.js. Avant de les comparer, nous devons discuter des différences entre les deux modules système. Deux questions directrices qui nous aident à comparer les deux sont : lequel est plus rapide lors du chargement des modules dans ou depuis le navigateur et comment convertir un module système pour hériter de certaines fonctionnalités d’un autre module système.

Cet article ne se concentrera pas sur les bases de node.js amd javascript. Il ne couvrira pas des sujets tels que « comment installer node.js », « comment utiliser npm ou nave pour installer des paquets » ou « différentes versions de node.js pour différents projets. » Notre objectif est de résoudre la confusion entre AMD et Common.js. Par conséquent, nous mettrons légèrement l’accent sur les modules de base dans node.js, un couple de fonctions et de variables, et finalement diriger notre attention sur AMD et Common.js et comment nous pouvons convertir l’un des modules du système pour charger les modules plus rapidement dans le navigateur.

Modules de base, de fichier et externes de Node

Dans node.js, il y a trois principaux modules importants ; Core, fichier, et modules externes de node. Commençons par le module fichier car il est plus facile à appréhender.

• Module fichier:
  Contrairement aux deux autres modèles, le modèle fichier est un modèle basé sur le chemin relatif. Pourquoi ? Disons que vous deviez exporter un module via la syntaxe suivante :

 module.exports = foo { 'something' : 123 } ; 

 var foo = function () { console.log('foo called'); };

var b = function () { console.log('b called'); }; 

module.exports = { b : b };

module.exports.bar = function () {console.log('bar called');}; 

module.exports.bas = function () {console.log('bas called');};

La façon dont les modules sont chargés ou importés dans des fichiers est assez différente des modules core et external_node ; c’est pourquoi les deux autres sont également connus comme des modules basés sur des chemins non relatifs.

Note : il existe diverses façons d’exporter des modules/fichiers dans node.js. La fonction anonyme est une autre de manière d’exporter un module à partir d’un fichier.

• Modules de base:
  Les modules suivants qui comprennent les trois modules principaux dans node.js sont les modules de base. Les modules de base sont des modules basés sur la non-relation. Ils sont très différents des modules de fichiers, surtout lorsque vous exigez (ou importez) des modules dans des fichiers.

Par exemple, si nous devions consommer le module path dans node.js, qui corrige les slashs pour être spécifique à l’OS, prend soin de . et … dans le chemin, et supprime également les slashs en double, nous n’inclurions pas le chemin relatif:

var require = require('path') console.log (path.normalize ('/foo/bar/......'));

• modules external_node:
  Ces modules se situent quelque part entre le noyau et les modules basés sur les fichiers. Les modules external_node sont assez similaires aux modules basés sur des fichiers, surtout lorsque vous exportez un module.

module.exports = function () {console.log('called node modules!');} 

En revanche, lorsque vous chargez des modules, ils deviennent assez différents.

var bar = require('bas');bas(); // 

En outre, node.js fournit quelques globaux importants avec des fonctionnalités utiles, que nous ne discuterons pas en détail. timer,console, _filename et_dirname, et process sont tous des exemples de globaux importants dans node.js. Par exemple, _filename et _dirname sont disponibles dans chaque fichier et donnent accès au chemin et au répertoire complets pour le module actuel.

Maintenant que nous avons une brève compréhension des modules dans node.js, passons à l’aspect principal, où nous différencions les modules CommonJS et AMD. Nous aborderons les problèmes suivants : « pourquoi Common.js est si lent dans le chargement des modules depuis le navigateur » et « comment nous pouvons le convertir via browserify pour hériter de certaines fonctionnalités de AMD et Require.js. » .

Présentation de CommonJS et d’AMD

 CommonJS is a great module for the server side environment, especially when you have immediate access to the filesystem. However, using the same module system in the browser may be less reliable and extremely slow. 

Par exemple, considérons comment les deux modules sont chargés dans l’environnement côté serveur :

var foo = require('./foo');var bar = require('./bar');// more code here 

En regardant l’exemple ci-dessus, il est considéré comme une bonne pratique côté serveur lorsqu’un module est chargé pendant que l’autre module attend qu’un autre module soit analysé.

En d’autres termes, lorsque le module foo est chargé, le bar ne sera pas analysé ou traité jusqu’à ce que le foo soit complètement chargé. Même le serveur pourrait ne pas être conscient du module bar jusqu’à ce qu’il ait terminé avec le module foo.

L’utilisation du même système de modules dans le navigateur n’est pas considérée comme une bonne idée parce que chaque système de modules devrait déclencher une requête HTTP vers le serveur. Ceci est beaucoup moins efficace et moins fiable dans l’environnement du serveur. Il dégrade l’expérience utilisateur du côté client. Ce problème pourrait être résolu via le chargement asynchrone des modules.

C’est là que l’AMD intervient. AMD, également connu sous le nom de définition de module asynchrone, a été introduit pour supporter le chargement asynchrone des modules dans le navigateur –
il résout finalement le taux lent de chargement des modules dans le navigateur. Conformément à la signification de « asynchrone », les modules sont déclenchés à des moments différents.

Pour exporter quelque chose dans un fichier dans AMD, nous devons simplement inclure une fonction de rappel et la renvoyer depuis une fonction de rappel de définition. Voici un exemple :

 define(, function () { var foo = function () { console.log ('foo was called');}; return foo; // function foo is exported});

Comme la syntaxe de la variable export dans node.JS, la fonction define prend également un argument spécial appelé exports, qui est assez similaire à celui de node.JS.

define(, function (exports) {var bas = exports.log = function () {console.log ('bas.log was called'); };});

Pour rendre possible le chargement de deux modules dans le navigateur, nous devons télécharger et installer RequireJS. Gardez à l’esprit que c’est juste une option qui empêche les développeurs d’utiliser le code node.JS dans le navigateur.]

Pourquoi avons-nous besoin de RequireJS pour pouvoir charger des modules via la définition asynchrone du module ?
Voici la raison : parce que la fonction Define, qui fait partie du code ci-dessous (nous montrant comment nous pouvons charger plus d’un module dans le navigateur via l’AMD), n’est pas native du navigateur. Par conséquent, la meilleure option est d’y accéder à partir d’une bibliothèque tierce. RequireJS est simplement un fichier javascript que vous incluez dans votre projet.

define(, function(foo, bar){ //more code here// more code here }); 

Comment convertir node.js en code navigateur:

Maintenant, voyons comment nous pouvons convertir CommonJS pour qu’il devienne compatible avec AMD/RequireJS via browserify. La conversion de CommonJS via browserify permet à node.js de charger des modules dans le navigateur de manière similaire à AMD/RequireJS.

Installons browserify via le code suivant. Veuillez vous assurer que vous êtes connecté à Internet pendant l’installation. Le g avec trait d’union signifie simplement global.

npm install –g browserify

Vous pouvez créer des modules, les nommer comme clientJS ou tout autre nom que vous préférez, et éventuellement les convertir en AMD/RequireJS en utilisant browserify.

module.exports = function () {console.log('bas was called');}

exports.log = function () {console.log('bar.log was called');}

Maintenant, pour convertir le code ci-dessus afin qu’il soit compatible avec AMD, en d’autres termes, pour charger les modules de manière asynchrone, nous devons le faire via les arguments de ligne de commande suivants :

browserify client.js -o amdmodule.js

Vous pouvez attribuer n’importe quel nom que vous préférez pour être le client. Il ne devrait pas toujours être client.js mais client.js, aussi, est préférable. N’oubliez pas qu’il ne s’agit que d’un fichier. En outre, vous pouvez vérifier plus de configuration sur browserify à http://browserify.org/.

Wrapping up:

Enfin, vous devez noter que tous les modules node.JS ne peuvent pas être convertis pour fonctionner efficacement dans le navigateur. Ceux qui dépendent de fonctionnalités disponibles côté serveur ne fonctionneront pas du tout dans le navigateur.

Je viens de présenter AMD/RequireJS comme une solution qui permet le chargement asynchrone des modules dans le navigateur, ce qui est considéré comme une bonne pratique. Le chargement asynchrone des modules est beaucoup plus rapide et plus fiable que l’utilisation de CommonJS dans le navigateur.