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
, which was released by our sister publishing arm,

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

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

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

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

"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

comments powered by Disqus