WiréJS | Değişken değil, kablo kullanın !

Açıklama

WiréS, ReactJS kütüphanesinin useState ve watch kancalarından ilham alınarak browser ortamı için tekrar yazılmış bir kütüphanedir. Verileri getter/setter fonksiyonlarıyla sararak gerçek değişikleri algılayan özelliği sayesinde gereksiz güncellemeleri göz ardı eder.

Veri ilişkilerini önceden belirleyerek değişiklik olduğunda okunacak ve yazılacak verileri koşullara bağlayabilir, okuma ve yazma öncesi ara katmanlar ekleyebilirsiniz

Kullanım örneği

Kablo okuma ve değiştirme

Bir değişkeni get ile okuyabilir, set ile değiştirebilirsiniz. get fonksiyonu veriyi olduğu gibi döner. set fonksiyonuna bir fonksiyon verirseniz hemen çalıştıracak ve return edilen veriyi kabul edecektir

// Yeni kablo oluşturun
let currency = é(+0.00);

// Değerini okuyun
currency.get(); // --> 0

// Değerini değiştirin
currency.set(5);

currency.get(); // --> 5

// Değerini fonksiyon ile değiştirin
currency.set(oldValue => {
    // Eski verinin üzerine 20 ekle
    return oldValue + 20;
});

currency.get(); // --> 25

Değişimler

Bir kablonun değerinin değiştiğini watch özelliğiyle dinleyebilirsiniz veya birden fazla kablonun değişimini aynı anda dinlemek için é.watch fonksiyonunu kullanabilirsiniz

let a = é(0);
let b = é(0);
a.watch(()=>{
    // a kablosu değiştiğinde burası çalışacak
})
b.watch(()=>{
    // b kablosu değiştiğinde burası çalışacak
})
é.watch(()=>{
    // a veya b değiştiğinde burası çalışacak
},[a, b])

Örnek

let toplayan = é(0);
let toplanan = é(0);
let sonuc = é(0);

é.watch(()=>{
    sonuc.set( toplayan.get() + toplanan.get() )
},[toplayan, toplanan])

toplayan.watch(()=>{
    console.log("Toplayan: ",toplayan.get())
})
toplanan.watch(()=>{
    console.log("Toplanan: ",toplanan.get())
})
sonuc.watch(()=>{
    console.log("Değişen Sonuç: ",sonuc.get())
})

toplayan.set(7);
toplanan.set(2);

console.log("Sonuç",sonuc.get())

Konsol çıktısı aşağıdaki gibi olacaktır

Toplayan: 0
Toplanan: 0
Değişen Sonuç: 0
Toplayan: 7
Değişen Sonuç: 7
Toplanan: 2
Değişen Sonuç: 9
Sonuç: 9

Ara katmanlar

Okuma ara katmanı

Bazen orjinal değişkeni değiştirmeden her seferinde daha gelişmiş bir veri tipiyle okumak istersiniz

// Yeni kablo oluşturun
let user = é({
    name: "John",
    surname: "Wattson"
});

// Normalde okuma katmanı eklemezseniz veri düz bir şekilde verecektir
user.get(); // --> {"name":"John",surname:"Wattson"}

// Verinin nasıl okunacağını belirleyin
user.readLayer((value, update)=>{
    // value: orjinal veridir
    // değiştirmek istediğinizde update fonksiyonunda verirsiniz
    update(
        `İsim: ${value.name}, soyisim: ${value.surname}`
    )
})

// `get` fonksiyonu veriyi nasıl okuyacağını readLayer fonksiyonunda öğrenecektir
user.get(); // --> "İsim: John, soyisim: Wattson"

Yazma ara katmanı

Bazen orjinal değişkeni değiştirmeden her seferinde daha gelişmiş bir veri tipiyle okumak istersiniz

// Yeni kablo oluşturun
let user = é([2,4,6,8,10]);

user.writeLayer((value, update)=>{
    // Sadece çift sayıları alıyoruz
    update(
        value.filter(e => e % 2 == 0)
    )
})
user.writeLayer((value, update)=>{
    // Verinin sadece ilk 5 öğesini alıyoruz
    update(
        value.slice(0, 5)
    )
})

// Orjinal veri
user.get(); // --> [2,4,6,8,10]

// set fonksiyonumuz gerçek veriyi değiştirmeden önce yukarıdaki iki yazma katmanını çalıştırıyorlar
// set fonksiyonumuz artık sadece ilk 5 çift sayıyı kaydediyor
user.set([10,11,12,13,14,15,16,17,18,19,20,21,22,23])

user.get(); // --> [10,12,14,16,18]

Fark bulma algoritması

WiréS eşitlenmek istenen değeri zaten var olan değer ile karşılaştırarak farklı olup olmadığını algılayan özel bir algoritmaya sahiptir. Bu şekilde tekrarlı eşitlemelerde veya bellekte aynı şekilde tutulan veriler için yazma işlemi gerçekleştirmez

Basit değişkenler

let variable = é(0);
variable.set(false); // --> Değişecek
variable.set(7); // --> Değişecek
variable.set(7); // --> Değişmeyecek
variable.set(7 + 0); // --> Değişmeyecek
variable.set(-7); // --> Değişecek

Objeler ve listeler

let variable = é([1,2,3]);
variable.set([1,2,3,4]) // --> Değişecek
variable.set([1,2,3,4]) // --> Değişmeyecek
variable.set([1,0,3,4]) // --> Değişecek
variable.set() // --> Değişecek (undefined olarak)
variable.set(null) // --> Değişmeyecek

let variable = é({
    name: null,
    surname: "Wattson",
    numbers: [1,2,3,4]
});

// İsmini null iken John olarak değiştiği için değişecek 
variable.set(oldValue => {
    return {
        name: "John",
        surname: "Wattson",
        numbers: [1,2,3,4]
    }
})

// isim ve soyisim bir öncekiyle aynı olduğu için hiç bir şey yapılmaz
variable.set({
    name: "John",
    surname: "Wattson",
    numbers: [1,2,3,4]
})

// Ayrıca fark bulmak algoritması sonsuz derinlikte tarama yapıp farkı anlayabilir
variable.set({
    name: "John",
    surname: "Wattson",
    numbers: [1,2,3,4,"Hello !"]
})

Sonsuz derinlikteki objeler

Javascriptte bir objenin içindeki bir değer yine kendisini işaret ediyor olabilir, böyle bir durumda objenin içini tarayan algoritma aynı objeyi defalarca taramaması için (Maximum call stack hatası) önlem koyulmuştur

let infinite = {
    one: 1,
    two: 2,
    three: 3,
    onetwothree: undefined
};
// Objenin içine yine kendisini yerleştiriyoruz
infinite.onetwothree = infinite;

let variable = é(infinite);

/**
 * Aşağıdaki kodda WiréJS neyin değiştiğini anlamak için infinite
 * objesinin içine girdiğinde, içine girdiği objeleri bellekte
 * tutarak aynı objeyi tekrar taramasını engelleyen yapıya
 * sahip olur
 **/

// Sonsuz döngüde dönerek [Maximum call stack] hatası vereceğine three değerini başarılı bir şekilde değiştirir
variable.set(oldValue => {
    // sadece three değerini 3 ile çarpıyoruz
    return {
        ...oldValue,
        three: oldValue.three * 3
    }
});