Home / MAD2 / Week 3

Week 3 · The web frontend: SPAs, browser storage and tooling

The one-minute story

By the end of this week you can:

• compare multi-page and single-page apps and explain client-side routing;
• choose between cookies, localStorage, sessionStorage and IndexedDB and predict storage code;
• explain what a service worker and a PWA are;
• explain why frameworks and the virtual DOM exist, and what package.json, node_modules, Vite or webpack and Babel do;
• say where the state of a web application lives, and why HTTP being stateless matters.

Words you need

Idea 1: Multi-page apps, single-page apps and routing

This is why exam questions give both .../records/1 and .../#/records/1 and ask which one renders: in hash mode the router only reads what is after #. In history mode /#/inventory/102 does not match the route /inventory/:id, because the path is then just /.

A SPA still talks to a backend: your Flask API returns JSON and the Vue code draws it (week 2's fetch).

Idea 2: Browser storage

A web page can keep data in the browser in four main ways. Know their differences cold; the papers ask matching and "which statement is true" questions.

All storage is per origin and per browser: nothing is shared across devices or across different websites. Storage is not secure: any script on the page can read it, so never keep passwords there (tokens are stored there in practice, with that risk).

// browser
localStorage.setItem("theme", "dark");           // value becomes the string "dark"
localStorage.getItem("theme");                   // "dark"
localStorage.getItem("missing");                 // null   (getItem returns null if absent)
localStorage.missing;                            // undefined   (property style returns undefined)
localStorage.setItem("n", 5);                    // stored as "5"
typeof localStorage.getItem("n");                // "string"
localStorage.setItem("user", JSON.stringify({ id: 1 }));
JSON.parse(localStorage.getItem("user")).id;     // 1    objects need JSON both ways
localStorage.removeItem("theme"); localStorage.clear();

// browser
localStorage.setItem('counter', '0');
sessionStorage.setItem('total', '5');
for (let i = 0; i < 3; i++) {
  let counter = localStorage.getItem('counter');
  let total = sessionStorage.getItem('total');
  counter += 2;
  total *= 2;
  localStorage.setItem('counter', counter);
  sessionStorage.setItem('total', total);
}
sessionStorage.clear();
console.log(localStorage.getItem('counter'));
console.log(sessionStorage.getItem('total'));

// browser: runs on every page load
let name, age;
try {
  const parts = localStorage.getItem("name").split(" ");   // fails with TypeError on null
  name = parts[0];
  age = parts[1];
  localStorage.setItem("name", parts[0] + " " + name);     // writes back
} catch {
  name = "Default"; age = "Default";
}

// browser
sessionStorage.setItem("username", "course_user");
const a = sessionStorage.getItem("username");
sessionStorage.removeItem("username");
const b = sessionStorage.getItem("username");
sessionStorage.clear();
const c = sessionStorage.username;

Idea 3: Statelessness and where state lives

HTTP is stateless: each request stands alone, and the server does not automatically remember the previous one. Yet apps remember you are logged in and what is in your cart. The state is kept somewhere and explicitly sent along with requests.

• UI state (ephemeral state): short-lived interface facts such as a loading spinner, which tab is selected, a dropdown open or closed. It lives in the component and can be lost.
• Application state: real data (users, products), usually owned by the server, and cached in the frontend (week 4's Vuex).

Idea 4: Why frameworks exist

With plain JavaScript you change the page by hand:

// browser: the manual way
let count = 0;
document.querySelector("#plus").addEventListener("click", () => {
  count++;
  document.querySelector("#out").textContent = count;      // you must remember to update the page
});

With ten pieces of data shown in five places, you will forget one, and the page and the data drift apart. A framework makes the page a function of the state: change the data and the framework updates the page.

<div id="app">{{ count }} <button @click="count++">+</button></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({ el: "#app", data: { count: 0 } });    // Vue 2: click changes data, page follows
</script>

• Virtual DOM. Touching the real DOM is slow. The framework keeps a light JavaScript copy of the page. When data changes it builds a new virtual tree, compares it to the old one (the "diff") and patches only the real nodes that differ. So Vue "detects the change and updates efficiently"; it does not reload the page or rebuild everything.
• Components. The page is built from reusable pieces (a navbar, a card), each with its own template, data and methods. Advantages: reusability, maintainability, easier UI management.
• Reactivity (Vue 2). Vue wraps your data properties so it knows when they change. A limit: a property added later, or arr[0] = x, is not noticed; use this.$set(...) or array methods like push. (Vue 3 uses Proxies and has no such limit.)

The course uses Vue 2 with Vue Router 3 and Vuex 3. In newer Vue (3) the same ideas apply, with Pinia replacing Vuex.

Idea 5: Tooling, npm, bundlers and dev servers

Two ways to start with Vue:

npm and package.json. npm downloads packages. The project's package.json lists them. npm install reads it and fills the node_modules folder (huge; never commit it, it is rebuilt from package.json and package-lock.json).

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": { "vue": "^2.6.14" },
  "devDependencies": { "@vue/cli-service": "^5.0.0", "babel-eslint": "^10.1.0" }
}

• dependencies are needed by the running app; devDependencies only while developing and building.
• ^2.6.14 means "2.6.14 or any newer 2.x" (same major version); ~2.6.14 allows only newer patches.
• scripts are run with npm run name. npm run serve starts the dev server (usually localhost:8080) with hot reload. npm run build makes the optimized production files in the dist folder and does not start a server.
• npm install vue@2 adds a dependency; npm install -D pkg adds a dev dependency; npx runs a tool without installing it globally.

What the build tools do.

• Bundler (webpack inside Vue CLI; Vite in the newer Vue starter): follows your imports, joins many files into a few, minifies them, removes unused code (tree-shaking) and handles .vue files, CSS and images. Webpack bundles first and is configuration-heavy; Vite serves your modules directly during development, so it starts and updates very fast.
• Transpiling (Babel): rewrites new syntax (arrow functions, ?., classes) into older JavaScript so old browsers can run it.
• Dev server + hot reload (HMR): save a file and the changed part is swapped into the open page, often keeping your current state.

Idea 6: Service workers, PWAs, responsive design and accessibility

Web worker: runs JavaScript on a separate thread so heavy work does not freeze the page. It cannot touch the DOM; it talks to the page with postMessage.

Service worker: a special worker that sits between your page and the network. It can intercept requests, answer from a cache, work offline, and receive push notifications. It runs only on HTTPS (and localhost for development).

// browser
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");        // sw.js decides what to cache and serve
}

PWA (Progressive Web App): an ordinary web app plus

• a web app manifest (a JSON file: name, icons, start URL, display mode), which lets it be installed on the home screen and look like a native app;
• a service worker, giving offline support and fast loads;
• served over HTTPS.

It needs no app store and no native code, and it can work with a poor or no connection.

Responsive design: one page that adapts to any screen size. Tools: the viewport tag, CSS media queries, flexbox and grid, relative units.

<meta name="viewport" content="width=device-width, initial-scale=1">

.card { width: 30%; }
@media (max-width: 600px) { .card { width: 100%; } }   /* on a phone, cards go full width */

Accessibility reminder: use real elements (button, label, headings), give images alt text, make everything usable with a keyboard, keep good colour contrast, and let screen readers understand the page (ARIA only when plain HTML is not enough).

Idea 7: Debugging the frontend with dev tools

Press F12. The tabs you use:

The Vue devtools extension adds a tab showing components, their data, and Vuex state. Debug order: Console for the error message, Network for what the server answered (status, response body), Application for what is stored.

Exam radar

Quick quiz

Viva: say it out loud

Recap

Practise with real exam questions

These come straight from past papers (with the real figures and the official answer key). Open 60 real questions on this week   All Quiz 1 papers