Today we will cover:
The architecture components of the MVC pattern are designed to handle different aspects of an application in development. The MVC design pattern serves to separate the presentation layer from the business logic.
Why do developers care about MVC? MVC is popular in app and web development, and it’s one of the most widely used software design patterns for app and web development. The Model View Controller design pattern separates concerns into one of 3 buckets:
The Model View Controller architectural pattern separates concerns into one of 3 buckets:
Often a database, in our quick example we’ll use local web storage on a browser to illustrate the concept.
The view is a visual representation of the data- like a chart, diagram, table, form.
The view contains all functionality that directly interacts with the user - like clicking a button, or an enter event.
The controller connects the model and view. The controller converts inputs from the view to demands to retrieve/update data in the model.
The controller receives input from view, uses logic to translate the input to a demand for the model, the model grabs the data, the controller passes data from the model back to the view for the user to see in a nice display.
You can think of a web application as a Model View Controller design. MVC is popular in web applications, one of the reasons is because responsibilities are divided between the client & server.
MVC design allows for Separation of Concerns - dividing the logic up between the 3 buckets, so that each bucket can act independently.
The model, view, and controller don’t depend on each other. Why does this matter? Generally, software is worked on by teams - a team might have a designer, engineer, and database architect. Separation of concerns means each team member can work on their piece at the same time, because logic has been separated into buckets. Separation of concerns is also great for maitenance - developers can fix a bug in one piece of code, without having to check out the other pieces of code.
Loosely coupled means that each piece: the model, view and controller, act independently of eachother.
Developers can modify one of the pieces, and the other 2 pieces should keep working and not require modifications. When designing MVC software – the logic in each of the three buckets is independent. Everything in View acts independently of the model – and vice verse, the view won’t have any logic dependent on the model.
Making independent models and views makes code organization simple and easy to understand and keeps maintenance easier. Programmers can fix a bug in the view without changing the model code.
The pictures above show what happens in a MVC web app when a user clicks a button, from the perspective of the user.
Educative interactive, text-based courses give you all the information you need in one place, without having to scrub through videos.
For our simple example, we’ll store data in a browser. In a production quality web application – the data would be stored in a database.
The view is what you see in the Output window - it’s a visual representation of the data displayed nicely for users. In our case a drop down list selector.
Note: Before testing your code, please run the code by pressing the
RUNbutton. Then, you can click the
TESTbutton. Otherwise, the test cases won’t pass.
Congratulations on completing your first look into MVC architecture. Today, we covered the basics of MVC, covered the benefits and completed our own example project.
However, this is just one concept you’ll need to become a web app developer.
Some next topics to learn are:
Join a community of 270,000 monthly readers. A free, bi-monthly email with a roundup of Educative's top articles and coding tips.