As internet applications are getting more rich, designing user interfaces for the same gets complicated. Designing an application like GMail can be very complex since it is feature rich and one action is directly or indirectly related to several sections of the user interface.
What we see in our browser consists of the following:
All the information that we are interested in accessing. For example our mails. What we consume at the end of the day is the content of the email and the metadata associated with it, like sender, date and time when it was sent, people who are cc'd etc..
Browser uses a markup language called as HTML to dispaly all the data. HTML controls the layout of a webpage. This can be thought of as a blue print of a building. We know where exactly a room is going to come.
It would be boring to see all the above data without any styles applied, it is these small things which make a user actually choose some services. How many times have we moved away from websites saying, "the UI is really a turn off". If display is our blueprint, styling can be thought of as the work of an Interior decorator who makes buildings beautiful by applying some creativity w.r.t colors, images etc.
MVC stands for Model View Controller. It is a design pattern where we separate the data from the way it is defined, manipulated and displayed. One of the main reason why we use this design pattern is to ensure clean and organized code which makes maintaining a software comparatively easy.
To understand how MVC has helped us organize the code better, lets take a look at this PHP script which reads a bunch of rows from the database and displays it on the screen.
If we notice clearly, this single script does it all, right from opening a connection to the database, to retrieving the records, then rendering the html for the respective records. As our program grows, it becomes extremely difficult for us to manage it, since making a change to some database queries will be on the same file and some minor changes to styling will also go to the same file. We are tying everything together. This way there is a lot of dependency between developers, designers and other stake holders. For a project to progress without bottlenecks like these, it is very important for us to decouple different segments and have a well defined interface for interaction between these blocks.
This is how we can remodel the design using MVC.
1. models.py file consists of code which deals with data only.
2. views.py consists of code which is used to fetch the records from the model and render it to the template.
3. template.html consists of the markup with variables embedded in it.
There by structuring the code to a great extent.
Lets look at this application:
Model - Mail data represented in the data.js file.
View - the html display of each of the mail and the side menu.
Some advantages of using MVC design on the client side:
All our operations are on the models, we manipulate the data directly and we add hooks such that, whenever there is a change in the data, the view automatically renders the html which contains the latest data.
In this application, the moment we 'star' any mail, the 'star' field in the model gets modified which triggers the callback 'render' method. Similarly, we add hooks to reflect the change in models for the inbox details, like number of unread mails, number of starred mails etc.
The possibilities are vast when we are delegating some processing to the browser. Lets take this example. We have a table which consists of 10 records and we are interested in sorting the records based on different fields in the table. We can get a sorted table using the SQL Query
but it would mean, more interaction with the server, one more hit to the database, the complexity of sorting the records adds up.
Lets take the example of rendering a template on the server:
Length of this template syntax: 258 Characters
Length of the data: 82 Characters
after rendering the template using the data provided above, we get the following hypertext:
Length of the rendered HTML : 426 characters.
Length(Our initial template + Data) = 258 + 82 = 340 characters!
We are including a lot of markup in between the data when we are rendering the template. All the words <li>, <div>, scored, runs, Satistics is adding up to the amount of html which will be sent to the client from server.
Is embedding of data in between the html elements something that cannot be done by the browser?? Definitely not, it can be done. and we get a lot of improvement in terms of speed.
Some websites load amazingly fast, don't they? Like facebook. The header, the side bar and few other segments load in no time, which is followed by all the posts. One great advantage of separating data from markup is caching. We can cache templates, scripts, stylesheets and they can be served from a CDN which will make loading of websites amazingly fast.