Angular vs FORWARD

Techniques that Enable change Propagation in Modern MVVM Frameworks

Internal Architecture of FORWARD and Angular

Costas Zarifis

Web and Database Lab

Categories

MVC VS MVVM

Client-Side Frameworks

Framework Internals

1. Model : Represents the real state content – Usually in the form of a JS object

2. View : Is the user interface

3. ViewModel : Represents the state of the visual layer

4. Controller : Usually imperative programming. Specifies the business

logic and the actions. In MVC it also is responsible for synchronizing the model and the view

Client-Side Frameworks

Client

MVC VS MVVM

Model

Controller

View

Data Updates

Updates

Action

Utilizes

Model

Controller

View

ViewModel

Data

Updates

Propagateschanges

Rendering

DataBinding

Action

MVC MVVM

Side effects

Running Example

lat

options

lng

Position

[0] [1] [n]

map

markers

…lat

center

latlng lat lng

lng

zoom

Position Positionlat lng

[0] [1] [n]

Delivery Trucks

…Driver’s Name VIN AVG

SpeedCoords

Shift Time

DeliveryProgress

Model ViewModel

View

Template

API Calls

Change Propagation in MVVM Frameworks

lat

options

lng

Position

[0] [1] [n]

map

markers

…lat

center

latlng lat lng

lng

zoom


[0] [1] [n]

Delivery Trucks


SpeedCoords

Shift Time

DeliveryProgress

Model ViewModel

View

Template

API Calls


lat

options

lng

Position

[0] [1] [n]

map

markers

…lat

center

latlng lat lng

lng

zoom


[0] [1] [n]

Delivery Trucks


SpeedCoords

Shift Time

DeliveryProgress

Model ViewModel

View

Template

API Calls


lat

options

lng

Position

[0] [1] [n]

map

markers

…lat

center

latlng lat lng

lng

zoom


[0] [1] [n]

Delivery Trucks


SpeedCoords

Shift Time

DeliveryProgress

Model ViewModel

View

Template

API Calls


• Application developers need to add to the $Scope object the variables that will be used in a Template

Change Propagation in Angular

<ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds"> <ui-gmap-marker ng-repeat="truck in delivery_trucks” coords="truck.coords"> </ui-gmap-marker> </ui-gmap-google-map>

$http.get('http://forward.ucsd.edu/truck_service’).then(function(result) {

$scope.delivery_trucks = result.data; });

Template

Controller

• When a variable is bound to the template Angular internally instantiates a watcher.


$http.get('http://forward.ucsd.edu/truck_service’).then(function(result) {

$scope.delivery_trucks = result.data; }); Controller

<ui-gmap-google-map center="map.center" zoom="map.zoom" bounds="map.bounds"> <ui-gmap-marker ng-repeat="truck in delivery_trucks” coords="truck.coords"> </ui-gmap-marker> </ui-gmap-google-map>

Template

Watcher

Watcher

Watcher

• Each Watcher Includes:– A Watch expression: The result of which is being

watched– A Listener : The callback function that executes when

the watched object mutates– Object Equality: variable that dictates the type of

comparison that will be performed to the watched object (deep vs. shallow)

Watch Expression Listener Object Equality


Watcher

• Dirty checking is the process that investigates the watched object for changes. During this process:– The old state of the watched object is compared to the current one– The Object Equality is used to identify which kind of comparison

will be performed– During deep comparison the old state of the watched object is

traversed and compared with the respective part of the current object, while during a shallow comparison only the object reference is checked for changes

– If a change is reported the Listener function is triggered to reflect the changes to the view

– The body of the listener function most of the times contains imperative code (and multiple if-then-else’s) in order to identify which API call can efficiently reflect the changes to the view.


• When an action is triggered Angular automatically initiates the digest cycle. During this process:


Watcher

Watcher

Watcher

– Angular iterates over all the declared watchers and performs dirty checking.

– If some watched object is reported “dirty”, the listener function is called to reflect the respective changes to the view

– If m is the number of watchers that have been declared and n is the size of the watched object (with n being equal to 1 in the case of a shallow watch) the complexity of the algorithm that propagates changes from the Model to the View is O(nm)

Watcher

• “Changes” are first-class-citizens in FORWARD– They are encapsulated using Diffs– A diff has a payload target and an op:

• Insert• Update• Delete

– FORWARD utilizes IVM techniques to generate diffs on the server and propagate them to the client.

Change Propagation in FORWARD

Server ClientDiffs

• The incoming diffs target parts of the Model


Model ViewModel View

Diffs

Template Renderer Calls

• The incoming diffs target parts of the Model• FORWARD Utilizes Template IVM to translate Model Diffs to

ViewModel Diffs



Diffs


• The incoming diffs target parts of the Model• FORWARD Utilizes Template IVM to translate Model Diffs to

ViewModel Diffs• Eventually the respective Renderer Calls reflect the changes

to the View



Diffs


• The Template IVM algorithm traverses the template and looks for bindings that match an incoming diff

• When such a binding is found the Template is used to generate the respective ViewModel Diff

• A ViewModel diff has all the information required for the renderer invocation that will change the application View

• Since there number of potential Visualization Libraries (and renderers) that can be used in an app is unbounded we enable Unit Wrapping


• During Unit Wrapping the Unit Developer uses diff signatures to specify renderers

• A diff signature contains:– A path signature– An Operator (Insert, Update, Delete)

• A Renderer inputs an incoming diff and “outputs” the incrementally updated view

• FORWARD enables Simulation to simplify Unit Wrapping

• Overall complexity O(d) with d being the number of incoming diffs


options

longitude

position

[*]

latitude

map

markers

^

Education

Angular vs FORWARD