Reactive programming入門して、RxJSを触ってみました。

## Reactive programmingとは　(Stackoverflow)

```
Reactive programming is programming with asynchronous data streams
```

- 非同期
- データストリーム

---

## 例1
```
var b = 1
var c = 2
var a = b + c
b = 10
console.log(a) // 3 (not 12 because "=" is not a reactive assigment operator)

// now imagine you have a special operator "$=" that changes the value of a variable (executes code on the right side of the operator and assigns result to left side variable) not only when explicitly initialized, but also when referenced variables (on the right side of the operator) are changed
var b = 1
var c = 2
var a $= b + c
b = 10
console.log(a) // 12
```

変数Cは変更したら、Cに関連するものを反映させたい

→　Reactive programming

---

## 例2

```

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data() {
    return {
      greeting: "Hello"
    };
  },
  methods() {
    changeGreeting: () => {
      this.greeting = "Hi"
    }
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

```

- changeGreeting実行すると、画面で`Hello Word` が`Hi Word`になる
- データを変更する、データを使われているところを反映させたい

---
## Reactive Extension (Rx)

Reactive programming のライブラリー

http://reactivex.io/languages.html
- Beluga承認アプリでRxを使われています。（RxAndroid、RxCocoa）
- RX = Observer pattern + Functional programming + Iterator Loop

---

## RxJs(1)
Javascript code 
- クリックイベント

```
const button = document.querySelector('#btn');
button.addEventListener('click', () => console.log('クリックしたね！!'));
```

ALT + クリック　イベント
```
const button = document.querySelector('#btn');
button.addEventListener('click', () => console.log('クリックしたね！!'));
```

- Observable: イベント
- Obeserver: イベント発生したときに、何かする

```
var btnClicks = Rx.Observable.fromEvent($('#btn'), "click");
 
btnClicks.subscribe(function () {
        console.log('クリックしたね！');
    });

btnClicks
    .filter(function (value) {
        return value.altKey;
    })
    .subscribe(function () {
        console.log('Altキーを押しながらクリックしたね！');
    });

btnClicks.subscribe(function () {
        console.log('クリックしたね！');
    });

```

http://jsbin.com/bogoxetavu/1/edit?html,css,js,console,output

---

## Observable / Observer 

```
// observable: データフローの設定
const observable = new Rx.Observable((data: Rx.Subscriber<number>) => {
  data.next(1)
  data.next(2)
  data.next(3)
  data.complete()
})

// observer:　signalsを受けて処理する
const observer: Rx.PartialObserver<number> = {
  next: (a) => {
    console.log(`Next with: ${a}`);
  },
  error: ()=> {
    console.log(`error with`);
  },
  complete: ()=>{
    console.log(`complete with`);
  }
} 

// observable はobserverをsubscribe
observable.subscribe(observer)
```

---

## Subscription

```

const observable = new Rx.Observable(function subscribe(observer: Rx.Subscriber<string>) {
  const id = setInterval(() => {
    observer.next('Hello Rxjs');
  }, 1000);
});
let count = 0;

const observer: Rx.PartialObserver<string> = {
  next: (a) => {
    count++
    console.log(`Next with: ${a}`);
  },
  error: ()=> {
    console.log(`error with`);
  },
  complete: ()=>{
    console.log(`complete with`);
  }
} 

const subscription =  observable.subscribe(observer)

setTimeout(() => {
  // Subscriptionはunsubscribeできます
  subscription.unsubscribe()
}, 4);
```

---

## Subject
```
const behaviorSubject= new Rx.BehaviorSubject<number>(5)

const observer: Rx.PartialObserver<number> = {
  next: (a) => {
    console.log(`Next with: ${a}`);
    setTimeout(() => {
      
      behaviorSubject.next(a+1)
    }, 500);
  },
  error: ()=> {
    console.log(`error with`);
  },
  complete: ()=>{
    console.log(`complete with`);
  }
} 

const subscription =  behaviorSubject.subscribe(observer)
```
---
## Operators
https://rxjs-dev.firebaseapp.com/guide/operators
·