FTM401 · The FTM Client Surfaces
Learning materials — teaching, weekly quizzes, weekly tests. Examination paper — timed paper with marking guide.
Credits 4 · Hours 40 · Prereqs FTM301, CS301 · Semester 4
Source courses
Section titled “Source courses”No single course covers FTM’s four surfaces. Four real sources, each for one slice:
University of Helsinki Full Stack Open — https://fullstackopen.com/en/ Parts (as published): 0 Fundamentals of Web apps · 1 Introduction to React · 2 Communicating with server · 3 Programming a server with NodeJS and Express · 4 Testing Express servers · 5 Testing React apps, React Router · 6 Advanced state management · 7 Custom hooks, esbuild · 10 React Native · 11 CI/CD · 12 Containers · 13 Using relational databases. (8 GraphQL, 9 TypeScript and 14 Next.js have moved to courses.mooc.fi.)
Next.js official Learn (App Router) — https://nextjs.org/learn — 16 chapters: Introduction, Getting Started, CSS Styling, Optimizing Fonts and Images, Creating Layouts and Pages, Navigating Between Pages, Setting Up Your Database, Fetching Data, Static and Dynamic Rendering, Streaming, Adding Search and Pagination, Mutating Data, Handling Errors, Improving Accessibility, Adding Authentication, Adding Metadata.
Next.js caching docs — https://nextjs.org/docs/app/getting-started/caching —
the current model is Cache Components (cacheComponents: true), the
'use cache' directive, cacheLife profiles and <Suspense> for uncached data.
Read this before the Learn course: Learn predates Cache Components and still
teaches the older revalidate/fetch options.
web.dev — Core Web Vitals (https://web.dev/articles/vitals): LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1, all at the 75th percentile. Performance course: https://web.dev/learn/performance. Accessibility: MDN https://developer.mozilla.org/en-US/docs/Learn/Accessibility
Honest gap: no fetched source teaches ISR + CDN caching on FTM’s own Fastly/nginx stack. Write that part against the actual config.
Objectives
Section titled “Objectives”- Given a screen, name the surface, the service, and the file.
- Change a public page without breaking its cacheability.
- Work with the dashboard’s Unpoly/Alpine conventions rather than against them.
- Know what mobile gets from
api_v2and what it does not.
Weekly map
Section titled “Weekly map”| Wk | Source | Topic |
|---|---|---|
| 1 | FSO parts 0–1 | four surfaces and ownership; React fundamentals |
| 2–3 | FSO part 2 | communicating with a server; React Query patterns |
| 4 | Next Learn 02–05 | layouts, pages, navigation, App Router structure |
| 5 | Next Learn 07–09 | server components, static vs dynamic rendering, streaming |
| 6 | Next caching docs + FTM config | use cache, cacheLife, ISR, surrogate keys, purge |
| 7 | FTM repo | Unpoly overlays and Alpine components in the dashboard |
| 8 | FSO part 10 | React Native; the api_v2 consumption contract |
| 9 | Astro docs | blog, help centre, SEO satellites |
| 10 | web.dev/learn/performance | images, fonts, code splitting, Core Web Vitals |
| 11 | MDN accessibility | semantics, ARIA, testing; a11y as a review criterion |
| 12 | — | Reading week |
FTM labs
Section titled “FTM labs”- L1 eight URLs → surface, service, file.
- L2 add a cached page, prove the
Cache-Control/surrogate behaviour. - L3 change a dashboard drawer, verify in a PR preview.
- L4 perf-review a recent PR with numbers from PageSpeed/Lighthouse.
Project
Section titled “Project”The capstone’s UI, on the correct surface, verified in a preview.
Reading list
Section titled “Reading list”| Book | Author, year | Use | Free |
|---|---|---|---|
| Learning React, 2nd ed. | Banks & Porcello, 2020 | Hooks-first React from JS basics through Suspense | No |
| Real-World Next.js | Michele Riva, 2022 | The only one of these with an explicit CSR/SSG/SSR/ISR comparison | No |
| CSS: The Definitive Guide, 5th ed. | Meyer & Weyl, 2023 | Cascade layers, :has(), container queries, grid/subgrid | No |
| Accessibility for Everyone | Laura Kalbag, 2017 | Practical a11y: content, design, HTML, evaluation | No |
| High Performance Browser Networking | Ilya Grigorik, 2013 | Why latency dominates; the theory under CWV and CDN caching; hpbn.co | Yes |
Assessment
Section titled “Assessment”Coursework 45% (L1–L4) · Project 35% · Check-off viva 10% · Exam 10%.