DEV Community 👩‍💻👨‍💻

Osinachi Chukwujama
Osinachi Chukwujama

Posted on

Simple MVC App


This is a very simple example of MVC architecture

Basically, MVC architecture involves 3 parts:

  1. A Model class which stores and manipulates data
  2. A View class which listens to events, displays and generates new data from those events
  3. A Controller class that links the Model to the View. This ensures that the model can communicate to the view without directly modifying any object in the view

How's MVC Connected To This App?

This app uses MVC architecture to display click counting of a button.
The Model stores the data which the controller collects and gives to the View.
The view then displays that data and also generates data from click events which is collected by the controller and relayed to the model.

Here's the app on codepen

The Top Points

  1. The model stores data and has methods for altering data
  2. The view displays data and has event listeners which generate data
  3. The controller connects the model to the view. It's the channel which the model uses to send data to the view. It's also the channel in which the view sends new data to the model.

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!