Akshat Dubey

Rupali Roy Choudhury

Suranjana Sengupta

Anand Sundaram

NUSMODS

Text

Application Architecture

Presentation Layer

Application Layer

Business Logic

Data Access

• User Interface Architecture
• Separation of Concerns

Model

Presenter

View

Model

Presenter

View

Module

ModulePresenter

ModulesView

ModuleItemView

ModulesListingView

Demo: Creating a timetable

Activity Diagram: Creating a timetable

Mediator Pattern

Uses Backbone.js and Marionette

Lot of components interacting with each other

Solution?

Mediator Pattern

• No direct communication, only through Mediator Object
• Reduced Dependencies
• Lower Coupling

ModuleSearch

TimeTable

ModuleList

Mediator

(listens for events)

Register

Calls

functions

addModule

removeModule

displayLesson

Make

changes

A Similar App

Cors Planner

Thank You!

References

1. NUSMods on GitHub: https://github.com/nusmodifications/nusmods/
2. BackboneJS: http://backbonejs.org/
3. MarionetteJS: http://marionettejs.com/
4. Mediator Pattern In Marionette:                 http://www.slideshare.net/matt-briggs/marionette-structure-with-modules
5. Model-View-Presenter:                         https://en.wikipedia.org/wiki/Model–view–presenter