JS Frameworks
Javascript Frameworks mainly for Frontend Development
Vite 
Javascript Framework
Vite.js (French for "quick", pronounced /viːt/) is a modern frontend build tool and development server designed to provide an incredibly fast and lean development experience for web projects. Created by Evan You (the creator of Vue.js), it serves as a faster, minimal-configuration alternative to older tools like Webpack.
More Information...
Why Vite is Faster
-
Native ESM Dev Server: Traditional bundlers like Webpack crawl and build your entire application before serving it. Vite serves source files over native ES Modules (ESM) directly to the browser. The browser handles module resolution, and Vite only compiles files on-demand as they are requested.
-
Esbuild Pre-bundling: Vite uses an incredibly fast Go-based tool called esbuild to pre-bundle third-party dependencies. This makes cold server starts nearly instantaneous.
-
Lightning-Fast HMR: Its Hot Module Replacement (HMR) decouples file updates from the total size of the bundle. No matter how large your application gets, editing a file updates the browser instantly without losing application state.
Step-by-Step Example: Setting Up a React Project
Vite is framework-agnostic and officially supports React, Vue, Svelte, Preact, and plain Vanilla JavaScript. Here is how you can spin up a React application from scratch using the official Vite Documentation.
Open your terminal and run the scaffolding command:
npm create vite@latest my-react-app -- --template react
(You will be prompted to choose a framework and variant. In this case, we selected the standard React JavaScript template.)
- 2. Install Dependencies & Run
Navigate into your new directory, install the required packages, and launch the development environment:
cd my-react-app
npm install
npm run dev
Your application will be live almost instantly, typically hosted at http://localhost:5173/.
Understanding the Vite Project Structure
Vite relies on a simplified structure where index.html sits prominently in the root folder instead of being tucked away inside a public/ directory. Vite treats index.html as actual source code and the main entry point to your entire application graph.
index.html (Application Root)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vite + React</title>
</head>
<body>
<!-- React will mount our application into this div -->
<div id="root"></div>
<!-- Vite targets this native ES module script directly -->
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
src/main.jsx (JavaScript Entry Point)
This file initializes React and mounts the main component to the DOM:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
src/App.jsx (Your First Component)
A basic component showing a stateful counter:
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Hello from Vite + React!</h1>
<button onClick={() => setCount(count + 1)}>
Count is: {count}
</button>
</div>
)
}
export default App
Building for Production
When you are ready to deploy your application to a live server, run the build command:
npm run build
Under the hood, Vite switches to highly optimized configurations powered by Rolldown (and Rollup compatibility layers) to produce minified, tree-shaken static assets inside a dist/ directory. This guarantees that your final code is completely optimized for the end-user.
For full documentation visit vite.dev.
React 
Javascript Framework
React (also known as React.js or ReactJS) is a free and open-source JavaScript library developed by Meta for building dynamic and interactive user interfaces. Instead of forcing developers to update full webpages manually, it uses a Component-Based Architecture to break down user interfaces into small, isolated, and reusable pieces of code.
More Information...
Core Concepts
-
Components: Independent, reusable building blocks of an application. They are regular JavaScript functions that return HTML-like code.
-
JSX (JavaScript XML): A syntax extension that allows developers to write HTML tags directly inside their JavaScript code.
-
Virtual DOM: A lightweight copy of the real DOM kept in memory. When data changes, React updates this Virtual DOM first, compares it to the previous version, and only applies the exact necessary changes to the browser. This process keeps applications incredibly fast.
-
State: A component’s internal memory where it stores data that might change over time, automatically causing the UI to re-render when updated.
Step-by-Step Practical Example
The following example demonstrates a functional component in React: a Counter Button that tracks how many times it has been clicked.
import React, { useState } from 'react';
// 1. We define a functional component named Counter Button
function CounterButton() {
// 2. Declare a state variable named "count" initialized to 0
// "setCount" is the specific function used to update this state
const [count, setCount] = useState(0);
// 3. The return statement uses JSX to define the visual structure
return (
<div style={{ textAlign: 'center', marginTop: '20px' }}>
<h2>Interactive Counter</h2>
<p>You have clicked the button {count} times.</p>
{/* 4. An event handler calls setCount to increase the count when clicked */}
<button onClick={() => setCount(count + 1)}>
Click Me!
</button>
</div>
);
}
export default CounterButton;
Breaking Down the Example
-
Importing useState: We pull the useState hook from the main library to grant our functional component memory.
-
Initializing State: const [count, setCount] = useState(0) creates our data tracking mechanism. count holds the current integer, while setCount is our tool to change it.
-
Writing JSX: The code inside the return statement looks like HTML but is converted into JavaScript under the hood. Note the usage of curly braces {count} to dynamically inject JavaScript variables right into the display markup.
-
Handling Events: The onClick attribute triggers an inline function every time the user interacts with the button. This safely updates the state, tells the Virtual DOM to check for changes, and smoothly repaints the text on screen.
For full documentation visit react.dev.
NextJS 
Javascript Framework
Next.js is an open-source React framework created by Vercel that enables you to build fast, full-stack web applications. While React is a frontend library for building user interfaces, Next.js handles structural requirements like routing, data fetching, and performance optimizations right out of the box. It automatically processes pages on the server side, giving your app vastly superior SEO and speed compared to traditional standalone React setups.
More Information...
Key Features
-
File-System Routing: You define paths simply by organizing folders and files inside your project directory.
-
Server Components: Components render on the server by default, minimizing the bundle size sent to the browser.
-
Flexible Rendering: Supports both Server-Side Rendering (SSR) for dynamic real-time requests and Static Site Generation (SSG) for lightning-fast pre-built pages.
-
Built-in Optimizations: Automatically resizes and compresses scripts, fonts, and images using native elements like .
-
API Endpoints: Built-in backend capabilities let you handle server requests without configuring an external server.
Step-by-Step Example
This example demonstrates how to set up a clean project using the modern Next.js App Router architecture.
Run the standard installer in your terminal to generate a brand-new project:
npx create-next-app@latest my-next-app
(Select the default options provided by the setup prompt)
- 2. Create the Root Layout
Next.js structures its UI globally using layouts. Create a file at app/layout.tsx to handle your core HTML structure:
// app/layout.tsx
import './globals.css'; // Global styling sheets
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<nav style={{ padding: '20px', background: '#eaeaea' }}>
<a href="/">Home</a> | <a href="/about">About</a>
</nav>
<main style={{ padding: '20px' }}>{children}</main>
</body>
</html>
);
}
- 3. Build a Server-Rendered Homepage (With Data Fetching)
By default, components inside the app/ folder are Server Components. You can directly fetch data asynchronously right inside your code:
// app/page.tsx
type User = {
id: number;
name: string;
};
export default async function HomePage() {
// Direct server-side data fetching
const response = await fetch('https://typicode.com');
const users: User[] = await response.json();
return (
<div>
<h1>Welcome to Next.js!</h1>
<p>This user list was compiled entirely on the server:</p>
<ul>
{users.slice(0, 3).map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
- 4. Add an Interactive Sub-Page (Client Component)
To add a new URL route like /about, simply create an about/ directory containing a page.tsx file. If you need client-side interactivity (like button clicks or state changes), add the 'use client' directive to the top:
// app/about/page.tsx
'use client'; // Opts this component into browser-side interactivity
import { useState } from 'react';
export default function AboutPage() {
const [count, setCount] = useState(0);
return (
<div>
<h1>About Us</h1>
<p>This is a highly interactive Client Component.</p>
<button onClick={() => setCount(count + 1)}>
Clicks: {count}
</button>
</div>
);
}
- 5. Launch the Application
Run the local build server to test your changes live:
npm run dev
Open http://localhost:3000 in your browser. You can seamlessly browse between the server-fetched user directory on your homepage and the interactive counter on the /about path.
For full documentation visit nextjs.org.
JQuery 
Javascript Framework
jQuery is a fast, lightweight, and feature-rich JavaScript library created to simplify web development. Summarized by its famous principle, "write less, do more," it allows developers to handle HTML document traversal, event handling, animations, and Ajax requests with just a few lines of code.
More Information...
Key Features
-
DOM Manipulation: Easily select, add, remove, or change HTML elements and attributes.
-
Event Handling: Streamlines actions like clicks, hovers, and keyboard inputs across all browsers.
-
Ajax: Simplifies asynchronous server requests and data loading without reloading the page.
-
Animations: Built-in methods for fading, sliding, and custom CSS-based animations.
How to Use It
You can add jQuery to your project either by downloading the source files or by linking to a Content Delivery Network (CDN).
<!-- Example of loading the latest jQuery via CDN -->
<script src="https://jquery.com"></script>
Basic Syntax
jQuery syntax is tailor-made for selecting HTML elements and performing actions on them:
$(selector).action()
- $ defines and accesses jQuery.
- (selector) queries or finds HTML elements.
- action() executes the jQuery behavior on the selected element(s).
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
For full documentation visit jquery.com.
ExpressJS 
Javascript Framework
Express.js is a minimal, fast, and flexible backend web application framework for Node.js designed to simplify building web servers and RESTful APIs. Instead of writing complex, repetitive low-level code using standard Node.js modules, Express.js provides a clean API to manage routes, handle incoming data, and integrate third-party tools.
More Information...
Core Features
-
Robust Routing: Map standard HTTP methods (like GET, POST, PUT, DELETE) directly to specific URL endpoints.
-
Middleware Architecture: Functions that run sequentially during the request-response cycle to perform tasks like parsing JSON data, logging requests, or managing user sessions.
-
Static File Serving: A built-in configuration tool to serve static assets like HTML files, CSS sheets, and images instantly.
-
Database Agnostic: Connects seamlessly to SQL or NoSQL engines including MongoDB, PostgreSQL, and MySQL using standard Node drivers.
Step-by-Step Practical Example
Follow these sequential steps to set up and execute an Express application.
- 1. Project Initialization
Create a dedicated project directory and configure your Node.js initialization file by executing these terminal commands:
mkdir express-demo
cd express-demo
npm init -y
- 2. Dependency Installation
Install the official framework package into your dependency folder:
npm install express
Create a file named app.js and insert this clean structural template demonstrating standard json routing and custom global middleware:
const express = require('express');
const app = express();
const PORT = 3000;
// Built-in middleware to parse incoming JSON bodies automatically
app.use(express.json());
// Custom Middleware: Logs incoming request paths to the console
app.use((req, res, next) => {
console.log(`[LOG]: ${req.method} request made to ${req.url}`);
next(); // Pass control forward to the next middleware or route handler
});
// Route 1: Default GET endpoint responding with simple text
app.get('/', (req, res) => {
res.send('Hello from the Express server!');
});
// Route 2: GET endpoint reading dynamic parameters from the URL
app.get('/users/:id', (req, res) => {
const userId = req.params.id;
res.send(`Viewing profile for user ID: ${userId}`);
});
// Route 3: POST endpoint receiving JSON payload data
app.post('/api/data', (req, res) => {
const receiveData = req.body;
res.json({
message: "Data processed successfully",
received: receiveData
});
});
// Start the server and bind to the specified port
app.listen(PORT, () => {
console.log(`Server successfully started at http://localhost:${PORT}`);
});
Start your server backend application from the terminal:
node app.js
Open http://localhost:3000/ inside any web browser to see the live output string. To test the data-focused POST route, tools like Postman or standard cURL execution blocks can be used to send JSON payloads to http://localhost:3000/api/data.
For full documentation visit expressjs.com.
Node
Javascript Framework
Node.js is a free, open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside a web browser, enabling developers to build scalable server-side applications. By utilizing Google Chrome's fast V8 engine, it unifies web development around a single language for both front-end and back-end tasks.
More Information...
Key Features of Node.js
-
Asynchronous and Event-Driven: It processes tasks concurrently without stopping or waiting for previous tasks to finish.
-
Non-Blocking I/O: Instead of creating a new thread for every network request, Node.js uses a single-thread event loop to handle thousands of connections efficiently.
-
Vast Ecosystem: Access millions of reusable code packages via the built-in npm (Node Package Manager) Registry.
Step-by-Step Example: Creating a Web Server
This example demonstrates how to create a basic HTTP server that handles web requests and responds with "Hello World".
Create a file named server.js on your computer using a code editor and paste the following code:
// Import the built-in HTTP module
const http = require('node:http');
// Define the server location parameters
const hostname = '127.0.0.1'; // Localhost
const port = 3000;
// Create the HTTP server
const server = http.createServer((req, res) => {
// Set the response HTTP status and header type
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
// Send the final response body text
res.end('Hello World\n');
});
// Configure the server to listen to the specified port
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
Open your system terminal, navigate to the folder containing your file, and execute the following command:
node server.js
Your terminal will display: Server running at http://127.0.0.1:3000. Open any web browser, visit that web address, and you will see Hello World displayed on the page.
What Can You Build with Node.js?
-
RESTful APIs: Fast backends to power mobile and desktop applications.
-
Real-Time Applications: Low-latency chat applications and online gaming servers.
-
Streaming Tools: Data processing software like on-the-fly video transcoding tools.Command Line Interfaces (CLIs): Devops automation and system scripting tools.
For full documentation visit nodejs.org.
Angular 
Javascript Framework
Angular is an open-source, TypeScript-based front-end web application framework developed and maintained by Google. It is explicitly designed for building robust, enterprise-scale Single-Page Applications (SPAs) by organizing code into reusable, component-based building blocks.
More Information...
Key Features of Angular
-
Component Architecture: Every application is built as a tree of encapsulated UI components.
-
TypeScript Native: Developed fully in TypeScript, providing static typing and early error detection.
-
Declarative Templates: Uses standard HTML enhanced with Angular-specific syntax to build dynamic views.
-
Built-in Ecosystem: Includes routing, form management, and HTTP client services natively out of the box.
Step-by-Step Practical Example
Modern versions of Angular utilize Standalone Components, eliminating the need for complex module configurations. Below is a code example demonstrating how to build a dynamic counter component.
- 1. The Component Logic (counter.component.ts)
This TypeScript file defines the component configuration, the UI layout template, and the application logic.
import { Component } from '@angular/core';
@Component({
selector: 'app-counter',
standalone: true,
template: `
<div class="counter-container">
<h2>Counter Application</h2>
<!-- Interpolation: Displays the value dynamically -->
<p class="count-display">Current Count: <strong>{{ count }}</strong></p>
<!-- Event Binding: Listens to click events -->
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>
</div>
`,
styles: [`
.counter-container { text-align: center; font-family: Arial, sans-serif; margin-top: 20px; }
.count-display { font-size: 1.2rem; }
button { margin: 5px; padding: 8px 16px; cursor: pointer; }
`]
})
export class CounterComponent {
// Application State
count: number = 0;
// Methods handling user behavior
increment(): void {
this.count++;
}
decrement(): void {
if (this.count > 0) {
this.count--;
}
}
}
- 2. How the HTML Works (index.html)
To insert this functional UI anywhere in your app, you simply use the custom CSS tag defined in the component's selector property:
<body>
<!-- Angular dynamically injects the Counter component right here -->
<app-counter></app-counter>
</body>
Core Concept Breakdown From the Example
-
Selector (app-counter): Acts as a custom HTML tag wrapper. Angular finds <app-counter> in your HTML files and renders this exact component inside it.
-
Interpolation ({{ count }}): The double curly braces bind the TypeScript data property directly into the view layout dynamically.
-
Event Binding ((click)="increment()"): Parentheses listen to DOM events. When a user clicks the button, Angular executes the corresponding method in the TypeScript file.
For full documentation visit openwebui.com.
Vue 
Javascript Framework
Vue.js (pronounced "view") is an open-source, progressive JavaScript framework used to build interactive user interfaces and Single-Page Applications (SPAs). It focuses on the front-end (the view layer) of a web application. It simplifies dynamic DOM rendering through reactive data binding.
More Information...
Key Characteristics
-
Progressive: You can easily drop Vue into a single HTML page as a lightweight script. Alternatively, you can scale it up to a massive enterprise framework using compilation tools like Vite.
-
Component-Based: Applications are broken down into self-contained, reusable blocks of markup and logic.
-
Reactive Data Binding: The user interface updates dynamically whenever the underlying data changes.
Code Example: A Reactive Counter
This example showcases Vue 3's modern Composition API and script setup syntax. It defines a button that tracks and displays how many times a user clicks it.
<script setup>
import { ref } from 'vue'
// Create a reactive state variable called "count", initialized to 0
const count = ref(0)
// A standard function to change the state
function increment() {
count.value++
}
</script>
<template>
<div class="counter-box">
<!-- Mustache tags {{ }} bind the JavaScript data to the HTML text -->
<p>Current Count: {{ count }}</p>
<!-- @click listens to mouse clicks and runs the increment function -->
<button @click="increment">Click Me!</button>
</div>
</template>
<style scoped>
.counter-box {
padding: 20px;
text-align: center;
border: 1px solid #ccc;
border-radius: 8px;
}
button {
background-color: #42b883; /* Vue brand green color */
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
</style>
Breakdown of the Code Sections
-
<script setup>: This houses the JavaScript logic. The ref() function tells Vue to actively monitor the count variable. When it changes, Vue automatically updates the webpage.
-
<template>: This holds the structural HTML code. It implements specialized shorthand attributes called directives, such as @click, to listen directly to native DOM elements and trigger actions.
-
<style scoped>: This contains the standard CSS layout and styles. The scoped keyword ensures that these style definitions affect only this specific layout element, preventing unexpected style rule overlaps across your application.
For full documentation visit vuejs.org.
Svelte 
Javascript Framework
Svelte is a modern frontend JavaScript framework that builds user interfaces by shifting work out of the browser and into a compile step. Unlike traditional frameworks like React or Vue—which use a Virtual DOM to detect changes at runtime—Svelte compiles your code down to tiny, vanilla JavaScript modules that surgically update the DOM exactly where needed. This results in faster application loading times, exceptional performance, and significantly less boilerplate code.
More Information...
Key Benefits of Svelte
-
No Virtual DOM: Svelte compiles code to surgically update the exact DOM nodes when state changes.
-
Less Code: It uses regular HTML, CSS, and JavaScript syntax with minimal boilerplate.
-
Truly Reactive: State changes trigger UI updates automatically without complex state management APIs.
-
Scoped Styling: CSS written inside a component is scoped to that component automatically.
Code Example: An Interactive Counter
Svelte components are written in .svelte files. They naturally combine a <script> block, standard markup, and a <style> block in a single file.
Below is an example of a counter component utilizing Svelte 5's modern $state rune for fine-grained reactivity:
<script>
// 1. Define reactive state using the $state rune
let count = $state(0);
// 2. Define standard JavaScript functions to alter state
function increment() {
count += 1;
}
function decrement() {
count -= 1;
}
</script>
<div class="counter-card">
<!-- 3. Output state directly in the HTML markup using curly braces -->
<h2>Current Count: {count}</h2>
<div class="button-group">
<!-- 4. Handle user events using standard property attributes -->
<button onclick={decrement}>- Decrease</button>
<button onclick={increment}>+ Increase</button>
</div>
</div>
<style>
/* 5. These styles are completely scoped to this component */
.counter-card {
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
text-align: center;
max-width: 300px;
}
.button-group button {
margin: 5px;
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
</style>
How the Example Works
-
State Declaration: The variable count is wrapper in $state(), letting the Svelte compiler know it should track changes to this variable.
-
Dynamic UI Rendering: The template uses basic curly braces {count} to merge JavaScript values straight into the HTML.
-
Event Listeners: The onclick={increment} syntax links the button natively to the JavaScript function without wrapper abstractions.
-
Build Compilation: When compiled, Svelte turns this into a few lines of raw JavaScript that directly updates the text node of the <h2> tag the moment a button is clicked.
For full documentation visit svelte.dev.
Astro 
Javascript Framework
Astro.js is a modern JavaScript web framework designed for building fast, content-driven websites like blogs, portfolios, marketing pages, and e-commerce stores. Its core philosophy revolves around delivering zero client-side JavaScript by default, using a server-first architecture that pre-renders pages into lightweight, static HTML and CSS before sending them to the browser.
More Information...
Core Concepts
-
Islands Architecture: Most of your website renders as static, lightning-fast HTML. If a specific piece of your page requires interactivity (like an image carousel or shopping cart), Astro isolates that component into an independent "island" of JavaScript.
-
Framework Agnostic: You can write UI components using your favorite frontend framework—such as React, Vue, Svelte, or SolidJS—and mix them seamlessly inside an Astro project.
-
Server-First Architecture: Astro leverages server-side rendering (SSR) or static site generation (SSG) to render components on the server or during your build process, stripping out any unnecessary JavaScript before sending the page to the browser.
Practical Example
Astro uses files with the .astro extension. Their structure is split into two halves: the Component Script (Frontmatter) where you write server-side JavaScript/TypeScript, and the Component Template which is HTML mixed with dynamic expressions.
- 1. A Simple Astro Component (src/components/UserCard.astro)
The code block below demonstrates how to fetch data from an external API on the server and render it using vanilla HTML.
---
// --- Component Script (Frontmatter) ---
// This code runs exclusively on the server at build time or on demand.
// It never ships to the user's browser!
const response = await fetch('https://typicode.com');
const user = await response.json();
// You can also accept component props
const { customGreeting = "Hello" } = Astro.props;
---
<!-- Component Template (HTML + Expressions) -->
<div class="user-card">
<h2>{customGreeting}, my name is {user.name}!</h2>
<p>Email: <a href={`mailto:${user.email}`}>{user.email}</a></p>
<p>Company: {user.company.name}</p>
</div>
<style>
/* Scoped CSS: These styles will only affect this component */
.user-card {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 8px;
background-color: #f9f9f9;
}
h2 {
color: #333;
}
</style>
- 2. Using the Component in a Page (src/pages/index.astro)
Astro uses a file-based routing system. Any .astro file placed inside the src/pages/ folder automatically becomes a public URL on your website.
---
// Import your layout or custom components
import UserCard from '../components/UserCard.astro';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My First Astro Site</title>
</head>
<body>
<h1>Welcome to Astro!</h1>
<!-- Render the component and pass a prop -->
<UserCard customGreeting="Welcome" />
</html>
</html>
Adding Interactivity (Islands)
If you need a highly interactive client-side component (for example, a dynamic interactive counter built in React), you simply use a client directive to tell Astro to load the JavaScript for it:
---
import ReactCounter from '../components/ReactCounter.jsx';
---
<!-- This tells Astro to hydrate the React component as soon as the page loads -->
<ReactCounter client:load />
<!-- This tells Astro to only load the JavaScript when the element scrolls into view -->
<ReactCounter client:visible />
For full documentation visit astro.build.
Redux 
Javascript Framework
Redux is an open-source JavaScript library used for managing and centralizing application state. It helps you write applications that behave consistently, are easy to test, and run smoothly across client, server, and native environments.
More Information...
Core Architecture (The One-Way Data Flow)
Redux relies on a strict unidirectional data flow to make state changes predictable.
┌────────┐ Dispatches ┌────────┐
│ UI │ ─────────────────> │ Action │
└────────┘ └────────┘
▲ │
│ Reads │ Sent to
│ ▼
┌────────┐ Updates State ┌─────────┐
│ Store │ <───────────────── │ Reducer │
└────────┘ └─────────┘
-
Store: The single source of truth that holds your entire application's state tree object.
-
Actions: Plain JavaScript objects with a type field that describe what happened in the application.
-
Reducers: Pure functions that take the current state and an action, then return an entirely new state object.
The Three Core Principles
-
Single Source of Truth: The global state of your application is stored in an object tree within a single store.
-
State is Read-Only: The only way to change the state is to emit (dispatch) an action.
-
Changes are Made with Pure Functions: Reducers must never mutate the existing state directly; they must return a new state object.
Modern Redux: Redux Toolkit (RTK)
Writing manual, vanilla Redux used to require extensive boilerplate code. The official Redux team now exclusively recommends using the Redux Toolkit (RTK).
RTK significantly modernizes development by including Immer internally. This allows you to safely write simpler "mutative" code (like state.value += 1) while automatically handling immutable copies under the hood. It also integrates Redux Thunk for asynchronous logic and seamlessly pairs with the Redux DevTools Browser Extension for time-travel debugging.
Basic Code Example (Using RTK)
Here is how you define and use a state slice using the Redux Toolkit Quick Start patterns:
import { createSlice, configureStore } from '@reduxjs/toolkit';
// 1. Create a Slice containing the data and updating logic
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; }, // Immer handles immutability safely
decrement: (state) => { state.value -= 1; }
}
});
export const { increment, decrement } = counterSlice.actions;
// 2. Configure the Store
const store = configureStore({
reducer: { counter: counterSlice.reducer }
});
// 3. Dispatch an Action to trigger state changes
store.dispatch(increment());
console.log(store.getState().counter.value); // Output: 1
When Should You Use Redux?
According to the official Redux Essentials Guide, you do not need Redux for every project. You should consider it when:
-
You have large amounts of global state needed by many components across your app.
-
The application state is updated frequently with complex update rules.
-
You need to trace exactly when, where, and why a state change occurred via advanced debugging.
For full documentation visit redux.js.org.
Electronjs 
Javascript Framework
ElectronJS is an open-source framework used to build cross-platform desktop applications using web technologies like JavaScript, HTML, and CSS. It achieves this by combining the Chromium rendering engine with the Node.js runtime environment into a single package, enabling your app to run seamlessly on Windows, macOS, and Linux. High-profile desktop applications like Visual Studio Code, Discord, Figma, and Slack are built using Electron.
More Information...
Core Architecture
Electron applications operate using a multi-process architecture consisting of two primary process types:
-
Main Process: Runs the backend Node.js environment, controls the application lifecycle, and manages native OS integrations like menus, notifications, and file systems.
-
Renderer Process: Renders individual user interface windows using Chromium, operating essentially like a standard web page browser window.
Step-by-Step "Hello World" Example
To build a minimal Electron application, follow these sequential steps to set up the necessary file configurations.
- 1. Initialize the Project
Create a new directory, navigate into it, and initialize a Node.js project configuration file.
mkdir my-electron-app
cd my-electron-app
npm init -y
Install the official Electron development package using the Node Package Manager.
npm install electron --save-dev
Configure your entry file and add a shortcut execution script inside your package.json file.
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
- 4. Create the User Interface (index.html)
Design a simple interface structure using markdown standard HTML.
<!DOCTYPE html>
<html>
<head>
<title>Hello Electron</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to your first Electron application.</p>
</body>
</html>
- 5. Write the Main Process (main.js)
Create the core script that initializes a native application window and injects your standard HTML user interface.
const { app, BrowserWindow } = require('electron');
function createWindow() {
// Instantiate a browser window with specified dimensions
const win = new BrowserWindow({
width: 800,
height: 600
});
// Load the HTML file into the window
win.loadFile('index.html');
}
// Trigger window generation once Electron initializes completely
app.whenReady().then(() => {
createWindow();
// Recreate a window on macOS when the dock icon is clicked
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// Quit the application when all windows are closed (except on macOS)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
Execute your project directly using your defined application startup script.
npm start
Distribution Summary
When you are ready to distribute your finished application to standard users, tools like Electron Forge compile your raw codebase into platform-specific native executable software installers (such as .exe files for Windows or .app packages for macOS).
For full documentation visit electronjs.org.
Development Frameworks
JS Frameworks
CSS Frameworks
More Frameworks
---
title: JS Frameworks
text: Javascript Frameworks mainly for Frontend Development
image: /assets/svg/nodejs-alt.svg
link:
target:
---
