Understanding concern separation in JavaScript

While writing JavaScript (especially client-side), one of the major challenges is to avoid spaghetti code, where the same module renders the user view, handles user interactions, and does the business logic. Such a module may quickly grow into a monster of a source file, where a developer rather gets lost than spots and resolves a problem.

The MVC Programming paradigm known as Model View Controller (MVC) splits the application functionality into separate layers such as presentation, data, and user input. MVC in a nutshell implies that a user interacts with the view land in a controller module that manipulates a model, which updates the view. In JavaScript, the controller is usually an observer that listens to UI events. A user clicks a button, the event is fired, and the controller addresses the corresponding model. For example, the controller requests the model to send submitted data to the server. The view is notified about the model state...