Skip to main content

MVC: At Its Core

Designing an application requires a lot of effort And without a proper structure there are chances that your application may fail during some operations. That is the reason of choosing a framework to accomplish the task of building an application. A framework enforces you to use the defined application structure and methods so that you can easily maintain your code and refactor it if needed. MVC , short form for Model View Controller is a designing pattern in which an application is divided into 3 components i.e. Models, Views and Controllers. (The word Application infers to all type of applications like mobile apps, desktop apps, web apps etc.). A framework which follows the MVC pattern is known as a MVC framework and there are a lot of frameworks for each type of application written in most of the languages. Normally people start learning about the framework without understanding the concept behind them. Each MVC framework follows the same pattern i.e. the MVC pattern. So if we learn about MVC then we can pick any framework of our choice and it'll take lesser time to understand their API. So in this article, we'll focus on MVC pattern rather than the framework. These are things we'll be learning today.

MVC Components

As i mentioned earlier, using MVC pattern means that you'll have to break your application in 3 components. You'll be wondering why that is even necessary ? The reasons are many but to list a few, it helps you write maintainable code by structuring your code in different modules, easily testable, easily scalable, easy to understand by others and list is going.. Still if you don't understand the importance of MVC then lets check out the components and then you'll be able to visualise the modularity. The components of a MVC based application are modals, views and controllers.

  • Modals :

    This is the component which is responsible to modify the data stored by your application. The data can be stored anywhere like in a database, in a file, in dynamic arrays etc. This component provides a handy API which can be used by other parts of your application to send data to database, retrieve data from database etc. The data definition (eg. database schema) and the data store (eg. MYSQL connections) connections are also managed by the Modal component. You just tell modal what to store and it takes care of the rest of the details like where, when, how to store.

  • Views :

    This is the component which displays the data. It does nothing else but only displays the data. You must be thinking that why we need a component for displaying the data if we can simply output it ? Actually a view is a reusable fragment of code so you can use a same view to diaplay 2 different types of data. For example, you might need to show price of an item in rupees if user is indian and in dollars if he is american (Its just an example. I obviously know that rupees and dollars are currencies of many more countries.) So instead of returning the value and the sign wrapped in a label widget(GUI apps) or in HTML tags(web apps), you can simply create a view which shows a value and a sign and you can pass your data to it.

  • Controllers :

    Controllers are the machinery which actually runs your application. It forms a bridge between the views and the modals. Controllers are the ones which asks the modals for some data, performs some operations on it and then send them to views. In a non-mvc application, what most people do is either they put all of their code in controllers or use any 1 more component along with controller like MC or VC. Thats when applications start to become unstable.

MVC Flow

The flow of an MVC application is really important for us to understand. We already know about the components so now lets see how they work so that we can visualise what exactly is going on. Below is a simple block diagram describing the placement of the components.

The main thing of your application is the routes using which a user can access your application views. From the perspective of a web app, a route is the url which user clicks and a controller will be called to perform an action. Consider a route to be a trigger to call a controller for handling. In web apps, triggers are urls and in mobile/desktop apps, triggers are buttons or actions (swipe). So routes are defined to trigger the controllers. Lets see the ongoing process when a user logs into an app.

  1. Lets suppose user just opens your app (may be url :'/home' or just click app icon).
  2. A controller is called to display the login form. That controller does nothing but returns a view containg a login form.
  3. The returned view displays the login form to the user.
  4. User fills out the form and clicks the signin button (trigger)
  5. A different controller is called which recieves the data. It queries the modal to check for the existence of the user with the given credentials.
  6. Modal checks for the user's existence and returns result to the controller.
  7. Controller checks the result. If user exists then it return dashboard view otherwise it returns the login view again

Popular MVC Frameworks

The work flow of a login process which we saw earlier is a very basic one. There are a lot of things which frameworks handle for us like session management, request/responses, cache, cookies, database connections, security, form handling etc. So instead of building an application from the scratch without a framework, we should use frameworks for performance and reliability. There are hundreds of frameworks avaiable in the market for different languages and for different purposes. I'll list a few here but you are welcome to suggest any popular framework which is missing.

Framework Language Type
Express Javascript Web
Django Python Web
Laravel PHP Web
Angular Javascript Web
ASP.NET C#/VB Mobile/Web
Ruby on Rails Ruby Web
Spring Java Any
Ionic Web languages Hybrid mobile
Catalyst Perl Web
Phonegap Web languages Hybrid mobile

These are a lot more frameworks other than the above listed. But these are the ones which are widely used. If you want to share some more frameworks then you can write them in comments. Also it would be nice if you take a moment in sharing the article if you learnt something. Happy coding.

Labels:

Comments

  1. Tejuteju4 September 2018 at 21:54

    It was really a nice post and i was really impressed by reading this Ruby on Rails Online course

    ReplyDelete

Post a Comment

Comment on articles for more info.

Popular posts from this blog

Image Search Engine Using Python

Images provide a lot more information than audio or text. Image processing is the prime field of research for robotics as well as search engines. In this article we will explore the concept of finding similarity between digital images using python. Then we will use our program to find top 10 search results inside a dataset of images for a given picture. It won't be as good as google's search engine because of the technique we will be using to find similarity between images. But what we are going to make will be pretty cool. So lets start. Setting up the Environment Our Algorithm How the code looks Lets build the GUI Additional Techniques Setting up the Environment The code we are going to write requires a few tools which we need to install first. I will try to be as precise as i can and if you get stuck into installing some tool then you can drop a comment below and i will help you sort out the problem. So here are the tools and the steps to install ...
18 comments
Read more

Understanding Python Decorators

If you have ever wondered what those @something mean above a python function or method then you are going to have your answers now. This @something line of code is actually called a decorator. I have red from various articles about them but some of them were not able to clarify the concept of a decorator and what we can achieve with them. So in this post we'll learn a lot about python decorators. Here is a list of topics we'll be covering. What is python decorator Understanding the concept Multiple decorators on same function class method decorator Where can we use decorators What is python decorator A python decorator is nothing but a function which accepts your given function as a parameter and returns a replacement function. So its like something this def decorator(your_func): def replacement(your_func_args): #do some other work return replacement @decorator your_func(your_func_args): #your_func code Now when your_func gets called then...
1 comment
Read more

Cordova viewport problem solved

Include the viewport settings in Cordova If you are facing the auto zooming problem of cordova then go read on the full article. Cordova actually ignores the viewport meta tag which causes the pixel density problem. So we need to tell cordova that viewport tag is equally important as other tags. To do this, we need to add some code to a file which is specify in the article. Corodva messes with pixels If you are using the latest cordova version or creating the cordova app for latest android versions then you may have faced the zoom malfunctioning.I also faced it when creating an app. Many of you may have already searched the web and found the answer of changing the meta tag attributes to get it working. But adding target-densitydpi=medium-dpi does not solve the problem for latest android versions. It may work for gingerbread but not for kitkat and others. So the final solution which i found was one of the stackexchange answer but rarely found. So i am gonna two things here, i ...
5 comments
Read more