In this article, We are going to discuss about the MVC Architecture which is quite difficult for beginners to understand. We are going to try to explain it in a very simple way, so you can wrap your hand around it.

Here, we try to explain the basics of MVC now I’m not going to go into too much depth because we want this to be beginner friendly and also want it to be short.

MVC stands for Model-View-Controller and it’s a Software architectural design pattern.

MVC works a little different for a different type of programming(e.g. Mobile app development, Web app development, etc) and some programmers even say that you can’t have a true MVC in web development.

The main goal of this architecture is to separate functionality not just functionality but logic and the interface all kinds of things in an application, so this promotes organized programming. It also allows multiple developers to work on the same project.

Let’s take a look for different components of MVC. As I mentioned, MVC works little different for different type of programming, So let’s discuss web developer point of view. Let’s take a look at some of the popular web framework that uses MVC.

• Ruby on Rails (Ruby)

• Express (JS)

• Backbone (JS)

• Angular (JS)

• Laravel (PHP)

• Zend (PHP)

• Codeigniter (PHP)

• Django (Python)

• Flask (Python)

Let’s talk about Ruby on Rails or Codeignitor(PHP), there frameworks actually have folders in their file structure, called model, view and controller. Something like Django for python just borrows certain concepts but doesn’t actually have that strict folder structure. 

Another thing that can happen is one framework will put one aspect of the app in the controller and then another one would put it in the model so I think that’s why MVC is so confusing because there’s not just one way to do it there are actually many many ways to do. 

Now, we are going to get into the three components of MVC which is Model, View, and controller.

Must read Top 10 Chrome Extensions for Web Developers in 2024.

Model

Model is responsible for getting and manipulating the data, so it’s basically the brain of the application. Usually, it interacts with some kind of database this could be a relational database like MySQL or NoSQL database like a MongoDB. It really doesn’t matter and in many frameworks that support multiple databases, the model code will stay the exactly same. 

It’s just the database driver that needs to change and it doesn’t even have to be a database that works with it. It could be a simple file. So you could just you could have your model interact with a JSON file and pull data from that.

So it takes care of queries like select, insert, update, delete, the model also communicates with the controller. In most cases, the controller can request data through the model and in most cases the controller updates the view but with some frameworks, the model can actually update view directly.  This is one is another example of what makes MVC complicated.

So just realize that there’s different implementations and they can act differently from framework to framework. 

View

The next we have the view and you can probably guess what that takes care of. That’s the actual view of the application, so it’s the user interface, it’s what the user sees and when they interact with the application. 

So the view usually consists of HTML and CSS along with dynamic values from the controller. So the controller does communicate with the view as well as the model, now depending on which framework you use, the template engine may vary. 

The template engine is what allows dynamic data if you have straight HTML, we can’t output variables, we can’t use logic, select an if statement, so with template engines we can do that stuff right in the view or right in the template.

So some examples of template engines would be handlebars dust these are based on JavaScript. Then we have for Ruby on Rails, we have ER B which is embedded. Ruby, you can also use Hamel H a ml and then with Python you have a flask. There’s a lot more of them out there and some do more than others some are better than others but you have a lot to choose from especially with JavaScript. 

Controller

So finally, we have the controller and the controller takes in user input, so this could be from user visiting a page or clicking a link which makes a get request or submitting a form which makes a post request and we also have delete requests or put requests for updating. And these can’t be made directly from the browser, you can only do a get or a post but we do have HTTP clients that are at times built in with the framework, that can do that.

Now the controller acts as kind of a middleman between the model and the view. The controller will ask the model to get some data from a database and then the controller will take that data and load a view and pass that data into it. Then from there, the template engine takes over and can basically do some logic, do some output for the variables and things like that. 

The controller can also load a view without passing it data, so just a plain web page with HTML and CSS, no actual templating logic. 

So here’s a very simple example or diagram. 

Now we have the user, which sees the view of the application in the browser and it can make some kind of requests with input to what’s called a router. And their request could be some kind of link that they clicked on some kind of route. 

Then the router will call a specific controller method based on that route and if data is needed if you need to fetch some data, the controller will then interact with model, which interacts with the database and then once the controller gets that data passed back, it can then load a view and it can send the data to the view and it’ll get dealt with by the template engine. 

Then once that’s all done it’ll send the view back to the browser for the user to see.

Also read, 12 Amazing Web Development Projects for Beginners

Conclusion

The model being the data and the controller being kind of the traffic controller and the view being what the user sees and also interacts with. We AppTrait Solutions is best web app development service and borrow outsourced software development projects. We have Creative Developer helps businesses by creating dynamic web apps Hopefully you guys like this.