Discussion on: Explain the Frontend Webdev Ecosystem to Me

It is easiest to see the need for a lot of things when you start with the realization that JS had no built-in module system for a long time. When NodeJS came along (server-side JS), it adopted CommonJS as the module system, and NPM (third-party packages) was born out of this. The front-end still lacked a tried-and-true module system, unless JS passed through a build step. To complicate issues, only newer browsers support the latest version of JavaScript, so there was a need to compile new JS => compatible old JS. So where does that leave us?

• NPM => package manager
• BabelJS/CoffeeScript/PureScript/ReasonML/TypeScript => Compile some newer language to ECMAScript5
• Webpack/Browserify => a build step that bundles all the JS + NPM packages into one bundle (it can do code-splitting, too). Webpack can do one better and bundle other things inside the bundles it produces, like processed CSS, images, etc.

Any other conversation has to do with libraries/frameworks.

• React => simply a view library: no batteries included. It offers the most flexibility
• Vue => somewhere between React/Angular
• Angular => a full MVC framework for frontend JS/SPAs (no backend)

There are a gazillion libraries that are capable of running on the server-side, or in a browser: these are called "isomorphic".