Web Applications and Architecture

Designing, building and running modern web applications: how the web works for developers, semantic HTML, the DOM and accessibility to WCAG 2.2, responsive CSS, asynchronous JavaScript and TypeScript, front-end architectures from single-page apps to server rendering, static generation and islands, web performance and Core Web Vitals, server-side applications with sessions, cookies and CSRF protection, data and persistence with migrations and transactions, REST API design with OpenAPI alongside GraphQL, gRPC and real-time channels, securing web applications with CORS, Content Security Policy, OAuth and rate limiting, and deployment, operations and scaling with containers, load balancing, caching and observability, with privacy under PIPEDA and Quebec's Law 25, ending in a capstone that designs, tests and plans the deployment of a full-stack course-booking application.

CMPUT-404 Year 4 3 credits 12 lessons · 6 h 56 min

Offered by HSM University · Computing Science

This is the Canadian version of this course. See the American version.

What you'll learn

Trace a web request from URL to rendered page through DNS, TLS, HTTP and the browser, and choose suitable status codes, methods and headers.
Write semantic, accessible HTML, manipulate the DOM safely, and apply WCAG 2.2 and the accessibility law that governs public web services.
Apply the CSS cascade, specificity, the box model, flexbox, grid and fluid, responsive techniques to build layouts that adapt to any screen.
Write asynchronous JavaScript with promises and the event loop, and use TypeScript's static types to catch errors before code runs.
Compare client-side rendering, server-side rendering, static generation, islands and HTML-over-the-wire, and explain virtual DOM diffing and signals.
Measure and improve web performance using Core Web Vitals (LCP, INP, CLS), compression, modern images, caching headers and main-thread budgets.
Build server-side applications with routing, middleware, escaped templates, secure session cookies and CSRF protection.
Use databases from web applications with migrations, parameterized queries, ORMs without N+1 queries, transactions, keyset pagination and privacy-aware retention.
Design REST APIs with problem details, cursor pagination, ETags, idempotency keys and OpenAPI descriptions, and choose among GraphQL, gRPC, WebSockets and SSE.
Secure web applications with CORS, Content Security Policy, verified tokens, OAuth with PKCE, passkeys, object-level authorization and rate limiting.
Deploy and scale web applications with twelve-factor configuration, containers, reverse proxies, load balancing, caching, replicas, sharding, queues and observability.
Design, implement, test and plan the deployment of a complete full-stack application that meets accessibility, performance, security and privacy requirements.

Course content

12 lessons · 6 h 56 min total · final exam

1 How the web works for application developers 33 min · quiz
2 HTML, the DOM and accessibility 34 min · quiz
3 CSS and responsive design 32 min · quiz
4 JavaScript and TypeScript for the web 33 min · quiz
5 Front-end architecture and frameworks 32 min · quiz
6 Web performance 33 min · quiz
7 Server-side applications 34 min · quiz
8 Data and persistence in web applications 35 min · quiz
9 Designing APIs 36 min · quiz
10 Securing web applications 38 min · quiz
11 Deployment, operations and scaling 40 min · quiz
12 Capstone: a full-stack course-booking application 36 min · quiz
E Final exam 20 questions

Requirements

Recommended background. You can start any course at any time.

Description

Part of the Science stream, typically taken in year 4.