Another point of view

MVC applies to web applications


Sebastiano Armeli-Battana, the author of ‘MVC Applies to JavaScript’, give us an overview of one of most successful patterns created in software engineering.

Sebastiano Armeli-Battana is a senior software engineer working in Melbourne, Australia. He is a speaker at several conferences and the author of numerous technical articles as well as a jQuery plug-in called JAIL.This extract is taken from his eBook MVC Applies to JavaScript, which was released by our sister publishing arm, Developer.Press.

MVC is an acronym that stands for Model-View-Controller. It is an architectural pattern commonly adopted in the development of applications equipped with user interfaces.

MVC is one of most successful patterns created in software engineering. It was invented in the 70s, appeared for the first time in the Smalltalk-80 systems and is still used to this day.

Originally MVC was designed for desktop applications and the main reason for its adoption was the ‘separation of concerns’ between the presentation layer and the domain model. In the original pattern, model and view were bound together, so that the view updates when the model changes (active model). This is an example of the observer/PubSub pattern applying between those two components; a model, being the publisher, triggers an event when an attribute changes and a view, being the subscriber, receives the notification.

Desktop applications are not the only applications that can benefit from MVC. The same pattern has also been applied to web applications. Web applications have the peculiarity that the view (HTML code) lives in a browser. When the user interacts with the user interface (view), the browser sends an HTTP request to the server. The controller intercepts and dispatches the HTTP request to a particular action. The controller also loads the model objects and forwards them to the view. Usually no interaction between view and model occurs (passive model).

MVC and JavaScript

JavaScript is a client-side language running inside the user interface or using the “MVC terminology”, inside the View. For many years, JavaScript has been undervalued and was only adopted because it was the only language existing in the browser. Nowadays, JavaScript and front-end development are gaining importance because applications have a thicker client which offers a user experience similar to the one provided for desktop applications. Now developers choose to use JavaScript because they want their applications to be responsive and rapid, as well as enjoying the language.

JavaScript, being a first-class language just like server-side languages, can benefit from the same patterns adopted on the server; therefore MVC can apply to JavaScript too. A natural question could rise though: How can the full MVC pattern be applied to JavaScript development when JavaScript is involved only in the View part?

The answer is that you need to consider MVC at a more conceptual level, not as a strict and rigid pattern. The three main components (Model, View and Controller) do not have the same exact meaning as on the server. For example, on the client, you do not deal with any database. The purpose of model, view and controller can be reviewed as follows:

  • Model: Holds domain data, such as JSON objects produced by the server. For instance, an object such as the one below can be translated into a “City” model representing a city in the world with three attributes (“name”, “state” and “country”):

"name" : "Melbourne",
"state" : "Victoria",
"country" : "Australia"
  • View: Displays a specific User Interface (UI) component in the page, such as a text field, a dropdown, a list item or group of them. Using the model mentioned earlier, we could have a series of three textboxes holding the values of the three attributes “name”, “state”, “country” and a button for submission (if we want to edit those values).

  • Controller: Responds to user interactions happening on the user interface. It invokes changes on the modeland on the view. Considering the mentioned ‘City’ model and the associated view, a controller can be in charge of handling the ‘click’ event on the submission button and updating the model with new values (if the user changes the text inside the textboxes).

Using MVC in JavaScript does not mean you need to make your own abstraction around the DOM API, you can still use existing libraries such as jQuery. MVC is a higher level of abstraction; it is a principle to assent to when developing a feature in your front-end code. MVC can be both used in the high level design and adopted for each new element inserted in the user interface.




All Posts by SebastianoArmeli-Battana

Inline Feedbacks
View all comments