| In my [[1 Lets Read TodoMVC | Let’s Read TodoMVC]], I proposed reading the TodoMVC project source code as a way to study front end development. But what is MVC anyway? |
MVC stands for ‘Model View Controller’. It is an architecture sometimes used in front end applications to separate a few different concerns. The Model represents the application state and data. The View presents the information to the user, and accepts user input. The Controller updates the model in response to user input. There are also a few variations that have evolved from MVC, like MVA (Model View Adapter), MVP (Model View Presenter), and MVVM (Model View View Model).
Each of these patterns is a slightly different way to represent one of the fundamental ideas of software engineering. Software is generally easier to build and maintain when we separate different ‘concerns’. Representing data logically in the program memory, and rendering that data as a visual representation - either as HTML, a mobile GUI, a desktop GUI, or a command line interface - is a separate concern. Accepting input from the user, and then updating both the logical representation and the visual representation is yet another concern.
In the world of front end web development, different frameworks have separated these concerns in different ways. Each framework - each generation of frameworks - is a response to the ideas, strengths, and challenges of previous frameworks. And these web frameworks are all inspired by ideas from GUI development in non-web environments.
In the case of TodoMVC, each implementation may strictly follow the MVC pattern. But, each attempts to answer the question of ‘how might we best separate the different concerns of a todo list html front end app’. So, before you start trying to grok TodoMVC, it would be worth your while to read up on MVC and related ideas.
A couple links worth reading:
- Model-View-Controller on Wikipedia
- [[3 Claude Compares JS Framework Concepts MVC vs Components]]
| < Back to [[1 Lets Read TodoMVC | Let’s Read TodoMVC]] |