CINCO High Level Frontend Architecture[Proposal] - Cinco - CAKE Intranet

https://wiki.leapset.com/pages/viewpage.action?pageId=17697770

Pages / / Design Docs

CINCO High Level Frontend Architecture[Proposal]

Added by Vimukthi Bandara, last edited by Vimukthi Bandara on Sep 22, 2014

Introduction
High Level Architecture Components
Registry
Router
Controller
Service
Repository
Model
Validator
ViewModel
VIew
Initialization Order

Introduction
This document specifies(without ambiguities) the high level architecture followed by frontend JavaScript code.

High Level Architecture Components

1 of 6

02/18/2016 11:58 AM

CINCO High Level Frontend Architecture[Proposal] - Cinco - CAKE Intranet

https://wiki.leapset.com/pages/viewpage.action?pageId=17697770

<<singleton>>
Registry

<<singleton>>
Service

ViewModel

Use 1

View

Use 0 or more

Shows 0
or more

Use 1

Use 0 or more

<<singleton>>
Controller

Use 1 or more

Use 0
or
more

Use 1 or more

<<singleton>>
Repository

Model

Routes to

<<singleton>>
Router

Validator
<<singleton>>
MOXY Connector

AJAX
Websocket connector

MOXY

Registry
Registry is responsible for initializing components that require conditional initialization-destruction and life cycle management. For example if a certain class should only
be initialized as a singleton or as a limited number of reusable objects(pool) it can be submitted to registry for initialization. Registry must be the first component to be

2 of 6

02/18/2016 11:58 AM

CINCO High Level Frontend Architecture[Proposal] - Cinco - CAKE Intranet

https://wiki.leapset.com/pages/viewpage.action?pageId=17697770

initialized once the browser has finished loading the resources for frontend.

Router
Router is a global singleton responsible for detecting browser URL fragment changes and calling appropriate controller and function based on provided parameters.
Router DOES NOT call on any component other than the Controllers. But the router can be invoked by any component by changing the browser URL fragment.

Controller
There can be multiple classes of controllers in the FE handling user actions and events. They can coordinate between other components such as services, repositories
or models to perform business logic and obtain data necessary to complete an action. Completing an action could mean passing responsibility to another Controller
using Router or rendering a View. There should only be one(singleton) Controller of a given type at any given time in FE runtime.

Service
A Service is responsible for executing a certain set of business logic related to FE. For example OrderService performs logic related to creation and fulfillment of Orders.
A Service can use multiple types of Repositories and Models in order to carry out the required business logic. There should only be one(singleton) Service of a given
type at any given time in FE runtime.

Repository
Repository knows how to read, update a data source for a given Model. It can perform these operations based on certain conditions as well. For example retrieve Order
objects created on a given day. Ideally there should be a one to one association between a type of Model and a Repository.

Model
A Model represents a business object with its attributes. CINCO follows an anemic domain model where Model classes do not contain any business logic. All business
logic related to a Model should be performed by a relevant Service. Models must provide methods for them to be serialized or de-serialized.

Validator
A Validator provides methods for validating model field by an external component. Model can have 0 or 1 Validators associated with it.

ViewModel
A ViewModel is used by a controller to pass on relevant information for a given view when it renders the view. There should be a one to one mapping between a View
and its ViewModel.

VIew

3 of 6

02/18/2016 11:58 AM

CINCO High Level Frontend Architecture[Proposal] - Cinco - CAKE Intranet

https://wiki.leapset.com/pages/viewpage.action?pageId=17697770

A View class knows how to render a particular view based on a ViewModel passed on by a Controller. It also contains code to handle user input events(clicks, drags,
typing etc.). If a certain user input event requires handling by a Controller, the View will invoke that Controller by setting appropriate URL fragment for the Router to
handle. A View must not directly call any other component(Controllers, Services etc.) in the FE.

Initialization Order
When CINCO FE first loads on to the browser it follows a preset initialization order illustrated by the diagram.

4 of 6

02/18/2016 11:58 AM

CINCO High Level Frontend Architecture[Proposal] - Cinco - CAKE Intranet

https://wiki.leapset.com/pages/viewpage.action?pageId=17697770

<<singleton>>
Registry

<<singleton>>
Repository

<<singleton>>
Service

<<singleton>>
Controller

<<singleton>>
Router
Initialized on demand

5 of 6

ViewModel

Model

View

Validator

02/18/2016 11:58 AM

CINCO High Level Frontend Architecture[Proposal] - Cinco - CAKE Intranet

Like

Priyantha likes this

https://wiki.leapset.com/pages/viewpage.action?pageId=17697770

decisions

1 Comment
Priyantha
@ Vimukthi Bandara I added the MOXY connector in to the diagram too. Service will have a connection to the moxy connector always to Get messages. and
via the events controllers or the view must get notified. Lets discuss this in the refactor session again and see where the best place for this

6 of 6

02/18/2016 11:58 AM