MVC pattern explained using a Guitar Shop analogy.

I have a friend who is of the opinion that he wants to understand the entire abstraction process going on under the hood that makes an app work. This is often very hilarious to me and I always ask if he is interested in doing same with automobiles! I mean who is changing gears and wondering how the gears shift! That had be very funny! Not to mention all the people cussing at you when the red light turns green and you are lost in thought about how the ignition works! The point that I'm trying to make here is best explained by one of my favorite poems. Just because we have toothbrushes now doesn't mean that there wasn't a time when men used sticks to clean out their mouths. Processes over the years have been deployed and re-tweaked to make them better.

The MVC process is akin to this! There was a time when a individual had to set up their own servers just to share static assets over ftp and write all the machine level DevOps code! Now hosting your software (web and mobile) apps is easy with organizations abstracting away a huge chunk of the DevOps responsibility for you. The point as has already been made and which I still want to hit nail on the head here is the fact that once a task is abstracted away, it is simply done to make life easier. The MVC process is hence made to ensure a faster way to rapidly build web applications by thinking them of separate entities that communicate as part of an entire activity. I will define the general overview of a web app and then explain the structure using the MVC pattern and bring it close to home by using an actual guitar shop analogy in closing.

Say we have a website app that sell guitars. The Website has for example:
A landing page: Home Page. Static Pages: About and FAQ. A page that wrangles data: Contact form. Shop. Checkout. If we are to use the MVC pattern to build out this website we have to first define what is our MODEL, which of the pages will be simple views, which page VIEWS will return data from the MODEL and finally what logic will go into the CONTROLLER. Holding the mental picture or better still putting this on paper.

Static VIEWS: Home, About and FAQ pages.

Static VIEWS which returns data: Shop and Checkout pages.

MODEL: Where our guitar data will be saved. 

MODEL we will call SHOP: has_id has_item: guitar {guitar: has_price, has_name}

CONTROLLER: Static Pages controller and Guitar Controller.

When a user lands on the Home Page VIEW: He is served a Static Page by the (take a quick guess…) Static Pages CONTROLLER. Same action when he visits the about and Contact Pages, he is served by the (as you may have learned quickly by now) Static Pages CONTROLLER.

When a user clicks and goes to the Store Page VIEW (quickly, what do you think happens here?) He is still served by the CONTROLLER, this time the Guitar Controller which communicates with the shop MODEL ans serves up all the guitars in the Database according to their ids. When he proceeds to make a check out upon selection of a particular data, he is sent to a checkout page that bring up the particular guitar according to it's id in the database and he can then make payment for the particular guitar.

Guitar Shop Analogy

Let me use a Guitar shop as an example now.

1. You live in a city and have decided to pursue your long interest in music. You are not such a bad singer, to make up for the small (likely off key) singing inability you decide to purchase an instrument to accompany your singing with. Your instrument of choice: THE GUITAR!
2. You are on a budget and decide to walk to the local market where there are a couple of guitar dealers.
3. You see xyz shop (Home page VIEW), walk into the shop and see a larger roll up banner (About Page VIEW).
4. A Salesman walks up to you (CONTROLLER) and offers you an option to take you round the shop to see available guitars and their prices.
5. Salesman CONTROLLER action here can either tell you more about the shop (render Static Pages About VIEWS) and/or answer all other questions that you may have (render Static Pages FAQ VIEWS).
6. You asked a couple of questions and then you two proceed to walk round the shop and as you reach each guitar you ask for name, brand and price.
7. Salesman CONTROLLER pulls all relevant data (from the Shop MODEL) and serves them to you upon each ask.
8. When you finally decide on a guitar to purchase you select it by it's id and then proceed to Checkout where the Guitar CONTROLLER now pulls price information of that particular guitar and delivers it via the sticker on it and you make your payment.

I designed this using Figma. Photo Courtesy Unsplash

Well, if you read this far and still think this isn't cool I still need to GET concepts at deeper level of abstraction, just remember the dude that had to purchase an accompanying instrument to make up for his apparent lapses in music!

Many thanks for reading. Please, heart and share on Twitter. Thank you!