JavaScript Frameworks & Libraries

Popular tools that make JavaScript development easier

Popular Frameworks

⚛️

React

Frontend Library

A JavaScript library for building user interfaces with a component-based architecture

Pros:

Component-basedVirtual DOMLarge ecosystemStrong community

Cons:

Learning curveRapid changesJSX syntax

Used by:

FacebookNetflixAirbnbInstagram

💚

Vue.js

Frontend Framework

Progressive framework with gentle learning curve and excellent documentation

Pros:

Easy to learnGreat documentationFlexibleGreat tooling

Cons:

Smaller ecosystemLess job marketMainly one maintainer

Used by:

GitLabAdobeNintendoBMW

🅰️

Angular

Frontend Framework

Full-featured framework for building large-scale applications

Pros:

Full frameworkTypeScript by defaultPowerful CLIEnterprise-ready

Cons:

Steep learning curveVerboseHeavy framework

Used by:

GoogleMicrosoftDeutsche BankSamsung

🟢

Node.js

Backend Runtime

JavaScript runtime for server-side development

Pros:

Same language as frontendFast executionLarge package ecosystem

Cons:

Single-threadedNot ideal for CPU-intensive tasks

Used by:

NetflixUberLinkedInPayPal

React Deep Dive

React Components and JSX

// Functional Component with Hooks
import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchUser() {
            try {
                const response = await fetch(`/api/users/${userId}`);
                const userData = await response.json();
                setUser(userData);
            } catch (error) {
                console.error('Failed to fetch user:', error);
            } finally {
                setLoading(false);
            }
        }

        fetchUser();
    }, [userId]);

    if (loading) return <div>Loading...</div>;
    if (!user) return <div>User not found</div>;

    return (
        <div className="user-profile">
            <img src={user.avatar} alt={user.name} />
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <UserStats stats={user.stats} />
        </div>
    );
}

// Custom Hook
function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            return initialValue;
        }
    });

    const setValue = (value) => {
        try {
            setStoredValue(value);
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.error('Error saving to localStorage:', error);
        }
    };

    return [storedValue, setValue];
}

Node.js Deep Dive

Express.js Server

// Express.js Server Setup
const express = require('express');
const cors = require('cors');
const helmet = require('helmet');
const rateLimit = require('express-rate-limit');

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(helmet()); // Security headers
app.use(cors()); // Enable CORS
app.use(express.json()); // Parse JSON bodies
app.use(express.urlencoded({ extended: true })); // Parse URL-encoded bodies

// Rate limiting
const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 100 // limit each IP to 100 requests per windowMs
});
app.use('/api/', limiter);

// Routes
app.get('/api/users', async (req, res) => {
    try {
        const users = await User.find().select('-password');
        res.json(users);
    } catch (error) {
        res.status(500).json({ error: 'Failed to fetch users' });
    }
});

app.post('/api/users', async (req, res) => {
    try {
        const { name, email, password } = req.body;
        
        // Validation
        if (!name || !email || !password) {
            return res.status(400).json({ error: 'Missing required fields' });
        }
        
        const user = new User({ name, email, password });
        await user.save();
        
        res.status(201).json({ message: 'User created successfully' });
    } catch (error) {
        res.status(500).json({ error: 'Failed to create user' });
    }
});

// Error handling middleware
app.use((error, req, res, next) => {
    console.error(error.stack);
    res.status(500).json({ error: 'Something went wrong!' });
});

app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

Framework Comparison

Framework	Learning Curve	Performance	Best For
React	Moderate	High	Complex UIs, SPAs
Vue.js	Easy	High	Rapid prototyping, PWAs
Angular	Steep	High	Enterprise apps
Node.js	Moderate	High (I/O)	APIs, Real-time apps

Previous: Fundamentals Next: Async Programming