MVC Architecture for JavaScript Applications

MVC Architecture for JavaScript Applications

Real MVC

In a nutshell the classic MVC architecture work like this. There is a model that is at the heart of the whole thing. If the model changes, it notifies its observers that a change occurred. The view is the stuff you can see and the view observes the model. When the view is notified that the model has changed, the view changes its appearance. The user can interact with the view (e.g. clicking stuff) but the view doesn’t know what to do. So the view tells the controller what the user did and assumes the controller knows what to do. The controller appropriately changes the model. And around and around it goes.

This description is probably a nice summary for those who already understand the MVC architecture but it is way too short for someone who doesn’t know it already. Describing all the ins and outs of MVC is a task I’m not going to attempt in full. I will do three things:

Recommend the books I found that explain MVC well.
Describe some tips about MVC for JavaScript web applications in particular that I have found helpful.
Provide a complete example.