2020

1 / 43
1

2020

2

3
ko js
4
ko js

Observable (state)

Computed (side-effect)

PureComputed (derived state)

5

Fine-Grained Reactivity

6

Reactive JavaScript: Unveiling the Magic of Signals

A Journey into Reactive JavaScript.

Kalwabed Rizki

JogjaJS logo June 17th, 2023
7

Kalwabed Rizki

Software Engineer, VNT

Instructor, Alterra Academy

kalwabed.xyz
kalwabed
kalwabedrzk
profile
8
9

Signals is reactive

10

What is Reactive Programming?

11

"The essence of functional reactive programming is to specify the dynamic behavior of a value completely at the time of declaration"

Heinrich Apfelmus, via Michel Weststrate

12

"Reactive Programming is a declarative programming paradigm built on data-centric event emitters."

Ryan Carniato, in "What the hell is Reactive Programming anyway?"

13

paul reative blog

https://paulstovell.com/reactive-programming

14

Imagine we’re in 2051

15

Analyze the code

var foo = 10;
var bar = foo + 1;
foo = 11;
bar = foo + 1;
var foo = 10;
var bar = foo + 1;
foo = 11;
bar = foo + 1;

foo and bar are brothers. bar is dependent on foo for support.

When foo changes, bar does not.

foo had to stabilize the relationship between them again, and it wouldn’t be for long.

16

We are still in 2051

and someone has discovered something called destiny operator.

17

What if we can write code like this?

with destiny operator.

var foo = 10;
var bar <== foo + 1;
foo = 20;
Assert.AreEqual(21, bar);
var foo = 10;
var bar <== foo + 1;
foo = 20;
Assert.AreEqual(21, bar);

Some say that when the compiler encounters code that changes foo, it inserts the corresponding change for bar, such that they are always in sync.

18

In simple terms

"I have no time. Please explain it to me like I’m five."

19

Reactive programming

a = b + c
a = b + c

The value of a will change every time the value of b or c variable changes.

20
+

15

21

So, what does this have to do with Signals?

22

Signals

Signals are the main players in what is called the reactive system.

It consists of a:

  • getter
  • setter
  • value
23

Some say that at its core, Signals is an event emitter.

But the key difference is how it manages its subscriptions.

24

Signals are not built alone

We have partner in crime called Reactions and Derivations.

25

Reactions

Reactions are functions that are called when a signal changes.

26

Reactions

import { ref, watchEffect } from 'vue'

console.log("1. Create Signal");
const count = ref(0);

console.log("2. Create Reaction");
watchEffect(() => console.log("The count is", count.value))

console.log("3. Set count to 10");
count.value = 10

/* outputs
1. Create Signal
2. Create Reaction
The count is 0
3. Set count to 10
The count is 10
/*
import { ref, watchEffect } from 'vue'

console.log("1. Create Signal");
const count = ref(0);

console.log("2. Create Reaction");
watchEffect(() => console.log("The count is", count.value))

console.log("3. Set count to 10");
count.value = 10

/* outputs
1. Create Signal
2. Create Reaction
The count is 0
3. Set count to 10
The count is 10
/*
27

Derivations

Derivations are signals that are derived from other signals.

28

Derivations

import { ref, watchEffect } from 'vue'

console.log("1. Create Signals");
const firstName = ref("John");
const lastName = ref("Smith");

const fullName = () => {
  console.log("Creating/Updating fullName");
  return `${firstName.value} ${lastName.value}`
};

console.log("2. Create Reactions");
watchEffect(() => console.log("My name is", fullName()))

watchEffect(() => console.log("Your name is not", fullName()));

console.log("3. Set new firstName");
firstName.value = "Jacob";
import { ref, watchEffect } from 'vue'

console.log("1. Create Signals");
const firstName = ref("John");
const lastName = ref("Smith");

const fullName = () => {
  console.log("Creating/Updating fullName");
  return `${firstName.value} ${lastName.value}`
};

console.log("2. Create Reactions");
watchEffect(() => console.log("My name is", fullName()))

watchEffect(() => console.log("Your name is not", fullName()));

console.log("3. Set new firstName");
firstName.value = "Jacob";
/* outputs
1. Create Signals
2. Create Reactions

Creating/Updating fullName
My name is John Smith

Creating/Updating fullName
Your name is not John Smith

3. Set new firstName

Creating/Updating fullName
My name is Jacob Smith

Creating/Updating fullName
Your name is not Jacob Smith
*/
/* outputs
1. Create Signals
2. Create Reactions

Creating/Updating fullName
My name is John Smith

Creating/Updating fullName
Your name is not John Smith

3. Set new firstName

Creating/Updating fullName
My name is Jacob Smith

Creating/Updating fullName
Your name is not Jacob Smith
*/
29
import { ref, watchEffect, computed } from 'vue'

console.log("1. Create Signals");
const firstName = ref("John");
const lastName = ref("Smith");

const fullName = computed(() => {
  console.log("Creating/Updating fullName");
  return `${firstName.value} ${lastName.value}`
});

console.log("2. Create Reactions");
watchEffect(() => console.log("My name is", fullName()))

watchEffect(() => console.log("Your name is not", fullName()));

console.log("3. Set new firstName");
firstName.value = "Jacob";
import { ref, watchEffect, computed } from 'vue'

console.log("1. Create Signals");
const firstName = ref("John");
const lastName = ref("Smith");

const fullName = computed(() => {
  console.log("Creating/Updating fullName");
  return `${firstName.value} ${lastName.value}`
});

console.log("2. Create Reactions");
watchEffect(() => console.log("My name is", fullName()))

watchEffect(() => console.log("Your name is not", fullName()));

console.log("3. Set new firstName");
firstName.value = "Jacob";
30

signals eco

source

31

What are problems want to solve?

32

Things that are often discussed in the frontend world are usually about performance and rendering.

One of the issues that often comes up when discussing these two things is how to manage the state.

33

How do we manage the state

Traditional global state with React.

global state tree in react
34

How do we manage the state

Global state with React context.

global state tree in react with context
35

How do we manage the state with Signals?

It’s simple, we don’t.

36

How do we manage the state

with Signals.

global state tree with signals

source

37

Discovering Signals

Library & framework - examples.

38
frameworks
39

React

What about React?

Meanwhile, you can get a reactive experience in React using third-party libraries like @preact/signals-react or MobX.

40

React Forget

41

Recap

  • Reactive programming allows us to make synchronous state changes.
  • Signals is made popular by SolidJS.
  • Signals generally consist of 3 parts: State, Derivatives, and Effects.
  • The focus of Signals is to address performance issues and to simplify the overall state management of the application.
  • Signals has been adopted by almost all of the major JS frameworks out there.
42

Thank you!

Slides can be found on kalwabed.xyz/talks

43