PV252 Frontend Web Development and User Experience

Faculty of Informatics
Autumn 2024
Extent and Intensity
2/1/1. 4 credit(s) (plus extra credits for completion). Type of Completion: k (colloquium).
In-person direct teaching
Teacher(s)
RNDr. Samuel Pastva, Ph.D. (lecturer)
Mgr. Mária Šviriková (lecturer)
Mgr. Jan Vrzal (seminar tutor)
Guaranteed by
RNDr. Samuel Pastva, Ph.D.
Department of Computer Systems and Communications – Faculty of Informatics
Supplier department: Department of Computer Systems and Communications – Faculty of Informatics
Timetable
Wed 25. 9. to Wed 18. 12. Wed 8:00–9:50 C511
  • Timetable of Seminar Groups:
PV252/01: Mon 23. 9. to Mon 16. 12. each odd Monday 12:00–13:50 A215, S. Pastva
Prerequisites
The course assumes basic knowledge of web-based frontend technologies and markup languages (HTML, CSS, JavaScript/TypeScript), corresponding to the course PB138 (Basics of web development and markup languages).
Course Enrolment Limitations
The course is also offered to the students of the fields other than those the course is directly associated with.
The capacity limit for the course is 20 student(s).
Current registration and enrolment status: enrolled: 20/20, only registered: 4/20, only registered with preference (fields directly associated with the programme): 4/20
fields of study / plans the course is directly associated with
Course objectives
The course is aimed at students with basic familiarity with frontend web technologies (HTML, CSS, JavaScript/TypeScript) who intend to broaden their understanding of the web ecosystem. It presents modern web standards (WebComponents, WebSockets, WebWorkers, …) and allows the students to apply and evaluate these technologies in the context of a non-trivial web application (course project). Additionally, the course introduces students to the principles of user-friendly application design and essential observability mechanisms that are used to evaluate user experience in active projects.
Learning outcomes
Students will be able to:
  • Understand and apply reactive, component based user-interface development principles based on the WebComponents standard or other similar UI frameworks.
  • Apply safe development principles (type checking, continuous integration, automated testing) in the context of web applications.
  • Apply the principles of user-friendly design through wireframing and prototyping in a non-trivial web application.
  • Measure and evaluate user experience through event analytics and randomized comparative trials.
  • Be able to build interactive and real-time web applications using the WebSockets and WebRTC standards.
  • Be able to build offline-enabled applications and offload complex computations to background tasks using the WebWorkers and WebStorage/IndexedDB standards.
  • Be familiar with the advantages and disadvantages of other emerging or low-level web standards and deploy them in a project (e.g. Canvas API, WebAssembly, WebGPU/WebGL).
    • Syllabus
    • Project structure, bundling, continuous integration, type checking, validation and testing.
    • Component-based user interface frameworks (WebComponents, React, Lit), shadow DOM, event driven vs reactive state management.
    • Prototyping component-based user interfaces with focus on user experience: wireframing, design systems, component libraries.
    • Observability and analytics, user engagement and satisfaction, sensitive data management.
    • Accessibility, screen readers, semantic web, ARIA.
    • User authentication, identity providers and single sign on (OAuth).
    • Real-time communication (WebSockets, WebRTC), modern web protocols (HTTP2/3, QUIC).
    • Background and offline tasks (WebWorkers), on-device data management (WebStorage, IndexedDB).
    • A/B testing, randomized comparative trials, empirical user experience evaluation.
    • Low-level and emerging web technologies: Canvas, WebAssembly, WebGPU/WebGL, Electron/Tauri and others.
    • Semester project evaluation.
    Literature
    • The Front End Developer/Engineer Handbook 2024 (Cody Lindley; https://frontendmasters.com/guides/front-end-handbook/2024/)
    • Mozilla developer network: https://developer.mozilla.org/
    • Usability and User Experience Design: The Comprehensive Guide to Data-Driven UX Design (Benjamin Franz, Michaela Kauer-Franz)
    Bookmarks
    https://is.muni.cz/ln/tag/FI:PV252!
    Teaching methods
    The course consists of weekly lectures combined with live technology demos (where appropriate), biweekly seminars, and independent project work. Students apply the concepts presented in the lectures when implementing warm-up mini-projects during the seminars and a comprehensive main project (groups of 2-3 people). In-person seminars are organized biweekly and alternate with time allocated for mutual mini-project review and implementation of the main group project.
    Assessment methods
    Course evaluation is based on three components: (1) Small warm-up projects showcasing each major topic of the course, primarily solved in-person during seminars. (2) Main group project (2-3 people) that integrates the whole course curriculum, presented at the end of the course. (3) Continuous mutual reviews of the warm-up projects of other course participants. To successfully complete the course, the student must fulfill all three components (i.e. complete and review each “warm-up” project; complete and present the main course project).
    Language of instruction
    English
    Further Comments
    Study Materials
    The course is taught annually.
    The course is also listed under the following terms Spring 2013, Spring 2014, Spring 2015, Spring 2016.
    • Enrolment Statistics (recent)
    • Permalink: https://is.muni.cz/course/fi/autumn2024/PV252