wirejs/readme.md

# WireJS | Değişken değil, kablo kullanın !

## Açıklama

WireJS, ReactJS kütüphanesinin useState ve useEffect 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

```javascript
// 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 `useEffect` özelliğiyle dinleyebilirsiniz veya birden fazla kablonun değişimini aynı anda dinlemek için `é.useEffect` fonksiyonunu kullanabilirsiniz

```javascript
let a = é(0);
let b = é(0);
a.useEffect(()=>{
    // a kablosu değiştiğinde burası çalışacak
})
b.useEffect(()=>{
    // b kablosu değiştiğinde burası çalışacak
})
é.useEffect(()=>{
    // a veya b değiştiğinde burası çalışacak
},[a, b])
```
Örnek
```javascript
let toplayan = é(0);
let toplanan = é(0);
let sonuc = é(0);

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

toplayan.useEffect(()=>{
    console.log("Toplayan: ",toplayan.get())
})
toplanan.useEffect(()=>{
    console.log("Toplanan: ",toplanan.get())
})
sonuc.useEffect(()=>{
    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

```javascript
// 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

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

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

// Orjinal veri
user.get(); // --> [1,2,3,4,5]

// 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ı

WireJS 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

```javascript
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

```javascript
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

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

let variable = é(infinite);

/**
 * Aşağıdaki kodda WireJS 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
    }
});
```