2. Functional Programming and RxJS

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Today's Schedule 1. Functional programming. 2. Functional concepts. 3. Category Theory. 4. Observer and Iterator pattern overview. 5. Working with asynchronous data streams - RxJS

Slide 3

Slide 3 text

Why Functional Programming in Angular Course ? • RxJS - Asynchronous data streams • ngrx - Reactive State Management

Slide 4

Slide 4 text

JS array methods we need to know • map(fn) - fn will be called for each element of the array with args: (currentValue, index, array) and the returned value will be the new element in the result array. • ﬁlter(fn) - fn will be called for each element and it needs to return true if the current value should be added to the result array and false otherwise. • reduce(accFn, acc) - accFn will be called for each element of the array with argumenst (accumulator, currentValue, index). If its the ﬁrst call accumulator will be acc from the reduce call. Otherwise it will be the previously returned result from the accFn.

Slide 5

Slide 5 text

JS array methods we need to know

Slide 6

Slide 6 text

Functional Programming Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. It is a declarative programming paradigm, which means programming is done with expressions or declarations instead of statements.

Slide 7

Slide 7 text

Declarative vs Imperative

Slide 8

Slide 8 text

Functional Programming Advantages • Clean code - easier to test, debug and reason about. • Modularity - large problems are broken into small parts • Reusability - common helper functions, due to the modularity • Reduced coupling - Less amount of dependency between modules

Slide 9

Slide 9 text

Functional JavaScript

Slide 10

Slide 10 text

Functional concepts • Using functions and arrays for ﬂow control • Pure functions, arrow functions, anonymous functions, recursive functions • Functions as First Class Citizens • Using: map(), ﬁlter() and reduce() • Currying and Partial Application • Lazy evaluation • Composition (Math)

Slide 11

Slide 11 text

Functions - First Class Citizens • Functions can be assigned to variables • Functions can be passed as arguments

Slide 12

Slide 12 text

Pure Functions • The function always evaluates the same result value given the same argument value(s) • Evaluation of the result does not cause any semantically observable side effect or output, such as mutation of mutable objects or output to I/O devices

Slide 13

Slide 13 text

Currying and Partial Application • Currying is the technique of translating the evaluation of a function that takes multiple arguments into evaluating a sequence of functions. • Partial application refers to the process of ﬁxing a number of arguments to a function, producing another function of smaller arity.

Slide 14

Slide 14 text

Lazy evaluation • Call-by-need and deffered execution, is an evaluation strategy that waits until the value is needed to compute the result of a function. • Using it can result in a major increase in performance

Slide 15

Slide 15 text

Example (1)

Slide 16

Slide 16 text

Example (2)

Slide 17

Slide 17 text

Curry function example

Slide 18

Slide 18 text

Category Theory

Slide 19

Slide 19 text

Categories Sets with the same type  numbers, strings, arrays, dates, objects, booleans, etc.

Slide 20

Slide 20 text

Morphisms Pure functions - mappings between types

Slide 21

Slide 21 text

Functors Functors are mappings between categories.      Functions that lift values out of a container, morph them, and put them into a new container. The ﬁrst input is a morphism for the type and the second input is the container.

Slide 22

Slide 22 text

Functors

Slide 23

Slide 23 text

Monads Monads are structures that are used as containers and they help you compose functions.

Slide 24

Slide 24 text

Maybe Monad

Slide 25

Slide 25 text

Maybe with explicit composition // Composes functions from right to left

Slide 26

Slide 26 text

Maybe composition

Slide 27

Slide 27 text

Promises

Slide 28

Slide 28 text

Promises • Implement map and ﬂatMap through then, so it is a functor and a monad

Slide 29

Slide 29 text

Resources https://github.com/fantasyland/fantasy-land  http://ramdajs.com/   http://folktalejs.org/

Slide 30

Slide 30 text

Iterator Pattern

Slide 31

Slide 31 text

