Modularity in Javascript

Question

I know that if there are multiple JS files to be rendered by the browser, which apparently have identifiers inside, the global scope is polluted by this identifiers. I also know that one way to avoid this is using modules which(in my understanding) are just objects which have the aformentioned identifiers as members, thus sort of imitating C++ namespaces. I am also learning Node.js and there is a built in module system which eases this task so my question is: how to use modules in js files that are sent to the browser to be rendered?

Thanks.

score 3 · Accepted Answer · answered Jun 30 '18 at 09:12

3

Tools like browserify and WebPack are exactly what you are looking for (I personally prefer browserify over WebPack). Have a look at this answer, it explains a lot of your concerns.

In Node.JS, you can export a module using module.exports keyword, but you cannot just import those modules in your browser by just requiring them in a <script> tag. That's because, the browser doesn't understand the module system and everything works in the context of a global window object there, so module.exports simply becomes window.module.exports which I'm sure you'll not want. Hence you use tools like browserify that process the Node.JS scripts into something that your browser will understand.

answered Jun 30 '18 at 09:12

Prahlad Yeri

3,567
4
25
55

Thanks for your answer. I know nothing in this field as I didn't understang most of the answer you gave link to. Could you recommend me some resources in order to get a bird's-eye view understanding Javascript/Node.js and relations between them? Thanks – Bran Tran Jun 30 '18 at 09:27
No worries, we are all learners here! My advice is to go bit by bit, not jump at browser and Node at once. [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/Tutorials) is a great resource for learning core JavaScript - things like events, callbacks and promises which you should have a mastery of first. After that, Node won't be that difficult. [Node docs](https://nodejs.org/en/docs/guides/) is a good resource once you understand the basics. Apart from that, skimming the documentation of useful libraries like jquery, angular, etc. is also useful depending on your needs. – Prahlad Yeri Jun 30 '18 at 12:58

score 1 · Answer 2 · answered Jun 30 '18 at 09:14

This problem is usually solved by module bundlers or module loaders (e.g Webpack, Browserify, RequireJS). They are able to understand relations between your JS modules, skip unused modules and produce output that just works in your browser. All of that without the need to worry too much about global scope if you follow some conventions.

Some time ago, before ES6, two different approaches to this problem were widely used:

CommonJS:

var module = require('my-module');

widely known from Node.js

AMD:

define(['jquery'] , function ($) {
    return function () {};
});

Which was suited for browser usage since it by design supported asynchronous loading of modules.

Then ES6 was introduced with native support for modules:

import * as lib from 'lib';

Main problem with new technology in web is that you often have variety of browsers to support which for a long time prevented developers from using new features. Nowadays, we have code transpilers and sophisticated code bundlers (e.g. Webpack). With their help you can use latest version of language, compile and bundle your code and at the end single "bundle.js" file is emitted which supports older browsers at the cost of slower execution times.

Modularity in Javascript

2 Answers2