Chapter 1 — Computing systems
Lesson map
Lesson 01 published. Map, example, EX001.
flowchart TD
N0["Learning outcomes"]
N1["1.1 The case"]
N2["1.2 Parts of a web app"]
N3["1.3 Shared components"]
N4["1.4 Third-party code"]
N5["1.5 Responsibility"]
N6["1.6 What was missing"]
N7["Synthesis"]
N0 --> N1 --> N2 --> N3 --> N4 --> N5 --> N6 --> N7
N7 --> EX["Worked example"]
EX --> Q["Exercise EX001"]
Logical drawing
flowchart LR
N0["Learning outcomes"]
N1["1.1 The case"]
N2["1.2 Parts of a web app"]
N3["1.3 Shared components"]
N4["1.4 Third-party code"]
N5["1.5 Responsibility"]
N6["1.6 What was missing"]
N7["Synthesis"]
N0 --> N1 --> N2 --> N3 --> N4 --> N5 --> N6 --> N7 --> Q["EX001"]
[Learning outcomes]
|
v
[1.1 The case]
|
v
[1.2 Parts of a web app]
|
v
[1.3 Shared components]
|
v
[1.4 Third-party code]
|
v
[1.5 Responsibility]
|
v
[1.6 What was missing]
|
v
[Synthesis]
|
v
[Worked example] --> [Exercise EX001]
Learning outcomes
You will (1) describe the parts of a hosted web application; (2) explain how client projects share components; (3) identify where third-party code runs; (4) introduce the course case.
1.1 The case
Diego Ramos is a technologist student at the fictional Southport Polytechnic. His three-year course includes a long placement at the fictional Brightwave Digital, a small agency that builds and hosts websites and web apps for local organisations. His mentor is Aiko Mori, Brightwave's lead developer. In January, a penetration tester hired by Brightwave's client, the fictional Greenleaf Veterinary Group, reported that the booking site's pet-record upload feature used upload-kit 3.1.0, a library with a published high-severity advisory. Brightwave fixed Greenleaf within a day, but then needed three days of manual searching to find which other client projects used the same library. One more, museum-tickets, was affected. Diego's course follows how Brightwave makes such questions answerable in minutes.
1.2 Parts of a web app
Each client site has a browser front end, an application server, a database and file storage, running on a cloud hosting account managed by Brightwave. Code lives in repositories; a build service turns code into deployable packages. For Greenleaf these parts map onto the January problem directly. The pet-record upload runs in the application server, the uploaded files land in file storage, and upload-kit is one of the libraries packaged into the server by the build service. Diego learns to ask, for each part, who at Brightwave configures it and which client data passes through it.
1.3 Shared components
Brightwave reuses libraries across clients: the same upload library, forms library and date utilities appear in many projects. Reuse saves time but means one flaw affects many clients at once. The January advisory showed the real cost of this sharing for Brightwave's clients. Because upload-kit sat in a common starting template, the same flaw could have been present in any project built from it, and nobody could say which ones without opening every repository. Later in the placement Diego counts how many clients each library serves, because the widest-shared libraries are where one advisory creates the most work.
1.4 Third-party code
Most code in each project comes from open-source packages. Zimmermann et al. (2019) showed that a small number of packages and maintainers can reach a large share of an ecosystem; agencies concentrate this risk further by reusing the same packages across clients. For Greenleaf, the nine direct libraries on Diego's diagram pull in further libraries of their own, so the code actually installed is much larger than the list the developers chose. A flaw can arrive through any of them, which is why later chapters track transitive dependencies as well as direct ones.
1.5 Responsibility
Brightwave is responsible to each client for keeping their site secure, including the libraries it chose. Contracts say so. That responsibility is why the Greenleaf report reached Brightwave rather than the library's authors: the clinic paid Brightwave to run a safe booking site and expects the agency to notice and fix flawed components. Brightwave cannot fix upload-kit itself, but it chooses which version each client runs and how quickly an update reaches production. In January it could not even tell the clinic, or its other clients, which sites ran the flawed version. Diego's placement work therefore treats every client contract as a promise that depends on knowing the agency's own components.
1.6 What was missing
Brightwave had no central list of which client used which library version. Each project's manifest held the answer, but nobody had combined them. The pieces of the answer already existed in January, spread across separate repositories. Every one of the 23 client repositories declared its libraries, yet the search took three days because each repository had to be opened, its manifest read and the upload-kit version compared by hand. Nothing joined those manifests into a single view that could be queried when an advisory arrived. Building that missing view becomes Diego's first real task and the base for almost everything later in the course.
Worked example
Diego's first task is to draw one client system end to end: the Greenleaf booking site. His diagram shows the browser, server, database, file storage, payment link and nine direct libraries. Aiko asks him to add arrows showing where uploaded files go, which reveals that uploads are stored in the same storage bucket as the site's images.
Synthetic case. Southport Polytechnic, Brightwave Digital, Greenleaf Veterinary Group, their staff, projects and all events are synthetic.
Errors and limits
Diagrams show intended design; real configuration can differ and must be checked.
Exercises
- EX001 — January problem. What made the January advisory hard to handle? Rubric: 3 = no central list; 3 days manual search; 2 = partial; 1 = vague; 0 = none.
- EX002 — Reuse trade-off. What is the trade-off of reusing libraries across clients? Rubric: 3 = saves time; one flaw affects many; 2 = partial; 1 = vague; 0 = none.
- EX003 — Upload storage. What did the arrows reveal? Rubric: 3 = uploads stored with site images; 2 = partial; 1 = vague; 0 = none.
Synthesis
Know the parts of each system, the shared components and where third-party code runs.