Developing a clean architecture-inspired React application with MVVM
summary
Shows a working React + TypeScript to‑do app that combines clean architecture with MVVM, implements view models as hook-based adapters, and wires dependencies through a DI container so repositories (localStorage in the demo) are swappable. Demonstrates repository interfaces, use cases orchestrating business rules, and view components that only render and forward events. Claims testability gains and cites real costs of poor code: features 134% slower, 15× more defects, and 23–42% developer time lost to tech debt.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 1:49Common software problems
- 7:25Clean architecture overview
- 13:26MVVM complementing clean architecture
- 19:27Building the to-do app
- 23:19Project structure and DI setup
- 26:30React view components
- 29:19View model implementation
- 33:30Use case examples
- 36:17Complete implementation recap
- 38:05Solving original problems
- 41:54When to use these patterns
- 43:17Key takeaways
- 45:46Q&A
related talks
17mDeveloping a clean architecture-inspired React application with MVVM
30mClean coding with React in a nutshell
57mBuilding Scalable, Maintainable Apps Using TypeScript and React
35mModel View Intent, Embracing Reactive UI's
53mReact - Say "No" to Complexity
28mLessons in Managing Technical Debt
32mUI Development Made Simple
53mClean Architecture Works in the Frontend Too!