What the heck do “declarative” and “reactive” actually mean?

ANDRÉ KOVAC 1 WHAT THE HECK DO “DECLARATIVE” AND “REACTIVE”
ACTUALLY MEAN?

2 https://media.istockphoto.com/photos/teenagers-messy-room-picture-id1087233556?k=20&m=1087233556&s=612x612&w=0&h=GJ6_asZveN4P4M65pAysJWRnLf9ajxgKyhPoZsebRo8=

3 “Pick up the toys, then empty the bin, then
remove dust, then … and fi nally vacuum the fl oor.” IMPERATIVE Here’s a picture of what your room looks like when it’s clean. In 30 minutes this room will be clean. DECLARATIVE

4 SOFTWARE ENGINEER ANDRÉ KOVAC TECHNOLOGY TRAINER

6 …ARE DECLARATIVE & REACTIVE. MODERN FRONTEND FRAMEWORKS… ANDRÉ KOVAC

7 AGENDA 1 BROWSER + APP STATE HOW DO THEY
INTERACT? 2 IMPROVE WEB DEVELOPMENT WITH REACTIVENESS 4 HOW IS IT DONE? REACT VS. SVELTE 3 DESCRIBE USER INTERFACE DECLARATIVELY

USER INTERFACE DEVELOPMENT 8

LET’S BUILD AN INTERACTIVE USER INTERFACE 9 <h1 id="number"></h1> <button
onclick="onClick()"> Click to re-render </button> // initialize state let count = 0; // render default value document.getElementById("number").innerHTML = 0; const onClick = () => { // 1. update state count = count + 1; // 2. re-render user interface (side-effect) document.getElementById("number").innerHTML = count; }; HTML JAVASCRIPT

10 SYNC VALUE SYNCHRONIZATION document.getElementById("number").innerHTML = count; < APP STATE
/> UI STATE

11 HOW DOES JAVASCRIPT INTERACT WITH THE BROWSER? LET’S LOOK
A BIT MORE INTO IT

13 1 JAVASCRIPT ENGINE READS <HTML /> AND CREATES DOCUMENT
OBJECT MODEL (DOM)

14 1 BROWSER READS <HTML /> AND CREATES DOCUMENT OBJECT
MODEL (DOM) HTML FILE DOM JAVASCRIPT

15 1 BROWSER READS <HTML /> AND CREATES DOCUMENT OBJECT
MODEL (DOM) 2 JAVASCRIPT ENGINE USES DOM TO RENDER THE USER INTERFACE

16 3 OUR JAVASCRIPT CODE CAN UPDATE THE DOM VIA
THE WEB API (E.G. THE DOCUMENT OBJECT). 1 BROWSER READS <HTML /> AND CREATES DOCUMENT OBJECT MODEL (DOM) 2 JAVASCRIPT ENGINE USES DOM TO RENDER THE USER INTERFACE

17 3 OUR JAVASCRIPT CODE CAN UPDATE THE DOM VIA
THE WEB API (E.G. THE DOCUMENT OBJECT). 1 BROWSER READS <HTML /> AND CREATES DOCUMENT OBJECT MODEL (DOM) 2 JAVASCRIPT ENGINE USES DOM TO RENDER THE USER INTERFACE APP STATE HAS TO CONSTANTLY SYNCHRONISE WITH THE UI

SYNC OF APP STATE WITH USER INTERFACE 18 // initialize
state let count = 0; // render default value document.getElementById("number").innerHTML = 7; const onClick = () => { // 1. update state count = count + 1; // 2. re-render user interface (side-effect) document.getElementById("number").innerHTML = count; }; UI JAVASCRIPT WHY IS THIS NOT OPTIMAL?

19 REACTIVE PROGRAMMING

20 REACTIVITY = AUTOMATIC UPDATES

COUNT 21 // declare and assign value let count =
0; // re-assign value count = count + 1; // log value console.log({ count });

NON-REACTIVE CODE VS. REACTIVE CODE 22 // declare and assign
value let count = 0; // create copy let countCopy = count; // re-assign value count = count + 1; // log value console.log({ count, countCopy }); 🤔 MAKES SENSE COPY KEEPS FORMER VALUE OF "COUNT".

NON-REACTIVE CODE VS. REACTIVE CODE 23 // declare and assign
value let count = 0; // create copy let countCopy = count; // re-assign value count = count + 1; // 😕 have to sync count & countCopy countCopy = count; // log value console.log({ count, countCopy }); 💘 SYNC NECESSARY

