JavaScript Frameworks

Modern web development often involves using frameworks and libraries to manage complex state, routing, and UI components.

JavaScript Frameworks

React

React (technically a library) is a declarative, efficient, and flexible JavaScript library for building user interfaces, maintained by Meta.

• Component-Based: Build encapsulated components that manage their own state.
• Virtual DOM: Optimized rendering by only updating parts of the page that changed.
• Large Ecosystem: Massive community support and a huge range of third-party libraries.

// React Component
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Angular

Angular is a platform and framework for building single-page client applications using HTML and TypeScript, maintained by Google.

• Batteries-included: Includes everything you need to build a large-scale app (routing, forms, HTTP client).
• TypeScript First: Designed with TypeScript in mind, providing strong typing and tooling.
• Dependency Injection: Powerful pattern for managing service instances and modularity.

// Angular Component
@Component({
  selector: 'app-greeting',
  template: '<h1>Hello, {{name}}!</h1>',
})
export class GreetingComponent {
  @Input() name: string = '';
}

Vue.js

Vue.js is a progressive framework for building user interfaces. It is designed to be incrementally adoptable.

• Approachable: Uses standard HTML, CSS, and JavaScript.
• Performant: Efficient reactivity system and minimal bundle size.
• Versatile: Can scale between a library and a full-featured framework.

<!-- Vue Single File Component -->
<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script setup>
defineProps(['name']);
</script>

Svelte

Svelte is a fundamentally different approach to building user interfaces. Instead of doing work in the browser (like React/Vue with a Virtual DOM), Svelte shifts that work to a compile step that happens at build time.

• Compiler, Not Runtime: Produces highly optimized vanilla JavaScript — no framework code ships to the browser.
• Less Boilerplate: Reactivity is built into the language syntax itself (no hooks, no special APIs).
• Small Bundle Size: Because there’s no runtime library, Svelte apps are typically smaller.

<!-- Svelte Component -->
<script>
  let name = 'World';
</script>

<h1>Hello, {name}!</h1>

Solid.js

Solid is a declarative, efficient, and flexible JavaScript library for building user interfaces. It uses fine-grained reactivity — no Virtual DOM.

• Fine-Grained Reactivity: Updates only the exact DOM nodes that change, extremely performant.
• Familiar Syntax: Uses JSX like React, but components only run once (not on every re-render).

// Solid Component
function Counter() {
  const [count, setCount] = createSignal(0);
  return (
    <button onClick={() => setCount(count() + 1)}>Count: {count()}</button>
  );
}

---

State Management

As applications grow, managing shared data (state) across many components becomes complex. Dedicated state management libraries solve this.

Why State Management?

When multiple components need to read and update the same data (user authentication, shopping cart, theme), passing data through many layers of components (“prop drilling”) becomes unmanageable. State management libraries provide a centralized way to share state.

Popular Libraries

Library	Ecosystem	Approach
Redux / Redux Toolkit	React	Centralized store with actions and reducers. The original standard.
Zustand	React	Lightweight, hook-based store. Simpler alternative to Redux.
Jotai	React	Atomic state — each piece of state is an independent “atom”.
Pinia	Vue	The official Vue store. Intuitive, type-safe, and devtools-integrated.
Signals	Svelte / Solid / Angular	A reactive primitive pattern gaining adoption across frameworks.
TanStack Query	Framework-agnostic	Not a store — manages server state (caching, fetching, syncing remote data).