DEV Community

loading...

Simple MVC App

vicradon profile image Osinachi Chukwujama ・1 min read

Simplest-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.

Discussion

pic
Editor guide