REACTIVITY IN VANILLA.JS WITH REGIE
A NEW STATE OF PLAY
Armağan Amcalar
İstanbul JavaScript Topluluğu
1 Nisan 2024
Biraz tanIş olalım.
dashersw
Ben Kimim?
Armağan Amcalar
CEO @ Coyotiv GmbH, CTO @ Neol, CTO @ OpenServ
Founder @ Dream Kid
dashersw dashersw
gITHUB kütüphaneleri
Reaktivite nedir?
dashersw
İLK PATERNLER
MVC
MVVM
dashersw
dashersw
EN BİLİNEN REAKTİF YAZILIM
dashersw
EXCEL
module Adder(
input [3:0] a,
input [3:0] b,
output [4:0] sum
);
assign sum = a + b;
endmodule
const [a, setA] = createSignal(0);
const [b, setB] = createSignal(0);
const sum = () => a() + b();function Adder() {
const [a, setA] = useState(0);
const [b, setB] = useState(0);
const sum = a + b;
return <div>Sum: {sum}</div>;
}
<script>
let a = 0;
let b = 0;
$: sum = a + b;
</script>
<div>Sum: {sum}</div>
<template>
<div>Sum: {{ sum }}</div>
</template>
<script>
export default {
data() {
return {
a: 0,
b: 0,
};
},
computed: {
sum() {
return this.a + this.b;
},
},
};
</script>
import { Component } from '@angular/core';
@Component({
selector: 'app-adder',
template: `<div>Sum: {{ sum }}</div>`,
})
export class AdderComponent {
a = 0;
b = 0;
get sum() {
return this.a + this.b;
}
}
var a = 0;
var b = 0;
var sum = a + b;
$("#sumDisplay").text(sum);let a = 0;
let b = 0;
let sum = 0;
const handler = {
set(target, prop, value) {
target[prop] = value;
sum = a + b;
return true;
}
};
const proxyA = new Proxy({ value: a }, handler);
const proxyB = new Proxy({ value: b }, handler);
proxyA.value = 5;
proxyB.value = 10;
console.log(`Sum: ${sum}`);let a = 0;
let b = 0;
let sum = 0;
const handler = {
set(target, prop, value) {
target[prop] = value;
sum = proxyA.value + proxyB.value;
return true;
}
};
const proxyA = new Proxy({ value: a }, handler);
const proxyB = new Proxy({ value: b }, handler);
proxyA.value = 5;
proxyB.value = 10;
console.log(`Sum: ${sum}`);niye çılgın gibi kütüphane var?
dashersw
ÇOĞU KÜTÜPHANE YALAN SÖYLÜYOR.
dashersw
ZORUNDA MIYIZ?
dashersw
HOşgeldin halkların regie'si
ne olursan ol gel
const regie = require('regie')
const initialState = {
items: []
}
const { state, observe } = regie({ initialState })
observe(state.items, handler)
observe(state => state.items, handler)
observe(() => state.items, handler)
observe('items', handler)
const items = state.items
observe(items, handler)
observe(() => items, handler)
observe(() => state.items[0], handler)
observe('items.0', handler)
observe(() => state.items[0].name, handler)
observe('items.0.name', handler)Demo tIme!
TEşekkürler
Armagan Amcalar
dashersw