The Evolution of MVC Architecture and the Web

As the web evolves, so too is our concept of MVC (model view controller) Architecture. As web applications has become increasingly complex and interactive, more and more logic is added to the browser side of the application. As a result, web applications are beginning to better simulate desktop applications. These types of applications are called RIAs (rich internet applications) and are going mainstream fast. Javascript is being pushed to its limits, and new RIA technologies like Flash 4 and Silverlight are slowly taking over the web. What's going on here?

How was MVC Architecture implemented in the past?

In the past, all three components of MVC Architecture, the model, view, and controller, resided on the web server (see the figure below).

Old MVC Architecture Implementation:

When a request was made to the web server, the controller decided what page the user should be directed too, what data to pull from the data server, how to build the model, and how to build the view. Once the view was created, HTML would then be generated and sent back to the client machine as a response. This was the fatal flaw of web applications in the past. Unlike desktop applications, if users needed to interact with the interface, the application would have to reload the entire page, because all of the components of the MVC architecture were stuck on the web server.

This is why AJAX was born in 1995. Ajax allowed users to somehow interact with a web application's interface much better than before, because individual requests could have been made to the web server, which would then turn in response with new data to update parts of the webpage without referring the whole page. AJAX still was not a perfect solution however, because every user interaction still had to make separate requests to the web server.

How is MVC Architecture implemented today?

Once the web world began to embrace AJAX, a new movement began to unfold called RIAs. With this model, the user could have a rich application experience without making requests to the web server with each action because the view component of the MVC architecture resides in the client (see the figure below)

New MVC Architecture Implementation:

This is a big deal because it means that we are rethinking how MVC architecture is implemented for web applications.

Here's an example. Let's say that you are using a web application that displays data. You enter some inputs, press "Enter", and the web application sends a request to the web server. The controller then gets the appropriate data from the data server, creates a model of that data, and sends it back to the client via JSON. The client receives the JSON and replicates the model as native objects. If the user wants to see this data as a pie chart, the native model can be used to generate a pie chart (which is a view) without making a request to the server. Likewise, if the user wants to see the data as a bar graph, the native model can be used to generate a bar graph, again without making a request to the server. All of this is done without referring the page, and only one request was made to the web server.

Click here to read more about MVC.

Related articles

How to Cook Up a Killer Food & Drink Website This Halloween

Get your food and drink website Halloween-ready with spooky...

[SEO Glossary] The SEO Terms You Need To Know For Website Success

What is Search Engine Optimisation? Our up-to-date SEO glossary...

Cancelling your SEO service

If you would like to cancel your SEO service...

Why Page Load Speed Matters

Discover how faster-loading websites boost SEO, improve user experience,...

WCAG 2.2: The Latest Accessibility Updates You Need from W3C

Stay updated on WCAG 2.2! Discover the latest accessibility...

Case Studies

Content & copywriting

Compass Music Platform

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...
Content & copywriting

NewsWeek Magazine

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...
E-commerce development

Beauty & Makeup Shop

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...