MAKE VARIABLE REACTIVE (NOT VALID JAVASCRIPT) 24 // declare and
assign value let count = 0; // create reactive copy $: countCopy = count; // re-assign value count = count + 1; // log value console.log({ count, countCopy }); $: SPECIAL REACTIVE OPERATOR (NOT PART OF VANILLA JAVASCRIPT)

RELATION TO DOM SYNCHRONIZATION 25 let value = 0; let
valueInDOM = value; // 🎉 `value` and `valueInDOM` are in sync console.log({ value, valueInDOM }); value = value + 1; valueInDOM = value; // manual re-render necessary // 😕 `value` and `valueInDOM` are NOT in sync console.log({ value, valueInDOM });

A STORY 26 let mother = "My child is "
let baby = "innocent" let parentalBond = mother + baby console.log(parentalBond) // "My child is innocent" baby = "independent" console.log(baby) // "independent" console.log(parentalBond) // "My child is innocent" 💘 REACTIVENESS CREATES A BOND

27 UI AS A FUNCTION OF STATE MODERN FRONTEND DEVELOPMENT
https://docs. fl utter.dev/development/data-and-backend/state-mgmt/declarative

1. LET’S TIDY UP 28 const render = function(val) {
document.getElementById("number").innerHTML = val; } // render default value render(0); const onClick = () => { // 1. update state state = state + 1; // 2. re-render user interface render(state); };

