2. Functional Programming and RxJS

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

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

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

Transcript

2. 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
3. Why Functional Programming in Angular Course ? • RxJS - Asynchronous data streams • ngrx - Reactive State Management
4. 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. • filter(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 first call accumulator will be acc from the reduce call. Otherwise it will be the previously returned result from the accFn.
5. JS array methods we need to know
6. 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.
7. Declarative vs Imperative
8. 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
9. Functional JavaScript
10. Functional concepts • Using functions and arrays for flow control • Pure functions, arrow functions, anonymous functions, recursive functions • Functions as First Class Citizens • Using: map(), filter() and reduce() • Currying and Partial Application • Lazy evaluation • Composition (Math)
11. Functions - First Class Citizens • Functions can be assigned to variables • Functions can be passed as arguments
12. 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
13. 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 fixing a number of arguments to a function, producing another function of smaller arity.
14. 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
15. Example (1)
16. Example (2)
17. Curry function example
18. Category Theory
19. Categories Sets with the same type
 numbers, strings, arrays, dates, objects, booleans, etc.
20. Morphisms Pure functions - mappings between types
21. Functors Functors are mappings between categories.
 
 
 Functions that lift values out of a container, morph them, and put them into a new container. The first input is a morphism for the type and the second input is the container.
22. Functors
23. Monads Monads are structures that are used as containers and they help you compose functions.
24. Maybe Monad
25. Maybe with explicit composition // Composes functions from right to left
26. Maybe composition
27. Promises
28. Promises • Implement map and flatMap through then, so it is a functor and a monad
29. Resources https://github.com/fantasyland/fantasy-land
 http://ramdajs.com/ 
 http://folktalejs.org/
30. Iterator Pattern
31. 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
32. Iterator Pattern
33. ES2015 Iterator (Used by for...of)
34. Observer Pattern
35. Observer Pattern • Used to notify observers when the value on an object has changed.
36. Reactive Extensions
 http://reactivex.io
37. 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
38. 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)
39. Angular & RxJS • Routing • Forms Validation • State Management • Http Service
40. RxJS Example 1
41. Observables Are a bridge between some Subject and some Observer
42. Promises vs Observables • Observables are lazy • Promises emit only one value • We can cancel an observable
43. RxJS Example 2
44. RxJS Example 3
45. RxJS Example 4
46. RxJS operators https://github.com/ReactiveX/rxjs/tree/master/src/operator
47. RxJS observables https://github.com/ReactiveX/rxjs/tree/master/src/observable
48. Resources http://rxmarbles.com http://jaredforsyth.com/rxvision/examples/playground/ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md
49. Exercise Time
50. Observable constructor
51. Observable constructor
52. Merging (flatten)
53. Observable is marked as closed if: • error • complete • unsubscribe is called
54. Exercise Time
55. Types of Observables • Cold - When your observable creates the producer • Hot - When your observable closes over the producer
56. Cold Observable
57. Hot Observable
58. Hot or Cold Observable?
59. Cold vs Hot • Cold - start running upon subscription • Hot - already producing values even before a subscription
60. Making Cold Observables Hot
61. publish & connect (1)
62. publish & connect (2) Result:
63. publish & refCount Result:
64. Exercise Time
65. Errors & Chain Isolation
66. 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.
67. Observable Errors
68. Chain Isolation
69. Exercise Time
70. Subjects
71. 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.
72. 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
73. Subjects
74. Exercise Time