Learning JavaScript Design Patterns

MVC

MVC is an architectural design pattern that encourages improved application organization through a separation of concerns. It enforces the isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally managing logic and user input. The pattern was originally designed by Trygve Reenskaug during his time working on Smalltalk-80 (1979) where it was initially called Model-View-Controller-Editor. MVC went on to be described in depth in 1995’s Design Patterns: Elements of Reusable Object-Oriented Software a.k.a the “GoF” book, which played a role in popularizing its use.

Smalltalk-80 MVC

It’s important to understand what the original MVC pattern was aiming to solve, as it has mutated quite heavily since the days of its origin. Back in the 70s, graphical user interfaces were few and far between, and a concept known as Separated Presentation began to be used as a means to make a clear division between domain objects that modelled concepts in the real world (e.g., a photo, a person) and the presentation objects that were rendered to the users screen.

The Smalltalk-80 implementation of MVC took this concept further and had an objective of separating out the application logic from the user interface. The idea was that decoupling these parts of the application would also allow the reuse of models for other interfaces in the application. There are some interesting points worth noting about Smalltalk-80’s MVC architecture:

• A Model represented ...