Navigating the Web Development Madness
I was late to the “JS for everything” or “frontend developers conquer the world” party, and it took me A LONG TIME to understand what all these different JS frameworks/libraries/whatevers are. I guess people have seen how all these tools evolved over time, and they can easily see why all these exist. However, for someone who’s late to the party, it’s a huge mess of buzzwords.
You’re looking at my notes for myself. In some categories, I added a few non-JS examples as well to point out that they basically solve the same problems.
JavaScript Frameworks/Libraries
These tools help you build interactive websites, making it easier to create features like updating a shopping cart or showing new content without reloading the page.
- React
- Vue
- Angular
- Svelte
- Preact
- Solid
- Ember
- Alpine.js
- Stimulus
CSS Frameworks/Utilities
These provide pre-made styles and layouts, allowing you to quickly create buttons, grids, and other design elements without writing CSS from scratch.
- Tailwind CSS
- Bootstrap
- Bulma
- Foundation
- Semantic UI
- Materialize
- UIkit
CSS Preprocessors
These extend CSS with variables, nested rules, and functions, making it easier to write and maintain styles.
- Sass
- Less
- Stylus
CSS Post-Processing Tools
These transform CSS with JavaScript plugins, such as adding vendor prefixes or optimizing CSS.
- PostCSS
UI Component Libraries
These provide ready-made parts for your website, such as complex date pickers or dropdown menus that you can customize.
- Chakra UI
- MUI (Material-UI)
- Ant Design
- shadcn/ui
- Element
- Vuetify
- PrimeVue
- React Bootstrap
- Buefy
Meta-Frameworks
These build upon existing tools to add extra features like server-side rendering or easier creation of pages that work without JavaScript.
- Next.js
- Nuxt.js
- Gatsby
- SvelteKit
- Remix
- Astro
- Quasar
- Angular Universal
Backend Frameworks
These help you create the server-side part of your website, managing things like storing user data, handling login systems, or processing payments.
- Nest.js
- Express.js
- Django
- Ruby on Rails
- Laravel
- Spring Boot
- ASP.NET Core
- Flask
- FastAPI
State Management
These help keep track of information in your app, such as remembering items in a shopping cart across different pages or keeping a chat app updated with new messages.
- Redux
- Vuex
- MobX
- Recoil
- XState
- Jotai
- Pinia
- Zustand
Build Tools
These prepare your code for production by combining multiple files, removing unnecessary code, and converting modern JavaScript into forms older browsers can understand.
- Webpack
- Vite
- Parcel
- Rollup
- Esbuild
- Turbopack
- Snowpack
- Gulp
Testing Frameworks
These help you automatically check if your website is working correctly by simulating user interactions.
- Jest
- Mocha
- Jasmine
- Cypress
- Selenium
- Puppeteer
- Playwright
- Vitest
API Development
These help your website communicate with other services, such as getting weather forecast data or allowing users to log in using their Google account.
- GraphQL
- RESTful APIs
- gRPC
- Swagger/OpenAPI
- Apollo
- Axios
- Fetch API
- tRPC
Static Site Generators
These turn simple text files into full websites, great for blogs or company websites where content doesn’t change often.
- Jekyll
- Hugo
- Eleventy
- Hexo
- Pelican
- Gridsome
- VuePress
- Next.js (when used for static site generation)
Animation Libraries
These help you add moving parts to your website, such as smooth transitions between pages, animated logos, or interactive data visualizations.
- GreenSock (GSAP)
- Anime.js
- Three.js
- Lottie
- Motion One
- Framer Motion
- React Spring
- Velocity.js
- Mo.js
Package Managers
These help you install, update, and manage external libraries and tools that your project depends on.
- npm
- Yarn
- pnpm
- Bun
Runtimes
These provide the environment in which your JavaScript code runs, including APIs for interacting with the system and network.
- Node.js
- Deno
- Bun