Broadly we can classify all client side tooling in the following categories. Environments - JavaScript interpreter that you can run locally. Node and Bun are popular - Package Manager - Something to help with installing various tools. Yarn, npm, pnpm Safety Net - Linters - Check your code for errors. ESlint is the industry standard - Version Control System - Git and stuff - Code Formatters - Similar to linters they make code look better and fix some errors Prettier is a good example - Type Checkers - See TypeScript under Transformation Transformation - Write using latest language features even if browsers don't support them yet - Babel - JavaScript compiler that allows you to write in cutting edge JavaScript which Babel then converts to the more old fashioned version that browsers can understand - PostCSS - Does the same thing as Babel but for CSS. Will write JavaScript polyfill in case the CSS effect doesn't exist yet. - Entirely different language and have it transformed to web compatible language - Saas/SCSS - Use variables, rules functions and stuff in CSS - TypeScript - Guarantees type safety. The TypeScript compiler converts code to JavaScript when building for production - Frameworks - Like React, Ember, Vue that provide additional functionality that then gets converted to JavaScript. - Optimization. Minifying the code, removing unnecessary parts etc. - Webpack. Most popular with large amount of plugins but is more complex - Vite. More modern build tool popular for speed and simplicity. - Keep in mind NextJS takes care of the bundling itself Post Development - Testing - Jest, Mocha and Jasmine as frameworks to write tests. TravisCI, Jenkins, CircleCI for automated testing and running. - Deployment - GitHub pages is free for all public repos. Netlify and Vercel are pretty popular as well. --- https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview#the_modern_tooling_ecosystem