MVC Bake Shop Always Delivers

Understanding MVC Patterns Makes Developing Apps a Piece of Cake 🍰😋

What is MVC?

MVC stands for Model-View-Controller. MVC is an architecture pattern for structuring a user interface application in a specific and organized way.

General Flow of a Website:

To understand MVC patterns, let’s first think about the general flow of a website in five simple steps:

Step 1: Client makes a request to a server
Step 2: Server retrieves the requested information from the database
Step 3: Database sends related information back to the server
Step 4: Server processes that information and sends it back to the client
Step 5: Client can now access and view the results

Model-View-Controller Pattern

MVC follows this traditional flow of a website and simply creates a pattern for structuring an application with three separate layers: Model, View, Controller. Each of these layers has a unique responsibility.

Three Components of MVC:

1. Model → Responsible for Retrieving and Manipulating Data

• Interacts with the database

2. View → What the User Sees When Interacting With an Application

• Displays HTML and CSS to the User
• Follows instructions by the Controller

3. Controller → Processes Requests

• Receives requests from the User
• Processes that info & transmits data requests from the User → Model
• Retrieves data from the database through Model
• Delivers data that is rendered in the View with instructions for how that info should be displayed to the User

Two Main Advantages of MVC

1. Modifications Can Be Created Without Affecting the Entire App

• Separating layers of an application by its functionality enables a developer to create modifications without affecting the entire structure of an application.
• Because each layer is separate and assigned a unique responsibility, a developer can make changes to just one layer of the application, and the other layers will remain unaltered.
• For example, the Model layer does not depend on the View layer.

2. Supports a Quick Development Process

• Allows multiple developers to work on different layers of the same program with ease, which supports a faster development process

The Takeaway: Using MVC patterns allows a developer to create a software application that is organized, easier to maintain and modify, and makes development more efficient.

Bakery Analogy

Now that we have a general overview of MVC patterns, let’s have some fun and envision a scenario together :

Your family is throwing a surprise party for your Dad’s birthday. You’re in charge of filling up the dessert table and picking out the cake to celebrate. You have the perfect bakery in mind: MVC Bake Shop. MVC Bake Shop is all about providing their customers with superior service by customizing their cakes based on each customer’s preferences, and delivering their cakes exactly as requested . The head baker is the most skilled baker in town and uses the highest quality ingredients to create and customize cakes. Your interactions with the staff are always positive. Upon entering MVC Bake shop, you are warmly greeted by BakerBot who is more than happy to take your order and will even deliver it straight to your table once it’s ready!

Outline of Components:

The MVC architecture is composed of three distinct layers with unique responsibilities so let’s define each piece in our analogy along with our three objects (Model-View-Controller) before approaching this example.

• You as the Customer (User) 🙋🏼‍♀️
• Your Bakery Order (User Request) ❓

MVC Components:

1. Head Baker (Model) 👵🏻
2. BakerBot (Controller) 🤖
3. Dessert Table (View) 🍰

MVC Pattern for Bakery Analogy:

Step 1: You scroll through a catalog of cakes and pastries and decide on a variety of desserts, and a customized three-layer double chocolate cake with “Happy Birthday Dad” written on top in green frosting.

Step 2: You make a bakery order request to BakerBot

Step 3: BakerBot takes in your bakery order request and processes it as a series of steps to be executed, and then relays this data request to the Baker

Step 4: The Baker checks the order components, and logically approaches the creation and customization of your order.

Step 5: Once the Baker has completed your order, BakerBot can deliver this order.

Step 6: BakerBot delivers your customized desserts and birthday cake to the party with instructions for how to properly display the desserts on the dessert table for all to see.

Step 7: The Dessert Table is set up and displayed for you to view

Step 8: The Dessert Table looks exactly as you envisioned. Your cake order from MVC Bake Shop was a success!

Summary of Baker Analogy:

• As the Customer, you are the User
• The Customer’s bakery order is the User Request.
• The Model is the Head Baker of MVC Bake Shop who retrieves and manipulates data and fulfills each customer’s bakery order based on their requests
• The Controller is BakerBot who relays the order from the customer to the Head Baker and delivers the customized cake to the birthday party Dessert Table. BakerBot will processes requests to and from the database. BakerBot is the middleman and pretty much runs the show. 😏
• The View is the Dessert Table at the birthday party that is displayed to the User as a result of the request made.

Conclusion

MVC stands for Model-View-Controller, which is a design pattern for structuring an application as three separate layers, each with a specific purpose. The Model layer handles the data and logic of an application and is responsible for interacting with the database. The View layer is responsible for the user interface by displaying data to the browser. And lastly, the Controller layer is responsible for communicating with the Model and the View, giving instructions and passing data between them

I hope the bakery analogy I whipped up helps you out of the Black Forest and doesn’t turn you upside down. I tried not to pound you with information or have you sift through dollops of fluff. Simply separate the layers and sponge up the heavenly goodness of MVC 😜

In all seriousness, I hope the analogy was helpful in reinforcing MVC patterns and solidifying your understanding of each layer and how they interact with each other. Thanks for reading!