The 7 Levels of JavaScript Modules

📈 History is knowledge, knowledge is power. Let's explore the interesting history of JavaScript Modules! This video starts at the javascript dark ages of globals and namespaces, and then slowly moves to the module pattern, AMD and the modern Modules we all love and use. 🤩

0:00 Intro
0:25 Level 1: Globals
2:17 Level 2: Namespaces
3:19 Level 3: IIFE
4:50 Level 4: Module Pattern
7:37 Level 6: AMD
10:39 Level 7: ES Modules

[luckyygrrl]

Thank you SO much for this video it has helped me tremendously. I hope your channel blows up soon. A lot of us younger developers are presented with these giant inscrutable pillars of abstraction, solutions to pains we never felt. We have to descend down from the top in order to gain understanding and level up as engineers. This time-travel approach is extremely effective and I plan to use it in the future to understands other parts of the stack.

[draganbogdan]

So for the iife exemple, if the function is called and not saved in a variable how do you acces it's content doesn't it just get popped away after it's called ? I don't know if my question is clear.

[Mitsunee_]

interesting that IIFEs were used so early on. As a self taught developer I made up my own conventions for how to handle globals and had all my code in a single file for a looong time. Nowadays I only use IIFEs as a workaround for some tools not yet fully grasping that top-level await is now a thing. They're also great for handling temporary variables that are only really needed at that one spot, freeing up the name thereafter, even making TypeScript happy despite the name collision.

Overall I'm really happy with the ES module standard we have now, as it's simply the least verbose way we ever had to do the same thing, although I avoid default exports since they tend to create issues with some bundlers still. Also using `await import("package").then(pkg => Object.assign(global, pkg)&&pkg)` (imports any es module, assigns its named exports to the global scope and then displays the imported module) in the node REPL only really works with named exports.

[kubave]

Did you make a typo on the namespace level? you have:
window.NS = {} || window.NS

But I think it should be:
window.NS = window.NS || {}

[blutan]

excellent explanation, also nice song in the bg, what is it?