From User Action to Framework Reaction

From User Action to
Framework Reaction
Reactivity in modern Frontend Frameworks

Jonas Bandi
jonas.bandi@ivorycode.com
Twitter: @jbandi
- Freelancer, in den letzten 6 Jahren vor allem in Projekten
im Spannungsfeld zwischen modernen Webentwicklung
und traditionellen Geschäftsanwendungen.
- Dozent an der Berner Fachhochschule seit 2007
- In-House Kurse:Web-Technologien im Enterprise
UBS, Postfinance, Mobiliar, SBB, BIT, BSI, Elca ...
JavaScript / Angular / React / Vue.js
Schulung / Beratung / Coaching / Reviews
jonas.bandi@ivorycode.com
http://ivorycode.com/#schulung

Agenda
Intro
Baseline:
"Out of the Box"-Reactivity of , and
(Slides and Demos)
Further Explorations:
Demos and Code Explorations
https://github.com/jbandi/framework-reactivity

Reactive Programming?
In computing, reactive programming is a declarative
programming paradigm concerned with data
streams and the propagation of change.
- Wikipedia
Reactive programming is programming
with asynchronous data streams.
Andre Staltz
The introduction to Reactive Programming you've been missing
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
click$
.pipe(scan(count => count + 1, 0))
.subscribe(count => console.log(`Clicked ${count} times`));

In the Beginning there
was Darkness ...

... and we manipulated
the DOM ...
$(".menu-item")
.removeClass("active")
.addClass("inactive ")
.css("padding-left", "0px")
.find(".trigger")
.click(function(ev) {
// spaghetti carbonara?
})
.each(function () {
// spaghetti napoli?
});

Client Side MVC
HTML
Brow
ser
Model:
POJOs
Controller
View
DOM
Server
initial load
AJAX

Thou shalt not manipulate
the DOM!

State is Managed in JavaScript
Action:
change
state
Reaction:
re-render
Dom
Ajax
Timeout
...
User
t
r
i
g
g
e
r
State
Reactivity:The framework reacts on state
changes and updates the UI.
DOM
UI
EvanYou - Reactivity in Frontend JavaScript Frameworks: https://www.youtube.com/watch?v=r4pNEdIt_l4
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

Reactivity:What and Why?
Traditional
"DOM-centric"
applications
UI = state
Browsers have "built-in" reactivity: If the DOM is
changed, the UI is re-rendered.
UI = f(state)
With modern SPA
architectures (MVC,
MVP, Components …) the
client state is
represented as
JavaScript objects.
The UI that you can see and manipulate
on screen is the result of painting a
visual representation of data.
Reactive programming in general addresses the question: How to
deal with change over time?
The UI should (automatically) re-render when the state changes.
When to call?
https://blog.danlew.net/2017/07/27/an-introduction-to-functional-reactive-programming/

https://twitter.com/Rich_Harris/status/1058751085706383362

Zone.js
Change
Detection
Angular Default Reactivity

@Component({
selector: 'app-counter',
template: `
<div>
{{count}}
</div>
`
})
export class CounterComponent implements OnInit {
count = 0;
ngOnInit() {
setInterval(() => { this.count++; }, 1000);
}
}

Zone.js:
The "Magic" in Angular Change Detection
Zone.js is a JavaScript library provided by the Angular project that
patches many asynchronous browser APIs. Listeners can then be
triggered when these APIs are executed.
Angular relies on Zone.js to trigger automatic change detection.
Angular is running inside the NgZone (a zone created via
Zone.js).When async APIs are executed Angular gets notified
when the execution has finished and triggers change detection.
https://github.com/angular/zone.js/
https://medium.com/better-programming/zone-js-for-angular-devs-573d89bbb890
Patched APIs (examples): setTimeout, Promise, XMLHttpRequest, prompt
and DOM events.
More details: https://github.com/angular/angular/blob/master/packages/zone.js/STANDARD-APIS.md

Default Reactivity in Angular
UI = f(state)
Triggered by Zone.js
"simulated reactivity"
setInterval(
1000);
Zone.js
"Zone to Angular":
Hey, there might be something going on ...
apply minimal
changes.
DOM
() => this.count++
State
count: 42
let's check
everything ...
increase
<div>42</div>
change
detection

Default Change Detection
As default Angular detects changes by inspecting the state of all
components every time change detection is triggered.
Component
Component Component
Component Component
event
trigger change detection
on app
propagate change
detection to
children
propagate change
detection to
children
CD
CD
CD
CD
CD
Change detection is always
triggered at the top of the
component hirarchy and
propagates down to each child.
Every value used in a template
is inspected and compared to
the previous value.
Zone.js Checking all components
on every possible event can
be performance intense.

Default Reactivity in Angular
Zone.js with Default Change Detection:
• are a form of simulated reactivity: the framework
does not react to changes but to events that might
potentially resulted in changes
• are a form of transparent reactivity: It makes
reactivity an implicit characteristic of your program.
TheTaxonomy of Reactive Programming: https://vsavkin.com/the-taxonomy-of-reactive-programming-d40e2e23dee4
https://github.com/meteor/docs/blob/version-NEXT/long-form/tracker-manual.md
A common alternative in Angular is to model Reactivity
explicitly with RxJS, this is a form of explicit reactivity.

