#134 TodoMVC Object Oriented Controllers implementation - event flow

fallback image probably showing plantuml error image



Diagram Information

Created by: admin   published
Language: Javascript
Repository: abulka/todomvc-oo  github
Commit: master
Tags: featured-todomvc


The TodoMVC "rosetta stone" app - implemented using Object Oriented Controllers.  This diagram shows the event flow, visualised using using literate code mapping. 

Notice how effective colours are in following the event flow.

This project is a Javascript implementation, and not not officially part of the TodoMVC project - as it is not a framework, nor does it meet the criterion of "having a community" around it.  This is merely my (Andy Bulka's) own implementation using my knowledge of Object Oriented programming, MVC patterns incl. my old MGM pattern where I called the Controller a 'Mediator'. The important thing is that the role of Controller is celebrated as a proper object. They mediate between the GUI and the model/app. 

The role of the App - this is important and mostly overlooked. Whilst it is fine to wire Controllers directly to model instances, you will also need to create a more centralised class - the "App" to hold business logic which manipulates the model. The App can also hold "view state" like the state of the "filter" in this Todo application.

Interim notes:

Controllers receive

  • GUI events from DOM and 
  • Internal events from model and other controllers

their job is to handle the gui encoding/decoding and then delegate as soon as possible to the model or to the app.

The Model is dumb and doesn't know about GUI of course, nor about app.

The App holds refs to models and creates controllers.  

  • The wiring/registering/listening of controllers to events happens in controllers themselves, though could potentially be centralised and done by the App.
  • The App can hold visual model state e.g. current 'filter'

Controllers point back to app, in order to get at this state if needed.

Coming soon

There will be a more detailed article on Medium to accompany this diagram, later in 2020. The code is open source on Github.

Modules being visualised

List of repository modules/files being visualised in the above diagram: