1. What's the difference between event and an array?
    1. They are both collections.
    2. Iterator
      1. You have producer and consumer
      2. Consumer requests information one at a time from producer until
        1. Producer says I have no information for you
        2. Producer says an error occurred
      3. var iterator = [1,2,3].iterator(); console.log(iterator.next()); { value: 1, done: false } ... { done: true }
    3. Observer Pattern
      1. document.addEventListener( "mosemove", function next(e) { console.log(e); });
      2. Producer pushes data at you
        1. Producer decides when you get the data
      3. The observer pattern iterates you
      4. We need a way for producer to tell the consumer I don't have no more data for you
    4. Iterable
      1. Example of array is iterable
      2. You can ask for an iterator from
      3. Array is not iterator, but you can ask for the iterator, because of that is iterable
    5. Observable
      1. Opposite of iterable
      2. It's a collection that arrives over time
      3. Can model
        1. Events
        2. Async Server Requests
        3. Animations
    6. They are the same, the only difference is who is in control Pulling (iterable) vs Pushing (observable)
  2. Intro
    1. First we need to take all the weird APIs and adopt them as observables
      1. var mouseMoves = Observable.fromEvent(element, "moousemove");
      2. Subtopic 2
    2. Subscribe
      1. var subscription = mouseMoves.forEach(console.log);
    3. Unsubsribe
      1. subscription.dispose();
      2. This is cosumer saying I don't need/want/care about the data anymore
    4. Error & Done
      1. var subscrption = mouseMoves.forEach( // next data event => console.log(event), // error error => console.error(error), // completed () => console.log("done"));
        1. 2 new interfaces which were missing
        2. The same semantics we have for iterator
        3. This also can be expressed by an object with onNext, onError, onCompleted properties
          1. moouseMoves.forEach({ onNext: event => console.log(event), onError: ... onCompleted: ...
    5. Observer object
      1. { onNext: .. onError: .. onCompleted: .. }
    6. Observable is always created using a forEach method
      1. forEach is how you get the data out
      2. Observable.fromEvent = function(dom, eventName) { return { forEach: function(observer) { .. } }
    7. Flattening strategies
      1. concatAll
        1. flattens observables of observables
        2. elements come out in order of the collection there are inside of arrives
        3. Subtopic 3
          1. {} and {4} are waiting until {3} arrives and the collection is done
          2. thse observables don't start emitting values until you forEach over them
          3. this is a cold observable
          4. they are not going to do anything until you call forEach
        4. we buffer observables
        5. this solves race conditions
          1. Im only interested in these events after these events occur (but they are fired asynchronously)
        6. not good idea for infinite streams
          1. you will never get to the next stream
          2. but there is a way how we can stop listening to infinite streams (like drag and drop)
          3. and might get buffer overflow
        7. not use for use for traffic lines when some of the lines is closed
    8. DOM events are kinda infinite streams
    9. takeUntil
      1. it takes a source observable and a stop observable and returns an observable
      2. evety time source observable emits something, it forwards that on
      3. as soon as the stop observable emits a single value (onNext, onCompleted) it completes the overall observable
      4. stop collection value is irrelevant
      5. that's how we can take 2 infinite observables and combine them together to create one that ends
        1. Subtopic 1
    10. don't unsubscribe from events, create streams that complete when you want them to complete
    11. mergeAll
      1. lines, first comes first serves
      2. when 4 lines close into one
        1. Subtopic 1
      3. you don't care about the order vs CONCATALL when you care about the order
    12. switchLatest
      1. when a new observable arrives, it unsubsribes from the previous one
        1. Subtopic 1
      2. only listens to one inner observable at a time
        1. usually because there is something newer we are interested in more then the previous one
        2. we have an observable of clicks, each click gets mapped out to a HTTP observable, so we get 2 dimensional observable
      3. we are waiting for observable, not for data
        1. so empty observable will swtich
      4. most common thing used in UI
        1. browser has a queue of outgoing requests, this approach can prevent outgoing request to go out before its issues (for example when you click a button multiple times)
      5. only works when you want to stop listening to inner observable based on the same condition it causes you to get a new inner observable
    13. solving problems in 4 steps
      1. 1. What collections (event) do I have
      2. 2. What collection (event) do I want
      3. 3. How do I get from collections I have to the collection I want
      4. 4. What Im gonna do with the data that comes out of the collection I want
    14. autocomplete box
      1. 1. keypress, network request
      2. 2. stream of search results
      3. Subtopic 2
        1. the getJSON observable would look like "...........................data"
        2. collections can be one value (like arrays can contain one value), observables can have one value, getJSON is one value, ".........data" and then immediately onComplete()
      4. throttle(250)
        1. ..abc...def.... => ...c...f
        2. drops items that come very close to each other and takes the last one
      5. map
        1. map is alaways about substitution - replacing a stream with something else
        2. every key press is substituted by a observable that represents a network request
        3. we have an observable of keypresses and each key press gets replaces with a new observable (so we have 2 dimensional observable)
          1. therefore we need to flatten it later
        4. when flattening, we need to solve the race condition problem
      6. takeUntil(keyPresses)
        1. as soon as I type something on the keyboard and the network request hasn't been returned (....X..data), the observable completes and it becomes empty
      7. can be simplified to this:
        1. Subtopic 1
          1. throttle now is purely an performance optimization
      8. retry
        1. promises cannot be cancelled
          1. promises are mose useful on the server
        2. observable are lazy - it doesn't do anything until you call forach on it
        3. promises cannot be easily retried, promise can only send a single value and not a stream of data
        4. retry takes an observable, calls forEach and if onError gets called, then it will increment the counter and retry again
          1. and if it still gets an error, it will forward it to whoever is listening
    15. netflix player
      1. Subtopic 1
        1. init() returns a simple observable with "true" value (it an observable of one)
        2. map takes this observable (doesn't care about the returned value - therefore ()=>) and listens to all playattempt events (click on play button)
        3. authorize just makes sure you are allowed to play the movie and comes back with a decryption key
        4. cancels is a stop button
        5. catch - we dont want the stream to die when there is an error, in this case we just return an empty observable which will case like nothing happened when you clicked the play button - we can do better
          1. its only on the inner observable, on on the outers like init()
        6. we are assuming that if you click play multiple times, it always clicks cancel before (its play, cancel, play, cancel, ... sequence)
  3. Other
    1. concatMap
      1. receives a function that returns array and flattens this array
      2. instead of doing map().concatAll()
    2. reduce
      1. takes array with many many items and reduces to an array with one item
      2. returns observable that completes with array of size one
      3. it has two parameters
        1. reducer function
        2. initial value (optional)
          1. if not used, initial value of acc would be the first element and curr would start from the second element
          2. used when we want to accumulate values into a new type, like map
          3. Like this example
      4. we should use whenever we are looking for something biggest or smallest
      5. one of 2 functions that has 2 arguments
    3. zip
      1. like teeth in a zipper, one from each side of an array until one of the arrays stop
      2. zip(leftArray, rightArray, combinerFunction(left, right)));
      3. one of 2 functions that has 2 arguments
  4. Tips & Tricks
    1. Object.create()
      1. Every object in Javascript is linked (linked list) to an empty object
      2. If I call this on an object, I create a whole new object that is linked to object it was created from
      3. If I acccess an attribute which is empty, it automatically goes to the next linked object, which might be sometimes very cool when we want immutable object
      4. cheap way of copying object!!!
        1. but someone can change the original object and that mocks the copy
    2. Object.seal()
      1. No one can modify the object