Lesson 5: Frontend Component Architecture & State Management
Developing a complex digital outcome to solve a real-world problem for NCEA Level 3 Digital Technologies.
🎯 Ngā Whāinga Akoranga | Learning Intentions
Modular component architecture, event-driven state management, DOM manipulation, form validation, and reactive UI updates.
Build modular reusable frontend UI components, manage local and application state, and implement dynamic real-time form validation.
🎥 Media Anchor & Pedagogical Scaffold
Component Architecture & Frontend State Management
Video Clip: “Redux in 100 Seconds” — 2 min 33 s.
🧠 1. Before Viewing (Activate & Predict)
How do web applications keep complex UI components in sync when user interactions update underlying data state?
👁️ 2. During Viewing — watch the full 2m33s clip, capturing as you go
- Capture: Deconstruct UI layouts into independent, reusable frontend component modules.
- Capture: Manage state changes triggered by user input events (clicks, keypresses, form submits).
- Capture: Validate form inputs in real-time providing immediate visual feedback and aria-live announcements.
🗣️ 3. After Viewing & Kaiako Move (Process & Apply)
Kaiako Move: Guide students through modular JavaScript ES modules or framework component structures.
Immediate Task: Complete Section 5 of your Digital Tech Portfolio: Component Architecture Diagram & State Management Code Audit.
⚡ Whakaoho | Do Now: Where Does the Truth Live?
Pick one piece of data that appears in two places on your screen. Two minutes: where is the authoritative copy stored, and how does the second place find out when it changes?
If the answer is "I update both", you have two sources of truth. They will disagree, and it will happen in front of your stakeholder.
📖 Activity 1: Build One Real Component, Then Wire the State
Make it reusable (13 min). Write a single component that takes its data as input and renders it. No reaching outside itself for state, no hard-coded values. Then place it on the page twice with different data — if that breaks it, what you wrote was not a component.
Single source of truth (12 min). Put the shared state in one place, have both instances read from it, update it once and confirm both views change. Then add live form validation that reads the same state rather than quietly keeping its own copy.
📝 Activity 2: Level 3 Digital Technology Portfolio Task & Merit/Excellence Scaffolding (20 mins)
Portfolio Section 5. Submit: (1) one reusable component used at least twice with different data; (2) a state diagram showing where each piece of state lives and what is permitted to change it; (3) working real-time validation, with a note on which of those checks must also run server-side and why client-side validation alone is never security.
🏫 Kaiako Planning & Pedagogy Notes
NCEA Level 3 Alignment: Direct preparation for Level 3 Digital Technology (Develop a complex digital outcome to solve a specified problem). Emphasise systematic testing, stakeholder feedback loops, and technical code refinement for Merit/Excellence grades.