Gaute Meek Olsen
Min fjerde JavaZone talk!
- 🧝 2021 - Nyheter i JavaScript - ES2021
- 🧙♀️ 2022 - Nyheter i JavaScript - ES2022
- 🤹 2023 - Nyheter i JavaScript - ES2023
- 💾 2024 - Nyheter i JavaScript - ES2024
- 💾 2024 - Signals i frontend, og kan det bli en JavaScript standard?
(no)
(yes?)
👇 Frykt ikke 👇
Nyheter i JavaScript - ES2024
Signals i frontend, og kan det bli en JavaScript standard?
Hva er signals?
Signals = en type implementasjon som oppnår reaktivitet
Hva er ikke reaktivit?
let epler = 5
Click the play button to run the code
Hva er reaktivitet?
| A | B | C | |
|---|---|---|---|
| 0 | epler | appelsiner | frukt |
| 1 | 5 | 5 | |
| 2 |
Flere måter å oppnå reaktivitet på
- Dirty checking ()
- Re-run everything ()
- Compile based reactivity ()
- Signals
Hva er signals?
State sier selv ifra når den er endret
Hva er signals?
State:count
Beregnet state:doubleCount
UI/DOM:<p>{count}</p>
Funksjon:console.log(doubleCount)
Hva er signals?
State:0
Beregnet state:0
UI/DOM:<p>0</p>
Funksjon:console.log(0)
Hva er signals?
State:1
Beregnet state:0
UI/DOM:<p>0</p>
Funksjon:console.log(0)
Hva er signals?
State:1
Beregnet state:2
UI/DOM:<p>1</p>
Funksjon:console.log(0)
Hva er signals?
State:1
Beregnet state:2
UI/DOM:<p>1</p>
Funksjon:console.log(0)
Hva er signals?
State:1
Beregnet state:2
UI/DOM:<p>1</p>
Funksjon:console.log(2)
Hva er signals?
Signal:count
Signal:doubleCount
Effekt:<p>{count}</p>
Effekt:console.log(doubleCount)
Timeline
2010
2012
2014
2020
2021
2022
2023
La oss kalle dette signals
TC39 proposal
const count = new Signal.State(0)
console.log(count.get())
count.set(1)
const double = new Signal.Computed(() => count.get() * 2)
new Signal.subtle.WatcherTC39 proposal - eksempel 1
let epler = 5
let appelsiner = 5
let frukt = epler + appelsiner
epler += 10
console.log(frukt)