The original post is written here with images and code samples -> https://easyontheweb.com/history-of-modules-in-javascript/
Modules are a very important yet unique part of Javascript. I’m calling modules unique because you might be confused about how they are used, how they are written and how they are bundled as “modules”. You might have seen different pieces of Javascript code use different types of modules syntax and therefore to understand all that, in this article we’ll be going through the history of modules in Javascript.
I usually do not study or write about the history of any particular feature or syntax of a language but modules in Javascript are somewhat of an exception. Why? Because I personally was super confused by the way they worked with different projects and different developers using them in different ways.
Till date, I see many different ways in which modules are being written, exported and imported. We’ll try to explore all those ways in this article.
Inline scripts and script tags
When Javascript was it’s in early stages, we included it on our webpages using inline scripts with the script html tag.
As you can see in the image, with this method, we just inline all our Javascript code inside the HTML file itself with the script tag.
There were two major problems to this approach :-
Polluting the global namespace -> If a function called printHello was declared inside this script tag, that name can not be used for a variable again.
Non-reusable code -> Say we write a function printHello inside our home.html file, but we need the same function inside our other webpage called contact.html. How do you think this could be achieved using the inline script method? Answer – you needed to copy the entire function and paste it inside the script tag of the other file as well.
I don’t believe you’ll be seeing inline script Javascript code much these days unless it is to load something like a Google analytics or hotjar onto your main HTML file.
Both these issues were something that needed to be improved upon as they made writing Javascript code more painful than useful. The next solution in line were script tags with a reference to a javascript file.
Using this method, we could write our javascript code in one file and then load that javascript file onto different HTML pages and the javascript code would be available for those particular pages. We can even have multiple script tags in the same page.
Even though this solves the issue of reusability of code this actually does not do anything when it comes to polluting the global namespace. In fact, you are more likely to forget and declare variables of the same name in different files than in a single one!
Other than that, this method brought in another issue of it’s own – that of dependency order. If you have multiple script tags in your html file, you need to make sure that the script tags are loaded in the correct order. By correct order I mean is that if we are using a function A in file 2 that has been written in file 1, we need to make sure that the script for file 1 is loaded before the script in file 2.
Script tags are still common in use and are mostly used to include libraries like Bootstrap or actually any other third party library in your project.
IIFE (Immediately invoked function expression)
Next in the history of modules in javascript came IIFEs, they are called so because they are called as soon as they are declared.
As we can see in the example as well, the entire file is wrapped in parenthesis which are then called. All the functions in this method are attached to a single object declared at the top of the file (myClass in this example).
IIFEs did solve the issue of the pollution of the global namespace as only one variable gets attached to the window in this case. All the functions that we want to use are then attached to that variable. But, the problem of order of scripts still existed.
CommonJS & Browserify
Now we come to module bundling. Module bundling is the process of putting together all your javascript code before it gets put up on the browser. Module bundlers read through all our javascript files and create a single JS file as a result.
CommonJS brought in a syntax that you would still see in many projects today as well.
The module.exports and require syntax finally brought us to a point where we could use modules the proper way. We no longer needed to be aware of the scripts order as we could just require any function we needed from some other file into our file with an easy to use syntax.
ES6
With the introduction of Ecmascript 6 Javascript finally brought in modules into the language using a very efficient and clean syntax.
As you can see in the example above, in the first file, we are exporting two different functions – one named hello which is then imported in file 2 in the first line and also an anonymous function which is being exported as the default value from this file.
The import-export syntax that we got in ES6 is probably the cleanest way to structure your projects using modules as this gives you fine-grain control as well as high-level control on what your files should export and how those functions are reused in some other files.
The only issue that exists when it comes to ES6 is that it still isn’t supported by all the browsers and that we have to use a bundler like Webpack or parcel to convert it into older javascript and then run it on the browser. (For an article on different module bundles click here).
But on the coding side of things, it is all well and good using ES6.
Conclusion
Due to a lack of a proper module system in Javascript early days, you may see many different ways that developers have broken their projects into modules (even more methods than I explained in this article) but with the introduction of ES6 we more or less are moving towards an import-export world of modules.
I hope that this article will help you understand the history of modules in javascript and how they have evolved through the years. For more Javascript articles you can check out this link here => https://easyontheweb.com/category/javascript/
Also, if you wish to join a facebook group with other web developers including me, please join the easy on the web group here -> https://www.facebook.com/groups/503230450489995
Top comments (0)