Observable
angular.io/guide/observables
Angular
angular.io
RxJS
- PULLING system
producer
consumer
- PUSHING system
producer: pushes the data to a consumer
www.youtube.com/watch?v=ei7FsoXKPl0
Singluar Plural
Synchronous Value Iterable
Asynchronous Promise Observable
- linear vector time
- seperated randomly (spreaded)
e.g. User Interaction: key stroke like click button, create event
- receives promises for multiple times
- compatibility: consistancy, handled by observables
※ Everything is a Stream
Subscribe
- observable$ => always with ‘$’
Operators
observable$.pipe(
operator(),
…
).subscribe(data => …)
- pipe(): throwing every single element a time
- operators are listed in order
- filter(): Array.filter과 비슷
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
- receiving bunch of events spreaded in time
- not returning an array
- true: pass / false: filtered out
- take the element and returns the conditioned element
As you can see from above code, similar to reduce function the scan function passes output of first function, as the input to the next function execution but the only difference being that, the result of each function execution is stored in an array and that array is returned as a result.
You can notice that, the last element of the resulting array is 15which was the output of reduce function.
- subscribe(): final function that receives the information
- make sure it returns anything, not error
- next(): call the next function in the stream
- expressJS
Middleware functions are functions that have access to the request object(req), the response object (res), and the next function in the application’s request-response cycle. The next function is a function in the Express router which, when invoked, executes the middleware succeeding the current middleware.
Middleware functions can perform the following tasks:
Execute any code.
Make changes to the request and the response objects.
End the request-response cycle.
Call the next middleware in the stack.
If the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function. Otherwise, the request will be left hanging.
Starting with Express 5, middleware functions that return a Promise will call next(value) when they reject or throw an error. next will be called with either the rejected value or the thrown Error.
- Angular (angular.io/guide/observables)
Note that a next() function could receive, for instance, message strings, or event objects, numeric values, or structures, depending on context. As a general term, we refer to data published by an observable as a stream. Any type of value can be represented with an observable, and the values are published as a stream.
- complete(): close the stream
- Cold Observable
: only one subscription at one
: receive last value in the stream
: stream one direction, prepare data and spread them all at one together - same info to all the users
- Hot Observable
: can connect to the same stream the other one
: multiple streamers - can use former value after next function
- debounceTime(k): wait for k(ms) after stopped typing and put arg in the stream
👀 Why do we need both ngOnInit() and constructor()?
The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor like new MyClass(someArg);
ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component.
- constructor: rendoring first
- initialise mainly properties
- have nothing which could stop executing
- ngOnInit: happen after first rendor, fulfill others
- triggering the function, asking for datas, populate them in the final
BEM (Block Element Modifier)
getbem.com/naming