MVC Architecture in 5 minutes: a tutorial for beginners

This article was written by Erin Doherty and was originally published at Educative.io.

Model View Controller is a predictable software design pattern that can be used across many frameworks with many programming languages, commonly Python, Ruby, PHP, JavaScript, and more. It is popularly used to design web applications and mobile apps.

This blog post defines the concept of a Model-View-Controller (MVC) software design pattern and does a basic example Model-View-Controller in JavaScript/HTML/CSS.

Today we will cover:

• What is MVC architecture?
• Benefits of MVC
• Web App as MVC
• Separation of Concerns
• Resources

What is MVC Architecture?

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:

• Model
• View
• Controller

The Model View Controller architectural pattern separates concerns into one of 3 buckets:

1. Model: stores & manages data. Often a [database](https://www.educative.io/blog/database-design-tutorial), in our quick example we’ll use local web storage on a browser to illustrate the concept.
2. View: Graphical User Interface 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.
3. Controller: Brains of the application. 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.

Benefits of MVC

• Traditionally used for Graphical user interfaces (GUIs)
• Popular in web applications
• MVC responsibilities are divided between the client & server, compatible with web application architecture
• MVC is helpful design pattern when planning development
• Separation of Concerns: that code is divided based on function to either the model, view, or controller bucket
• Works well with Ruby on Rails
• Loosely Coupled
• Removes unnecessary dependencies
• Reuseable without modification
• MVC makes model classes reusable without modification
• Code reuse
• Extendable code
• High Cohesion
• Easier to maintain or modify
• Supports Multiple views
• Each part can be tested independently (Model, view, controller)

Web App as a MVC

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.

Separation of Concerns

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 maintenance - developers can fix a bug in one piece of code, without having to check out the other pieces of code.

Loosely Coupled

Loosely coupled means that each piece: the model, view, and controller, act independently of each other.

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 versa, 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 picture above shows what happens in an MVC web app when a user clicks a button, from the perspective of the user sitting at the computer, looking at their browser. The same sequence of events is shown below in a software diagram - thanks to Apple here.

Resources

Now that you have a sense of what MVC, keep the learning going with these useful resources.

• What is the MVC Architecture (article)
• MVC Explained (article)
• Web Application Software & Architecture 101 (course)