Iterator Pattern • Used for traversing collections of objects • It provides a simple method for selecting, sequentially, the next item in the collection. • An iterator can be used to generate values

Slide 32

Slide 32 text

Iterator Pattern

Slide 33

Slide 33 text

ES2015 Iterator (Used by for...of)

Slide 34

Slide 34 text

Observer Pattern

Slide 35

Slide 35 text

Observer Pattern • Used to notify observers when the value on an object has changed.

Slide 36

Slide 36 text

Reactive Extensions  http://reactivex.io

Slide 37

Slide 37 text

Reactive Extensions • Library for composing asynchronous and event-based programs by using observable sequences. • Extends the observer pattern to support sequences of data and/ or events • Adds operators that allow you to compose sequences together declaratively

Slide 38

Slide 38 text

RxJS • Original Project: https://github.com/Reactive-Extensions/RxJS • Rewrite: https://github.com/ReactiveX/rxjs   (better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface)

Slide 39

Slide 39 text

Angular & RxJS • Routing • Forms Validation • State Management • Http Service

Slide 40

Slide 40 text

RxJS Example 1

Slide 41

Slide 41 text

Observables Are a bridge between some Subject and some Observer

Slide 42

Slide 42 text

Promises vs Observables • Observables are lazy • Promises emit only one value • We can cancel an observable

Slide 43

Slide 43 text

RxJS Example 2

Slide 44

Slide 44 text

RxJS Example 3

Slide 45

Slide 45 text

RxJS Example 4

Slide 46

Slide 46 text

RxJS operators https://github.com/ReactiveX/rxjs/tree/master/src/operator

Slide 47

Slide 47 text

RxJS observables https://github.com/ReactiveX/rxjs/tree/master/src/observable

Slide 48

Slide 48 text

Resources http://rxmarbles.com http://jaredforsyth.com/rxvision/examples/playground/ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md

Slide 49

Slide 49 text

Exercise Time

Slide 50

Slide 50 text

Observable constructor

Slide 51

Slide 51 text

Observable constructor

Slide 52

Slide 52 text

Merging (ﬂatten)

Slide 53

Slide 53 text

Observable is marked as closed if: • error • complete • unsubscribe is called

Slide 54

Slide 54 text

Exercise Time

Slide 55

Slide 55 text

Types of Observables • Cold - When your observable creates the producer • Hot - When your observable closes over the producer

Slide 56

Slide 56 text

Cold Observable

Slide 57

Slide 57 text

Hot Observable

Slide 58

Slide 58 text

Hot or Cold Observable?

Slide 59

Slide 59 text

Cold vs Hot • Cold - start running upon subscription • Hot - already producing values even before a subscription

Slide 60

Slide 60 text

Making Cold Observables Hot

Slide 61

Slide 61 text

publish & connect (1)

Slide 62

Slide 62 text

publish & connect (2) Result:

Slide 63

Slide 63 text

publish & refCount Result:

Slide 64

Slide 64 text

Exercise Time

Slide 65

Slide 65 text

Errors & Chain Isolation

Slide 66

Slide 66 text

Observable Errors • When an error occurs the observable is closed so no data can pass trough. • The error is passed down the chain and our catch block is called.

Slide 67

Slide 67 text

Observable Errors

Slide 68

Slide 68 text

Chain Isolation

Slide 69

Slide 69 text

Exercise Time

Slide 70

Slide 70 text

Subjects

Slide 71

Slide 71 text

Subjects • The Subject class inherits both Observable and Observer, in the sense that it is both an observer and an observable. • Subjects have the same operators and methods available to them as Observables do. • Subjects keep a list of subscribed observers (they have state). • A subject can be used as an observer to subscribe to any observable.

Slide 72

Slide 72 text

Subjects • Can be used for converting a Cold Observable into a Hot one • Subject can act as a proxy for a group of subscribers and a source • We can use subjects to implement a custom observable with caching, buffering and time shifting • We can use subjects to broadcast data to multiple subscribers