optional · CSS study notes
8. Classifications of Web Architecture
CSS Optional — Paper-II, Section-B · P-II.VI.8 · How web architectures are grouped. Kappel et al. use three categories — layered, integration and data-aspect architectures — each of which has its own page in this section. This page gives the big picture plus modern classifications.
1. Kappel's Classification
| Category | Focus | Examples |
|---|---|---|
| Layered architectures | Separating the application into tiers/layers | 2-layer client-server, n-layer, JSP Model 2, Struts, OOHDM-based designs |
| Integration architectures | Connecting the web app with existing/external systems | EAI, middleware, web services, portals, ESB |
| Data-aspect architectures | How different kinds of data are stored, accessed and delivered | Database-centric, web document management (CMS), multimedia/streaming architectures |
Kappel also distinguishes generic architectures (general-purpose infrastructure: web servers, application servers, frameworks) from application-specific architectures (the design of a particular system built on them).
2. Classification by Number of Tiers
| Type | Structure | Use |
|---|---|---|
| 1-tier | Everything on one machine | Local tools, prototypes |
| 2-tier (client-server) | Client + server (database) | Small intranet systems |
| 3-tier | Presentation + business logic + data | Most web applications |
| n-tier | More tiers: caching, integration, services | Large enterprise and high-traffic sites |
3. Classification by Where Pages Are Built (rendering)
| Architecture | How it works | Pros | Cons |
|---|---|---|---|
| Static site | Pre-written HTML files served as-is | Fast, secure, cheap | No personalization; manual updates |
| Server-side rendered (dynamic) | Server builds HTML per request (PHP, JSP, ASP.NET) | SEO-friendly, works without JS | Full page reloads; server load |
| Single-page application (SPA) | One HTML shell; JavaScript renders views and fetches JSON via APIs | App-like, smooth UX | Initial load, SEO effort, heavy JS |
| Hybrid / isomorphic (SSR + hydration) | Server renders first view; client takes over | Fast first paint + interactivity | More complex (Next.js, Nuxt) |
| Static generation / JAMstack | Pages pre-built at deploy time; dynamic parts via APIs; served from CDN | Very fast and scalable | Rebuilds for content changes |
| Progressive Web App (PWA) | Web app with service worker, manifest, offline support, installable | App-like, offline | Limited device APIs on some platforms |
4. Classification by Deployment / Structure
- Monolithic: one deployable unit containing all features — simple to start, hard to scale parts independently.
- Service-oriented (SOA): coarse-grained shared services over an enterprise service bus.
- Microservices: fine-grained independent services, each with its own database.
- Serverless (FaaS): functions run on demand (AWS Lambda); no server management; pay per execution.
- Peer-to-peer: nodes act as both client and server (WebRTC).
- Centralized vs distributed: one data centre vs geographically distributed servers/CDNs.
🎯 CSS Exam Angle
Start with Kappel's three categories (this is what the syllabus wording follows), then add tier-based and rendering-based classifications with a table each. One example per class shows applied understanding.
⚠️ MCQ Traps
- SPA does not reload the page; data comes as JSON through APIs.
- Serverless still uses servers — you just don't manage them.
- Integration architectures connect systems; data-aspect architectures deal with storing/delivering data.
- A PWA needs a service worker and a web app manifest.
✅ Self-Check (with Answers)
Q1. Name Kappel's three categories of web architecture.
Ans: Layered architectures, integration architectures and data-aspect architectures.
Q2. Compare server-side rendering with a single-page application.
Ans: SSR builds complete HTML on the server for each request — good for SEO and first load, but every navigation reloads the page. An SPA loads once and then renders views in the browser from JSON API data — smooth, app-like interaction but heavier JavaScript and extra SEO work.
Q3. Which architecture suits a university's news-and-events website with rare updates and huge traffic on result days?
Ans: A static/JAMstack site served from a CDN — fast, cheap and able to absorb spikes; any dynamic parts (search, forms) via APIs.
Q4. What is the difference between monolithic and microservice architectures?
Ans: A monolith is built and deployed as one unit with a shared database; microservices split functionality into small independent services, each deployable, scalable and owning its data.
Q5. What is serverless computing?
Ans: A cloud model where developers deploy functions that run on demand; the provider handles servers, scaling and availability, and billing is per execution.