What is MVC? For programming beginners building the blog in Rails tutorial
You've chosen Ruby on Rails to dip your toes into web development but you can't even understand the "Getting Started" tutorial
Ruby on Rails is based on a core idea of 'Model-View-Controller (MVC) design pattern'. The Getting Started tutorial on the Rails website says, “MVC is a design pattern that divides the responsibilities of an application to make it easier to reason about.”
This article will fill the gaps in your understanding so you can understand this core idea in the context of a simple blog that allows us to post, read, edit and delete our articles and lets others read those articles.
Our goal in the Getting Started tutorial is to make the simplest blog possible so we can understand how to build an app using rails. At the very least, every blog needs Post, Read, Edit and Delete capabilities. Thus they will have the Post | Read | Edit | Delete buttons.
Understanding what happens under the hood of the browser when we click one of these buttons will lead us to understanding MVC.
What happens under the hood when you click a button?
Let’s say you click the button to create a new post.
The browser sends a request to the server. (A server is a special computer that runs 24/7, has the code for our blog and listens for incoming requests.)
The server processes the incoming request by running our code. Result? An HTML file.
This HTML file is then sent back to the browser. The browser interprets the file to show you what you wanted.
You see, the 3rd step is where we do the work. The code that the server runs is the web application. Each website you visit has a different code running on their server.
Rails asks that we write our code in 3 different pieces called the Model, View and Controller. Each piece has a specific purpose.
Let us dive deep into the 3rd step to understand more. We’ll tackle Controller first, then View and finally Model.
The server processes the incoming request by running our code. Output? An HTML file
Running our code
Post, read, edit, delete - each capability requires a different set of instructions to be executed by the server.
These instructions are written in the Controller.
A Controller is a Ruby class file, that controls how a specific action like posting or deleting a blog post will be processed. The instructions for each of these actions are contained in separate methods of this class. These separate methods are called Controller Actions.
As a result, when a user clicks the new post button, the controller will execute on the instructions contained in the associated controller action.
But how does the server know which controller action to execute? There is a special file called routes file that contains exactly this information - what Controller Action to execute and when.
Output? An HTML file
The last job of a controller action is determining which HTML file is to be sent as output.
The HTML file defines what will be displayed to someone who visits our blog. Since different things need to be displayed for different actions, there is an HTML file for each action.
These HTML files are called Views. Well, they are not literally HTML files but a mixture of HTML and ERB.
The tutorial says,
"ERB is a templating system that evaluates Ruby code embedded in a document." An example of ERB tag is <%= %> meaning "evaluate the enclosed Ruby code, and output the value it returns."
Basically, ERB helps us to mix Ruby code in HTML so that we can use the variables of the Controller Action inside the View.
You may have noticed how each type of work is kept separate using files aka “the responsibilities of the code are divided.” This helps in dealing with each type of work independently. It is called Abstraction and it is one of the fundamental concepts on which programming is based. MVC is one way to implement abstraction.
Another type of work is reading and editing the database. This work is kept separate using Models. But first, what is a database?
The blog posts don’t just live on the internet
The blog posts don’t just live on the internet. The database on our server will store our blog posts.
When we create a new post, it is saved in the database. When someone wants to read a post, it is retrieved from the database. This is done using Models.
A Model is a Ruby class saved as a separate file, that specialises in interacting with the database. It represents one row/record of a database table.
ControllerActions use Model to read and make changes to the database.
Thus, MVC divides the responsibilities of our code as follows -
A component that can read, create and modify the records on the database - Model
A component that defines how our blog looks - View
A component that instructs how to process an incoming request by invoking the Model and returning Views - Controller
Check out Intermediate Rails: Understanding Models, Views and Controllers from Better Explained to learn more about the MVC pattern. Then go on to read about the principle of Fat Model, Skinny Controller.
I wish I had found these articles sooner!