Frontend for Backend Engineers

“You can’t build a great API if you don’t know how it’s consumed.”

1. How the Web Works (The Critical Rendering Path)

When a user types google.com:

DNS Lookup: Find IP address.
TCP Handshake: Connect to server.
HTTP Request: GET /index.html.
Parsing: Browser parses HTML -> DOM Tree. Parsers CSS -> CSSOM Tree.
Render Tree: DOM + CSSOM.
Layout (Reflow): Calculate geometry (width/height).
Paint: Draw pixels.

2. Core Concepts

DOM (Document Object Model)

The tree structure of objects that the browser creates to represent the page.

// Manipulating the DOM
const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => {
    document.body.style.backgroundColor = 'red';
});

Event Loop (JavaScript Concurrency)

JS is single-threaded. How does it handle async?

Call Stack: Sync code.
Web APIs: setTimeout, fetch (Browser handles these).
Callback Queue: Completed async tasks wait here.
Event Loop: Checks “Is Stack empty? Push Queue to Stack.”

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
// Output: 1, 3, 2

3. CSS Layouts (Flexbox vs Grid)

Flexbox (1-Dimensional)

Great for rows OR columns (navbars, centering).

.container {
    display: flex;
    justify-content: center; /* Main Axis (Horizontal) */
    align-items: center;     /* Cross Axis (Vertical) */
}

CSS Grid (2-Dimensional)

Great for page layouts (rows AND columns).

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3 columns */
    gap: 10px;
}

4. React.js Crash Course

Components (Props vs State)

Props: Read-only arguments passed down (Parent -> Child).
State: Private data managed within a component (can change strings).

Hooks (Functional Components)

1. useState: managing state.

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

2. useEffect: Side effects (API calls, subscriptions). Replaces componentDidMount, componentDidUpdate.

import { useEffect, useState } from 'react';

function User({ id }) {
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetch(`/api/users/${id}`)
            .then(res => res.json())
            .then(data => setUser(data));
    }, [id]); // Re-runs when 'id' changes

    if (!user) return <div>Loading...</div>;
    return <h1>{user.name}</h1>;
}

The Virtual DOM

React keeps a lightweight copy of the DOM. When state changes:

React updates Virtual DOM.
Compares Virtual DOM vs Real DOM (Diffing).
Updates only changed elements in Real DOM (Reconciliation).

Home