Day 4 Reactive X and Http

Day 4 - Reactive X, Operators, and Server Communication

Projects:

pure-reactive-app	Demonstrates stateful services and async pipe
fun-with-rxjs-operators	Demonstrates the simple operators of RxJS
reactive-colors	Demonstrates asynchronous operators on real life example
rx-movie-browser-ex3	Solution for class ex 3, also demonstrating material icons and css variables
http-tv-maze	Demonstrates how to use HttpClient to access web restful apis

Pure Reactive Apps using BehaviorSubjects and Async pipe

• We have reviewed the topics we introduced last week: Observable, Subject and BehaviorSubject
• We developed a new application with a service that holds a counter
• We saw how to use a behavior subject to broadcast the value of the counter
• We saw how to "hide the writeable" part of the BehaviorSubject by using the asObservable method to create a proxy observable
• We created an editor component and used the service to increment and decrement the counter
• We created a presenter component to present the counter.
  • We have subscribed to the observable and updates a local field
  • We usec simple binding to present the value
• We understood that using subscribe without unsubscribing creates memory leaks and performance hits, and saw how to unsubscribe from an observable
• We saw how to use |async in the html templates so we can bind directly to the Observable and avoid having to use subscribe and unsubscribe

Introduction to RxJS operators

• We talked about the concept of operators in math, strings and arrays
• We understood that RxJS operators create observables.
• We saw 3 documentation web sites that serve as reference guide for reactive operators
  • ReactiveX docs
  • RxJS docs
  • Rx Marbles
• We covered some simple operators
  • map
  • from
  • interval
  • filter
  • take
  • takeLast
  • skip
  • skipLast
  • merge
• We created an example that uses observable to convert user search keyword into a list of matching results (Colors)
• We Understood that the map operator cannot be used when we apply an asyncronous function on each event because it creates an Observable of Promises
• We saw how to use mergeMap and SwitchMap as asynchronous alternative for map when using async projections
• We understood the difference between mergeMap and switchMap

Exercise 3 - Movies Browser - Part 2 - Reactive

• See the details of the exercise here: Exercise 3 - Movies Browser Reactive
• See the solution here: rx-movie-browser-ex3

Introduction to Http in Angular

• We discussed internet protocols: IP, TCP, UDP, HTTP, FTP
• We talked about the structure of Http Request - Verb, URL, Header, Body
• We talked about the various types of verbs:
  • GET to query a single or a list of objects
  • POST to add a new object
  • PUT to update an entire existing object
  • DELETE to delete an existing object or list of objects
  • PATCH to modify a part of an existing object (several fields only)
• We saw how to use Postman To test web APIs
• We used HttpClientModule to provide our services with the HttpClient service
• We used the HttpClient Service to create web requests to an online api called TV Maze
• We saw that the HttpClient methods all return Observables
  • Which means that no request happens until we subscribe
  • Which also means that if we subscribe 3 times, we run the request 3 times...
• We saw that it is preferable to use the toPromise operator, to convert the observable to promise.
• We saw that the async pipe also works with promises...
• We saw how to use sites like QuickType to automatically generate model for json data

Next week, we will

• Introduce the Router - a tool used to navigate between pages in an angular application
• Understand how to divide the application into Modules and the various types of modules
• Talk about advanced routing features: Guards, Nested Routing, and lazy loading