Advanced level · Module 3 of 6 · 20 guided hours
Application Architecture without a Framework
Structure larger front-end applications with clear modules, central state, events and client-side routing — the ideas behind every framework.
Learning objectives
- Organise a larger front end into layers and modules
- Manage application state and rendering predictably
- Implement events and client-side routing
Topics
- layers: data, state, view
- state store and subscribers
- immutable updates
- custom events and pub/sub
- History API routing
- when to adopt a framework
Lessons
-
Lesson 1 Structuring a Larger Front End
Separate data access, state, business rules and views into modules with clear dependencies.
layered architecturedependency directionfeature folderspure functions
-
Lesson 2 State Management and Rendering
Keep application state in one store, update it immutably and re-render views when it changes.
storesubscribe / notifyimmutable updateselective rendering
-
Lesson 3 Events and Decoupled Components
Let parts of an application communicate through events instead of calling each other directly.
CustomEventpublish/subscribecomponent boundariesdecoupling
-
Lesson 4 Client-Side Routing and Choosing a Framework
Navigate between screens without full page reloads using the History API, and decide when a framework is worth adopting.
History APIpopstateroute tableframework trade-offs
Practical activity
Restructure the visit tracker prototype into a store, views and a router, so adding a new screen requires no changes to existing ones.
Expected outcomes
- Maintainable front-end structure
- Understanding of how frameworks organise applications
Assessment
Design review and practical: add a new screen to the restructured app without modifying unrelated modules.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.