STATE CHANGE LEADS TO RE-RENDER 29 state = { value:
undefined, setValue: function (val) { // 1. set state value this.value = val; // 2. render user interface this.render(); }, render: function () { document.getElementById("number").innerHTML = this.value; }, }; const onClick = () => { state.setValue(state.value + 1); // state change leads to re-render! }; // set default value state.setValue(0);

STATE CHANGE LEADS TO RE-RENDER 30 state = { value:
undefined, setValue: function (val) { // 1. set state value this.value = val; // 2. render user interface this.render(); }, render: function () { document.getElementById("number").innerHTML = this.value; }, }; const onClick = () => { state.setValue(state.value + 1); // state change leads to re-render! }; // set default value state.setValue(0);

31 state = { value: undefined, setValue: function (val) {
// 1. set state value this.value = val; // 2. render user interface this.render(); }, render: function () { document.getElementById("number").innerHTML = this.value; }, }; const onClick = () => { state.setValue(state.value + 1); // state change leads to re-render! }; // set default value state.setValue(0); STATE CHANGE LEADS TO RE-RENDER

32 DERIVED VALUES

DERIVED VALUE 33 let count = 0; let double =
count * 2; // I want doubled to be in sync with count // 🎉 `count` and `doubled` are in sync console.log({ count, double }); count = count + 1; double = count * 2; // manual re-run of computation necessary! // 😕 `count` and `doubled` are NOT in sync console.log({ count, double });

DERIVED VALUE 34 state = { value: undefined, double: undefined,
setValue: function (val) { // 1. set both state values this.value = val; this.double = val * 2; // 2. render user interface this.render(); }, render: function () { document.getElementById("number").innerHTML = this.value; // Also update the `double` value in the UI document.getElementById("double").innerHTML = this.double; }, }; const onClick = () => { state.setValue(state.value + 1); }; // set default value state.setValue(0);

35 state = { // ... render: function () {
document.getElementById("number").innerHTML = this.value; // 😰: I have to remember to also update the double value in the UI document.getElementById("double").innerHTML = this.double; }, // ... }; DERIVED VALUE

36 CONDITIONAL LOGIC

2. EVENTUALLY RENDERED UI NOT EASILY IDENTIFIABLE FROM CODE. 37
state = { value: undefined, double: undefined, setValue: function (val) { // 1. set state values this.value = val; this.double = val * 2; // 2. render user interface this.render(); }, render: function () { document.getElementById("number").innerHTML = this.value; document.getElementById("double").innerHTML = this.double; // add congrats message if (this.value === 5) { let titleNode = document.createElement("p"); titleNode.id = "congrats"; titleNode.innerHTML = "Congratulations 🎉 "; const body = document.querySelector("body"); body.insertBefore(titleNode, body.childNodes[0]); } }, }; const onClick = () => { state.setValue(state.value + 1); }; // set default value state.setValue(0);

state = { // ... render: function () { document.getElementById("number").innerHTML = this._value_internal; // 😰: I have to remember to also update the double value in the UI document.getElementById("double").innerHTML = this._double_internal; // add congrats message if (this._value_internal === 5) { let titleNode = document.createElement("p"); titleNode.id = "congrats"; titleNode.innerHTML = "Congratulations 🎉"; const body = document.querySelector("body"); body.insertBefore(titleNode, body.childNodes[0]); } }, // ... };

<body> <p id="number"></p> <div>Double: <span id="double"></span></div> <button onclick="onClick()">Click to increment</button> </body> HTML <body> <p id="congrats">Congratulations 🎉</p> <p id=“number"></p> <div>Double: <span id="double"></span></div> <button onclick="onClick()">Click to increment</button> </body> DOM AFTER COUNT >= 5

<body> <p id="number"></p> <div>Double: <span id="double"></span></div> <button onclick="onClick()">Click to increment count</ button> <script src="./index.js"></script> </body> // add congrats message if (count === 5) { let titleNode = document.createElement("p"); titleNode.id = "congrats"; titleNode.innerHTML = "Congratulations 🎉"; const body = document.querySelector("body"); body.insertBefore(titleNode, body.childNodes[0]); } HTML JAVASCRIPT 👉 LOGIC IS BUILT AROUND DOM MANIPULATION AND NOT AROUND STATE UPDATES. <body> <p id="congrats">Congratulations 🎉</p> <p id=“number"></p> <div>Double: <span id="double"></span></div> <button onclick="onClick()">Click to increment count</ button> <script src="./index.js"></script> </body> DOM AFTER COUNT > 5

NO MORE IMPERATIVE DOM MANIPULATIONS! 41 // add congrats message
if (count === 5) { let titleNode = document.createElement("p"); titleNode.id = "congrats"; titleNode.innerHTML = "Congratulations 🎉"; const body = document.querySelector("body"); body.insertBefore(titleNode, body.childNodes[0]); } JAVASCRIPT LET’S BUILD UIS IN A DECLARATIVE WAY

IMPERATIVE VS DECLARATIVE 42 COMPARING PROGRAMMING PARADIGMS

43 https://media.istockphoto.com/photos/teenagers-messy-room-picture-id1087233556?k=20&m=1087233556&s=612x612&w=0&h=GJ6_asZveN4P4M65pAysJWRnLf9ajxgKyhPoZsebRo8= // add congrats message if (count === 5)
{ let titleNode = document.createElement("p"); titleNode.id = "congrats"; titleNode.innerHTML = "Congratulations 🎉"; const body = document.querySelector("body"); body.insertBefore(titleNode, body.childNodes[0]); } JAVASCRIPT

IMPERATIVE HOW HOW COMPUTERS OPERATE 44 DECLARATIVE WHAT DESCRIBE POSSIBLE
APPLICATION STATES

FROM IMPERATIVE TO DECLARATIVE 45  {#if count
>= 5} <p>Congratulations! 🎉</p> {/if}  SVELTE // ... if (this._value_internal === 5) { let titleNode = document.createElement("p"); titleNode.id = "congrats"; titleNode.innerHTML = "Congratulations 🎉"; const body = document.querySelector("body"); body.insertBefore( titleNode, body.childNodes[0] ); } // ...

46 REACT & SVELTE

47 REACT A DECLARATIVE UI FRAMEWORK

REACT (REACTIVE AND DECLARATIVE) 48 const App = () =>
{ return ( <> <h1>No value yet</h1> <button> Click to increment </button> </> ); }; const rootNode = document.getElementById("root"); ReactDOM.render(<App />, rootNode);

{ const [value, setValue] = React.useState(0); // set default value const onClick = () => { setValue(value + 1); // state change leads to re-render! }; return ( <> <h1>{value}</h1> <button onClick={onClick}>Click to re-render</button> </> ); }; const rootNode = document.getElementById("root"); ReactDOM.render(<App />, rootNode);

{ const [value, setValue] = React.useState(0); // set default value const double = value * 2; // derived value const onClick = () => { setValue(value + 1) // state change leads to re-render! } return ( <> {value >= 5 ? 'Congratulations 🎉' : null} <h1>{value}</h1> <p>Double: <span>{double}</span></p> <button onClick={onClick}> Click to increment </button> </> ); }; const rootNode = document.getElementById("root"); ReactDOM.render(<App />, rootNode); VIRTUAL DOM MAKES REACT DECLARATIVE USESTATE HOOK MAKES REACT REACTIVE

51 SVELTE TRULY REACTIVE

REACT STYLE (IN VANILLA JS) 52 state = { value:
undefined, double: undefined, setValue: function (val) { // 1. set both state values this.value = val; this.double = val * 2; // 2. render user interface this.render(); }, render: function () { document.getElementById("number").innerHTML = this.value; document.getElementById("double").innerHTML = this.double; }, }; const onClick = () => { state.setValue(state.value + 1); }; // set default value state.setValue(0);

TRULY REACTIVE VALUE (IN VANILLA JS) 53 state = {
_value_internal: undefined, _double_internal: undefined, set value(val) { // 1. set both state values this._value_internal = val; this._double_internal = val * 2; // 2. render user interface this.render(); }, render: function () { document.getElementById("number").innerHTML = this._value_internal; document.getElementById("double").innerHTML = this._double_internal; }, get value() { return this._value_internal; }, }; const onClick = () => { state.value = state.value + 1; }; // set default value state.value = 0;

REACT VS. SVELTE (IN VANILLA JS) 54 SETTER FUNCTION ->
REACTIVE // ... const onClick = () => { state.value = state.value + 1; }; // ... // ... const onClick = () => { state.setValue(state.value + 1); }; // ... REACTIVE ASSIGNMENT

REACT VS. SVELTE (IN VANILLA JS) 55 SETTER FUNCTION ->
REACTIVE // ... const onClick = () => { state.value = state.value + 1; }; // ... // ... const onClick = () => { state.setValue(state.value + 1); }; // ... REACTIVE ASSIGNMENT

REACT VS. SVELTE 56 SETTER FUNCTION -> REACTIVE // ...
const onClick = () => { state.value = state.value + 1; }; // ... // ... const onClick = () => { state.setValue(state.value + 1); }; // ... REACTIVE ASSIGNMENT const onClick = () => { setValue(value + 1); }; const onClick = () => { value = value + 1; }

TRULY REACTIVE VALUE 57

58 VANILLA JS BECOMES REACTIVE VARIABLE ASSIGNMENTS TRIGGER REACTIVITY

SVELTE (TRULY REACTIVE AND DECLARATIVE) 59 <script> let value =
0; const onClick = () => { value = value + 1; } </script> <h1>{value}</h1> <button on:click={onClick}> Click to increment </button>

SVELTE (DERIVED VALUE WITH THE DESTINY OPERATOR) 60 <script> let
value = 0; $: double = value * 2; function onClick() { value = value + 1; } </script> <h1>{value}</h1> <p> Double: <span>{double}</span> </p> <button on:click={onClick}> Click to increment </button>

SVELTE (CONDITIONAL) 61 <script> let value = 0; $: double
= value * 2; function onClick() { value = value + 1; } </script> {#if value >= 5} <p>Congratulations! 🎉</p> {/if} <h1>{value}</h1> <p> Double: <span>{double}</span> </p> <button on:click={onClick}> Click to increment </button>

REACT VS. SVELTE 62 REACT SVELTE {#if value >= 5}
<p>Congratulations! 🎉</p> {/if} <h1>{value}</h1> <p> Double: <span>{double}</span> </p> <button on:click={onClick}> Click to increment </button> return ( <> {value >= 5 ? 'Congratulations 🎉' : null} <h1>{value}</h1> <p>Double: <span>{double}</span></p> <button onClick={onClick}> Click to increment </button> </> );

FLUTTER QUIZ 63 return ViewB( color: red, child: ViewC(...), )
IMPERATIVE DECLARATIVE b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) https://docs. fl utter.dev/get-started/ fl utter-for/declarative Let’s say we have a view b which we want to build and style:

FLUTTER QUIZ 64 return ViewB( color: red, child: ViewC(...), )
IMPERATIVE b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) https://docs. fl utter.dev/get-started/ fl utter-for/declarative Let’s say we have a view b which we want to build and style: <ViewB style={{ color: 'red' }}> <ViewC {...} /> </ViewB>; DECLARATIVE

65 DECLARATIVE, REACTIVE CODE IS …A BIT MAGICAL BUT …EVENTUALLY
MUCH EASIER TO REASON ABOUT.

66 LINKEDIN LET’S CONNECT! https://twitter.com/andrekovac TWITTER ANDRÉ KOVAC

What the heck do “declarative” and “reactive” a...

What the heck do “declarative” and “reactive” actually mean?

More Decks by André Kovac

Other Decks in Programming

Featured

Transcript