Chapter 12 of 12
12.1 Capstone 1: Custom Vanilla JS Single Page Application Framework
Build a client-side routing SPA framework from scratch using History API (pushState, popstate), view component rendering, and centralized store.
Mini SPA Client Routerjavascript
class Router {
constructor(routes) {
this.routes = routes;
window.addEventListener('popstate', () => this.handleRoute());
}
navigate(path) {
window.history.pushState({}, '', path);
this.handleRoute();
}
handleRoute() {
const path = window.location.pathname;
const view = this.routes[path] || this.routes['404'];
document.getElementById('app').innerHTML = view();
}
}12.2 Capstone 2: Real-time WebSocket Dashboard with IndexedDB
Build a live streaming dashboard with auto-reconnecting WebSocket connections and offline persistence using IndexedDB.
12.3 Capstone 3: Building a Proxy-Based Reactive Framework
Miniature Reactive Frameworkjavascript
function Component({ state, template }) {
const container = document.createElement('div');
const reactiveState = new Proxy(state, {
set(target, prop, val) {
target[prop] = val;
render(); // Re-render on state change!
return true;
}
});
function render() {
container.innerHTML = template(reactiveState);
}
render();
return { element: container, state: reactiveState };
}