MVC stands for Model-View-Controller
MVC is a design pattern implementing the Separation of Concerns principle on a global application level.
The actual purpose of MVC is to separate your views from your controller and model. In other words, it is a design pattern is a structure for keeping display and data separate to allow each to change without affecting the other. ...
Thus it essentially contains three things.
The Model contains what is often called business logic, or all the data and information manipulated by your system. The View contains the objects that display the data, and the Controller manages the interaction with the user and mediates between the Model and the View.
The practical part is optional. But if you opt not to do the practical task though, keep it in mind when reading the materials below.
The practical task is to refactor your Friends App so that there are distinct parts (modules) that represent View, Controller, and Model.
View is basically app HTML, that can be modified by Controller. View knows nothing about the source of data (Model) or how Controller works.
Model is represented with a module that interacts with API or, probably, some storage (e.g. browser storage: IndexedDB database or localStorage).
The idea is that Controller asks functions or objects that represent the Model
for data and receives it knowing nothing about where data is actually stored, and how
it is fetched. In webc world it means that even when data is immediately available
(e.g. from window.localStorage) it should be served using promises.
Controller is a module or modules that only know anything about how View is organized and structured and how to ask Model for the data.
When there are many controllers (it may happen in a complex app), each may know something about only a part of View, and only about some specific parts of the Model sufficient to retrieve data for the particular part of the View or to ask Model to store some data that comes from the View (user input).
MVC is one of many design patterns, not a silver bullet.
- [Easy] The MVC Design Pattern in Vanilla JavaScript + translation MVC на чистом JavaScript
- [Easy] JavaScript MVC
- [Intermediate] Single Page App with Vanilla ES6: part 1, part 2
- [Advanced] Nicholas Zakas: Scalable JavaScript Application Architecture @ YouTube [53 minutes, English, captions available]
Now you must be ready to refactor your app so its architecture follows MVC design pattern.
[Advanced topic] MV* patterns in JavaScript