Default Angular Reactivity
Transparent Reactivity:
The programmer should be
able to use ideomatic
JavaScript, the Framework
does the rest.
Strength Weakness
Zone.js: Patching the browser is
problematic on many levels.
Brute-force approach of default
change detection is not optimal in
regard to performance.
Change Detection imposes
constraints ...
- avoid setter/getters
- unidirectional data-flow
- avoid async/await
"Simulated Reactivity"

Unidirectional Data Flow
Angular enforces unidirectional data flow from top to
bottom of the component tree.
• A child is not allowed to change the state of the parent once
the parent changes have been processed.
• This prevents cycles in the change detection.
(to prevent inconsistencies between state and ui and for better
performance)
• In development mode Angular performs a check (a second
change detection) to ensure that the component tree has
not changed after change detection. If there are changes it
throws a
ExpressionChangedAfterItHasBeenCheckedError.
https://indepth.dev/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error/

(Missing?) Reactivity in React

Function Components
function AppComponent(props) {
return (
<div>
<h1>{props.title}</h1>
<p>{props.message}</p>
</div>
);
}
properties
A components is a plain JavaScript function.
UI
(DOM ... )
The function is called each time the UI is
renedered (i.e. with every data-change)
A component transforms JavaScript state into the DOM structure:
UI = f(state)

import React, { useEffect, useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
setInterval(() => {
setCount(count => count + 1);
}, 1000)
}, []);
return <div>{count}</div>
}
React is used
to manage the
state

Reactivity in React
UI = f(state) triggered by
the programmer
setInterval(() =>
1000);
Programmer to React:
"Please change the state for me ... "
apply minimal changes.
DOM
setCount(count => count + 1),
State
count: 42
update the state
<div>42</div>
trigger re-rendering
virtual
DOM

React Reactivity
Functional Mindset:
- Rendering is a side-effect
of state changes.
- Components transform
state to ui.
Strength Weakness
"Render everything approach" is
wasteful.
State is managed by React: we
have to use the APIs and concepts
of React.
"Everything is rendered on every state change"

import { reactive, watch } from 'vue'
const state = reactive({
count: 0
})
watch(() => {
document.body.innerHTML = `count is ${state.count}`
})
setInterval(() => state.count++, 1000);
The example is using the composition API of upcoming vue 3:
https://vue-composition-api-rfc.netlify.com/
This is available inVue 2: https://github.com/vuejs/composition-api
changing state triggers re-rendering

Reactivity inVue
UI = f(state) triggered by
reactive state
setInterval(
() => state.count++,
1000);
apply minimal changes.
DOM
State (Vue proxy)
{ count: 42 }
<div>42</div>
trigger re-rendering
get/set count()
increase

ChangeTracking & Reactive State
https://vuejs.org/v2/guide/reactivity.html

Vue Reactivity
"True Reactivity":The state
can be observed.
Strength Weakness
State is not "plain" JavaScript, which
comes with its own limitations.
"Reactive State"

Zone.js
Change
Detection
OnPush
Observables
Zone-Less
Angular Reactivity Options

Observables & async Pipe
UI$ = f(state$)
UI = f(state)
Reactivity realized with Streams
Triggered by Zone.js
"streams: true reactive programming"

Computed State
Anything that can be derived from the
application state, should be derived.
Automatically.
- MobX Introduction
No ideomatic
solution:
- getters/setters
- ngOnChanges
- Pure Pipe
- Observables
- (NgRx)
Derived state is
calculated during
rendering.
Optmization
with
Memoization.
Computed
properties.

State outside Components
Application-
State
Component
Tree
change
render
Application
A state container extracts the shared state out of the
components, and manages it in a global singleton.
The component tree becomes a big "view", any
component can access the state or trigger changes, no
matter where they are in the tree!
store

Code: https://github.com/jbandi/framework-reactivity
Have Fun with the
Framework of your Choice!
Twitter: @jbandi

Resources
• TheTaxonomy of Reactive Programming
https://vsavkin.com/the-taxonomy-of-reactive-programming-d40e2e23dee4
• Front end development and change detection (Angular vs. React):
https://www.youtube.com/watch?v=1i8klHov3vA
• JS Roundabout, Reactivity in React andVue, February 2018
https://www.youtube.com/watch?v=HWZq_rlJU4o
• Why React Is *Not* Reactive - Shawn Wang @ ReactNYC
https://www.youtube.com/watch?v=ZZoB5frlcnE
• Shift Dev 2019: "Rethinking Reactivity" - Rich Harris (NewYorkTimes)
https://www.youtube.com/watch?v=gJ2P6hGwcgo
• The Return of 'Write Less, Do More' by Rich Harris | JSCAMP 2019
https://www.youtube.com/watch?v=BzX4aTRPzno
• Reactivity:Vue 2 vsVue 3
https://www.vuemastery.com/blog/Reactivity-Vue2-vs-Vue3/

From User Action to Framework Reaction

More Related Content

What's hot (20)

Similar to From User Action to Framework Reaction (20)

Recently uploaded (20)

From User Action to Framework Reaction