back to blog

Architecting Websites: Leveraging the MVC Model to Achieve Modifiability

Separating content from how it is presented has been a mantra in the web world for well over a decade, and with the myriad of media now available for consuming content, the advantages of this are even more apparent. Web application developers long-ago adopted the Model-View-Controller (MVC) methodology from the software engineering world. Today nearly every website is data driven and incorporates user-defined interactions, and the MVC model is more important than ever in web development.

MVC and why it works

Harvard HGSE Computer TablesThe MVC methodology is a form of layered architecture.
  • The Model is your data, how you manipulate it and how your data sets relate to each other and to your business logic;
  • The View is exactly that – how the data is presented to (or viewed by) the user;
  • The Controller is where the magic happens (and my favorite part)! The Controller is where your business logic resides – this is where decisions are made about how to act on the data. The Controller is the glue between your data and the view, as the controller not only manipulates the data, but also determines the appropriate view to return to the user.
Now, imagine your website and all the content (data) you share with your users (visitors) and how they might view that content with a traditional web browser or on a mobile device – probably the two most obvious and commonly encountered different views of the same information. In a site that is optimized for a mobile display you may want to remove all images, change the navigation and possibly present the content in smaller chunks. But the information remains the same. With an MVC approach, the Controller identifies that the view needs to be different, makes requests to the Model for the appropriate data and returns a view to the user that is formatted to fit their particular screen. Using such a layered approach, and maintaining a sharp line between data (content) and business logic (what is shown to whom when and why) and view (display) creates a highly modifiable architecture. The benefits of this go beyond different viewing agents. What if you want to test a couple of different layouts or action elements to see which one generates the most interaction from your users? This is called A-B testing, and it is handled at the Controller level which passes the data to different views. The benefit and implementation of A-B testing is a whole different topic, but with an MVC approach you can implement such metric gathering practices quite easily.

MVC and Allocation

Server Rack By using an MVC approach to web development, technical teams can allocate work according to strengths, allowing for a concurrent development approach. Your front-end developer can work on the look and feel in the View layer (HTML, CSS and JavaScript interactions) at the same time that a back-end developer is defining the Controller methodology. And with the data model separated from it all, the operations team is free to move from MySQL to SQLite or even a NoSQL data store. The View and Controller layers need not know or care how or where the data is stored, just that it is available and the Model will deliver the same information regardless. There will be interfaces defined between the Model, Controller and View in order to keep everyone honest, but changes can be made within a layer without affecting the other components. MVC can be achieved through the use of a framework library (available for every web development language) or can be a homegrown implementation. The trick is to have strict separation of data, logic and view. Frameworks help keep you honest and abstract away some of the challenges allowing developers to focus on the business logic algorithms and display logic.

Why wedü MVC

This is a 30,000-foot view of MVC and its advantages to both the content owner and the development team, and it is the approach we use at wedü for building-up websites for our clients. By adhering to the principles of the MVC pattern, we are able to respond quickly and efficiently to client requests for changes and added features/functionality to their web-presence. Stay tuned for future posts where we will zoom-in for a closer look at the implementation of our MVC architecture and how we leverage the benefits of the Codeigniter framework.   Image Credits: Phil MankerJamison_Judd
Ready to get started?

It seems like you're ready to do more. This is why we have to meet.