Saturday, February 18, 2012

Cheat sheets for MVCCE, my refinement on MVC design pattern

Over many years of building GUIs in many different graphic/OS environments (in recent years building Rich Internet Apps via JavaScript/HTML/CSS), I have always used and advocated the Model-View-Controller design pattern.  Along the way, I have come up with some refinements which are relevant now because fat JavaScript webpage apps have made fat GUI app programming come full circle.  And unfortunately, I see the same hodgepodge of non-MVC code in JavaScript/HTML that I saw 20+ years ago with ObjectPascal/C/C++ on X-Windows/Mac/PCs.

The main differences between vanilla MVC (ala original SmallTalk design pattern) and MVCCE are:

  1. Commands and Events are added to the list of first class citizens (along with Models, Views, Controllers)
  2. Components are explicitly expected to often be Compound and/or Composite,
    but methods are still segregated into Model, View, Controller, Command, Event interfaces;
    They are separate components with separate interfaces, to cover the separate aspects of a widget. (e.g. the View that renders a particular piece of DOM is not combined with the Controller that listens to events from that same piece of DOM).
  3. Controllers are very restricted, moving "business/app" logic into Commands,
    with controller logic limited to handling events in order to decide which Command to call, and which parameters to pass to it.
  4. Commands mirror semantically-high-level User Actions rather than being low level event handlers

I reproduce the two diagrams below (click to expand) created for a client as "cheat sheets" for the pattern I call MVCCE (MVC + Commands and Events)

Click to Expand 

Click to Expand