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
1. 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
Propagates
changes
Rendering
Data
Binding
Action
MVC MVVM
Side
effects

lat
options
lng
Position
[0] [1] [n]
map
markers
…
lat
center
lat
lng lat lng
lng
zoom
Position Position
lat lng
[0] [1] [n]
Delivery Trucks
…
Driver’s
Name VIN AVG
Speed
Coords
Shift
Time
Delivery
Progress
Model ViewModel
View
Template
API Calls
Change Propagation in MVVM Frameworks

• 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 Client
Diffs

• The incoming diffs target parts of the Model
Model ViewModel View
Diffs
Template Renderer
Calls

• FORWARD Utilizes Template IVM to translate Model Diffs to
ViewModel Diffs
Diffs
Template Renderer
Calls

• FORWARD Utilizes Template IVM to translate Model Diffs to
ViewModel Diffs
• Eventually the respective Renderer Calls reflect the changes
to the View
Diffs
Template Renderer
Calls

• 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
^

Angular vs FORWARD

More Related Content

Viewers also liked

Similar to Angular vs FORWARD

Recently uploaded

Angular vs FORWARD