MVC framework is an omnipresent web development framework which stands for “Model-View-Controller”. MVC is an architectural pattern as well as a methodology which separates an application into logical components each of which is developed to handle specific responsibilities in an application.
And together these three components (Model, View and Controller) deliver the final product which should achieve the “business objective” of the application.
This MVC tutorial is about looking at the development of these components from a functional/business perspective and less from a technical perspective.
Let’s us first look at the technical definition of the three components of MVC framework. (Some of us may feel no gain in understanding after reading the below three definitions)
It is the data layer, which contains all the underlying logical structure of data as well as the high level data related logic. This layer interacts with the Controller and does not directly connect with the View. This layer keeps the data and sends it for presentation/manipulation and again keeps the updated data back in the database.
This is the presentation layer, which presents the data to the users and contains user interface related code and UI elements such as text boxes, drop downs, input boxes etc. This also acts as an interface for user inputs such as filling a form.
This is the logical layer between View and Model components. It processes all the business logic which manipulates data as well as the logic which queries and collects the data from Model (data layer) to send data to the View. Every communication which happens between Model and View is through the Controller Logic.
Few highly appreciated advantages of MVC architecture are : MVC decouples application layers so that development friction is reduced. For instance, UI designer can independently work on View component. Also the same makes it more easily testable.
The above is a more “technical development perspective” on the MVC application components.
But not all of us who have to deal with this ubiquitous framework have a technical development background. May be we have more business responsibility (say a non-tech entrepreneur), a business focused product manager or may be a business/market analyst focused on product’s requirement development. Still we all are very closely associated with the application and are critical stakeholders in its success.
I believe a lot of value addition can be done if we have a more functional or a more business perspective towards the same. This will help us in becoming more involved in the product development lifecycle and deliver a compelling product.
So, let us continue this MVC tutorial and again take a look at each of these components, but this time more from a business-functional perspective.
And along the way, we will keep two practical application example: a Job Portal and an E-commerce application. And look at few functions which are handled by these three components of MVC Architecture.
Every application has lots of different business entities. And each entity has lots of information/data stored in it as well as about other entities with which it needs to interact. Think of all the real world objects which your application has and its needs of interaction with multiple other objects/business entities in your application.
Let’s take a look at couple of examples.
- It will have objects such as Job (with its job description), Company (with multiple jobs), Applicant (with its Profile), Admin (who can post Jobs).
E-commerce Portal :
- It will have objects such as Product (with its vendor, price and description), Vendor (with multiple products), Buyer (with its address, profile, and past buying history)
- Non-physical Objects such as Transaction (with information about buyer, products, prices of each product and total price, as well as delivery status etc.)
Think about all the data which corresponds to your application. It needs to be saved along with the relationships with other data. (Such as an e-commerce buyer having multiple transactions.)
Also there are other multiple ways where data gets generated such as website analytics data.
All of this data needs to be properly stored in database along with high level corresponding code which can help retrieve and save the updated version. So an overall database schema is created with database-tables which store the data.
“The Model component” corresponds to this layer which has application’s underlying database schema (corresponding to various entities) which help us store and retrieve this business critical information.
View layer defines the User interface part of your application. In simple language, this handles all the display of your application. Also this is the component which interacts with your prospective target users.
You must have a number of intended users who may have one or multiple needs from the application. To think about View, think from user’s perspective and varying interaction needs that user might have. From usability perspective, think about
- What Information user wants to see/needs,
- What does he/she wants to input into application and what output he/she expects,
- Multiple ways he/she can interact with your application
- What will be various traversal flows through your application?
- What are the various functionalities your application requires which need to be viewed by the end user
- What are various UI elements (say dropbox, checkboxes, autofill) which will make a user’s life easy to use your application
Let’s take a look at couple of examples.
- A Display page for jobs available. i.e. a list of Jobs
- And a more descriptive jobs-page with description
- A candidate Profile page for Recruiters to see
- A form based interface for the capability to enter criteria to search for relevant jobs
- User flows such as : To Create a Job, Register as a Candidate or Recruiter
- And ofcourse “The Apply Button”
E-commerce Portal :
- A listing of various Categories of products
- Page for every Category
- Page for every product with its information such as Price, Vendor
- Form to search the whole website for intended product
- Filters on the product category pages to narrow down search. Say – find a Brown Shoe in all the shoes listed
- Breadcrumbs elements to help with the navigation on the site
- A checkout flow to place the order
- A input flow to file a grievance
- And ofcourse “The BUY Button”
View is the most critical part of your application. As it is the only touch-point with your customers. So it completely controls user’s perception about your application.
Not only does this component makes the application usable but it also creates most of your brand equity. And we all want our users to think good about what we have, don’t we?
Along with Usability and Branding, there are also challenges of developing for different screen sizes. We need to ensure that application works across devices and it is as usable on bigger screen as on a smaller device.
That is why we at Quovantis technologies, follow sound design principles specific to the problem and put so much effort on good designing of UI/UX. We want to ensure that the application creates the right impression on user as well as good design should lead to highly usable app.
Controller is the business logic part of your application. It is a layer between your user interface and model (database layer).
It performs following critical tasks-
- Interacts with “User interface”
- Takes inputs from your user interface or View layer
- Either manipulates data or creates new data based on the information entered
- Saves data in the database
- Presents information to user
- Takes commands from User Interface
- Queries data from database
- Processes the same to create useful information and send it to the User interface for presentation to the user
- Execute Business Logic
- Think of all the logical decisions and data manipulation which needs to happen i.e. your application’s Business Logic
- This is what interacts with the multitude of business data saved across various tables and processes the same to convert into useful information or generate new data from the same.
- Helps integrate with other applications
Lets us take a look at couple of examples:
- Takes input through a form and create a new live job with its description
- User queries for jobs in a domain. And it gets the lists of jobs from database as per the search parameters and presents the same to the user
- Takes inputs from User interface from recruiter profile and marks the Job as “Not accepting Applications” or “Job Filled”
- Ensuring that a user with job candidate profile does not have access to the job creation interface
- Integrates Job Portal with other recruiting agencies’ internal systems
E-commerce Portal :
- Takes a product list from Vendor’s User interface and creates product lists in the database with each product having specific description, prices etc.
- User queries a product, say a T-shirt of specific size and color. Controller takes user’s input, queries the database and gets the information. Then converts it into presentable form and sends the refined list back to the user interface.
- Answers Business questions such as : How many people transacted over Rs. 5000 in a month?
- Integrates e-commerce portal’s check out flow with payment logic from various banks
To think more deeply about the Controller layer, think of
- All the data, which different business entities can generate or ask for and the logic required to
- create the data
- as well as get data from database and convert it into useful information.
- All the way data needs to change, either because of business logic requirements or user inputs.
- What all business question will different entities have? And what logic will be needed to answer these same questions?
This was my view from a more functional perspective on the three Components of MVC architecture. Hope I was able to get you slightly more ahead on the way to business thinking about the same.
Impact on Team Structure
The real world is much more complex than the two examples we discussed here. There are many user personas, hundreds of business logic which need to be implemented along with many different user flows.
And there is a never ending chase of simple, usable and compelling design which keeps your applications engagement metrics green and brand perception positive.
This leads to various team roles which work across the product development stages-
- Business Analyst : Gathers the business logic requirements and generates product requirements document
- Technical Writers : Create Product requirements document as well as Product Functionality Documents to be referenced to
- Database Architectures : Create Model schema, set up database and administer the same
- Application Architecture : Who works across all the layer of the application and are custodian of the whole application
- Software developer : Who works on the controller i.e business logic implementation in various different technology stacks
- UI-UX Developers : Who are experts in front-end technologies and develop the User Interface Components.
- Verification team : Who develop use-case plan and run test cases to ensure that everything in the application is working correctly
- Agile Practitioners : Who keep the execution running across the different teams
And many more as per the domain and industry.
Some thoughts to put forward
I believe this thinking may be applied to various domains and Industries. So think from your role and application’s point of view what all three MVC components may mean to you.
Thank you for reading. 🙂