Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
150 views

Notes - Asynchronous Programming in JavaScript (With RX - Js Observables) PDF

This document contains notes on asynchronous programming and reactive programming patterns using observables. Some key points include: tracking state is a major challenge in async programs; events can be composed similarly to functions; observables represent collections that arrive over time and can model events, requests, and animations; common array methods like map, filter, reduce can be implemented using iterators or observers; and useful reactive operators include merge, concat, switchLatest, and takeUntil for combining and transforming observable streams.

Uploaded by

Garry Kasparov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
150 views

Notes - Asynchronous Programming in JavaScript (With RX - Js Observables) PDF

This document contains notes on asynchronous programming and reactive programming patterns using observables. Some key points include: tracking state is a major challenge in async programs; events can be composed similarly to functions; observables represent collections that arrive over time and can model events, requests, and animations; common array methods like map, filter, reduce can be implemented using iterators or observers; and useful reactive operators include merge, concat, switchLatest, and takeUntil for combining and transforming observable streams.

Uploaded by

Garry Kasparov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Notes

● tracking state in async programs - major cause of issues when trying to scale-- Race conditions,
memory leaks, Complex state machines, uncaught async errors. Debouncing,
● large async programs - loops become useless
● think about events as ‘collections'
● events --> compose them together --> complex events
● “approach events with the same sort of approach to compositions as we do with functions”
● ForEach​ - Array()
○ apply function to each item in array
● Map
○ transform every item in an array
● Filter
○ apply function to every item, apply test, if pass add to return array
● concatAll
○ doesn’t exist - write yourself
○ take multi dimensional array and flattens by one dimension
○ empty collection inside collection goes away when collection is flatten
○ .3 dimensional collection --> 2 dimensional collections
○ make sure events come in the same order as within their collection
○ don’t use concatAll on an infinite stream
● “What’s the difference between events and arrays”
○ events and arrays are both collections
○ we should approach events and arrays the same way
● Design Patterns Book
○ iterators
■ iterator() - iterator.next()
■ returns value, done: true/false
■ Map, Filter, and ConcatAll can be implemented using an Iterator
■ coming in ES6
○ observer
■ authors of Design Pattern missed this symmetry between iterator and observer
○ iterator - observer --> actually are deeply related
● Observable
○ a collection that can be observed
○ Observable === Collection + Time
■ “collection that arrives over time”
○ capable of modeling events, async server requests, animations
○ proposal to add to ES7 (ES2016)
■ https://github.com/jhusain/asyncgenerator#introducing-observable
○ event, error, completed
■ “like a DOM event that you can pass three handlers instead of one”
● Push APIs: DOM Events, Websockets, Server-sent Events, Node Streams, Service Workers, Jquery,
XMLHttpRequests, SetInterval.
● Reactive Extensions
○ http://reactivex.io/
○ Swift Reactive Extensions
■ https://github.com/kzaher/RxSwift
○
● observer vs iterator
○ iterator the consumer asks
○ observer just push out
● Concat all
○ just like an array take arrays values just in the order

● TakeUntil
○ has a source collection and stop collection.
○ it helps to combine two infinite streams without particularly unsubscribing to any event.
○ if the source collection calls for onComplete, this method calls dispose on stop collection.
○ As soon as the stop collection emits a onNext or a onError, this method calls onComplete on the
source collection.

● mergeAll
○ The mergeAll() method functions similarly to the concatAll() method except that mergeAll will
combine subsequent observables without waiting for a previous one to complete.
○ Use mergeAll when you don’t care about the order of the data.
○ concatMap
○ clarifies code (do not have to use map and then concatAll - concatMap is doing it for you)
● switchLatest
○ dispose as new observables come in.

● cake cutting metaphor


● traffic metaphor
○ each lane is an infinite observable
○ TakeUntil
● ‘i haven’t unsubscribed from an event in 5 years'
○ takeUntil and switchLatest - pretty much all you need
● Netflix Search Box - Autocomplete
○ debounce
○ throttle -> map -> retry -> switchLatest (a,b,c,d,e,f …. c - f)
○ Cancel network request, send request only after forEach, throttle, network fail - retry on
Observable
○ Observable is lazy - hot/cold
● 4 steps
○ what collection do i have
○ what collection do i want
○ how do i get have to want
○ once i have what i want - what am I going to do with it
● observables
○ better way to model network requests
○ 3 reasons -> cancel, retry, some might stream data
● reduce
○ accepts function that takes two arguments
○ anytime you need to compare something
● zip
○ iterates over several arrays at a time
○ good when the order of processing arrays is not important (opposite to Array.map)

SQL Comparison
- When information is organized in a tree like a JSON expression, relationships point from parent to child. In
relational systems like databases, relationships point from children to their parents.
- .It may surprise you to learn that you can use the 5 query functions you already know to easily convert
between these representations. In other words, not only can you query arrays from trees, you can query
trees from arrays.

SELECT ​videos.name, lists.name


FROM videos
FROM lists
WHERE ​lists.id = video.listid

Var videoNamesAndListNames =
lists​.map​(list => videos​.filte​r(video => video.listId === list.id).
map​(video => ({name: video.name, listName: list.name})).
concatAll()

ADVANCE ASYNCHRONOUS JAVASCRIPT

Helpful Functions

Observable.of(5) -> {5}; Returns an observable with the pass value

Observable.concat(
{....5….7},
{.2…..4},
{.....5…...9}) -> {.....5…..7..2...4….5…..9}; -> same as concatAll

Observable.merge(
{....5...7},
{..2…..4},) -> {..2...5..4..7} -> it does not wait for the observable to complete in order to
subscribe to the next one

{....5...5...2...2...3….5}.distinctUntilChanged() ->
{....5…….2…….3….5} ; returns Observables that different than the previous value.
Xc y<
{......1….2….3}.scan((acc, curr) => acc + curr); ->
{.......1….3....6} -> scan != reduce for observables;
it gives us the sum of the observables over time (ie every addition, acc)

Some Definitions
Race condition =​ A race condition is an undesirable situation that occurs when a device or
system attempts to perform two or more operations at the same time,​ but because of the
nature of the device or system, ​the operations must be done in the proper sequence to be
done correctly

Note
Observable.merge(obs1, obs2) -> BOTH WORK FOR 1 dimensional observables
Observable.concat

You might also like