User:MSchottlender-WMF/Notifications UI Architecture

This is an overview of the new Echo notifications UI architecture. The scope of this page is strictly the JavaScript front-end UI.

General structure
The new Echo UI architecture was designed with the MVC model in mind. In general, it has three main components:
 * Controller - The main action-setter of the code. It is responsible for setting up and calling actions through to the API and for building and manipulating the models.
 * Models - These are data components. They are roughly divided into two types - simple and complex.
 * Simple models - The simple models only contain pieces of data without much manipulation. They have setters and getters, and exist to serve as a convenient end-point to request consistent information throughout the different layers.
 * Complex models - The complex models contain pieces of data, but they can also manipulate it, format it, and emit events based on requested actions.
 * View/UI - These are the view elements that draw widgets on the screen. They listen to events from the model and populate themselves accordingly. Their actions are called through the controller.

MVC behavior
As pointed out, the codebase now behaves under the MVC architecture. The order of action should remain strictly in one direction:
 * The widget is calling the controller for an action.
 * The controller calls the API and manipulates the models.
 * The models emit events (primarily an 'update' event) that the widgets listen to.
 * The widgets keep a reference to the model so they can listen to events and read its current state. Widgets should not manipulate the model directly.