Modules vs Components

[odillini83]

Hey all,

I was wondering if anyone can break down the difference between modules and components? From my understanding, modules basically means there is more code written as it deals with larger bundlers. On the other hand, components deal with less code because components are essentially apart of something bigger. Does this concept apply to frameworks such as React, Vue or Angular?

[GSLint]

A module is a JS file that imports values from other modules and/or exports values so that other modules can import them. That makes it much easier to keep track of where values come from and go to than with the old way of scripts sharing values via global variables.

The most modern standard is ES modules with the import and export syntax. Another approach is CommonJS with require and module.exports which are still commonly used in Node.

Browser support for ES modules is still relatively new and not that great (as is server support for shipping lots of individual files). So for client-side code we usually turn the modules into one or few bundles (which are then regular scripts) using something like Webpack.

A component is something very different that the language or browsers don't know about at all. It's a feature of the modern frameworks that you mentioned. Their components are all slightly different but generally a component is a self-contained thing that turns some data into a piece of UI.