DT Tech InfoDT Tech Info

      RxJs for Beginners

      LEARN EASY
      • Home
      • Blog
      • RxJs for Beginners
      • RxJs for Beginners: Part 2 – Observer & Observables

      RxJs for Beginners: Part 2 – Observer & Observables

      • Posted by Muthukumar Dharmar
      • Categories RxJs for Beginners
      • Date July 26, 2020

      I hope you have enjoyed Part 1 of this series.  Now we will continue to look into the core concepts of RxJs, this would be the basic foundation for the entire tutorial series.

      Initially, these concepts might be a little hard to understand, But don’t worry, I will try to keep this as easy as possible to understand. Still, if you did find it hard, just continue with the series, slowly you will get to know as we progress.

      Lets start with Observer & Observable

      Those who are aware of the Observer Design pattern would have already guessed how this concept works.  Yes, Observer Pattern with Iterator Pattern is the power behind RxJs .

      Let’s discuss, what are these Observer & Observable? How does it work in RxJs?

      • Observer :       As the name denotes, it’s a collection of callback/listener to some kind of object that can be observed.
      • Observable :   This is a collection of future values/events, that’s the observer is listening to. 
      A Real-World Example
      We can take the television programs as a real-world example to relate to this concept.
       

      Let’s take a scenario where there are two people watching the news on television.

      In this case,  these people are the observers who are observing the content which is observable, produced by the TV channel.

      How it works in RxJs?

      In the software world, we refer to this communication as data transmission between objects.  When we say data transmission, there should be a producer object which generates this data, on the other hand, there should be a consumer who needs the data.

      Producer, In rxjs we call this producer as observables, something which can be observed.  The producer produces the data and emits the events that transmit the data to the consumer.

      Consumers are the object which needs this data, may just be to displaying it in the UI, update the state of UI element or even to make an API call, and so on. 

      I hope the explanation of this concept is understandable.  🙂

      We just looked into the core candidates in the RxJs Stream, one of the major advantages of RxJs is actually we can manipulate the data that’s being transmitted to the consumer, this is where the data pipeline comes to play.

      See the initial data and final output that’s been received by the Consumer. 

      This how the data is being passed and manipulated through the chain of functions, during the data flow in the pipeline. And then the final output is sent to the consumer.

      I hope you understand the concept of how data transmission & transformation happens in Rxjs.  

      One important point that we didn’t discuss so far is the Subscription, without a subscription there is no use of RxJs stream. Let’s learn subscription in next part

      Part 1 – Introduction
      Part 3 – Subscriptions

      Tag:rxjs, scheduler, task maager, task scheduler

      • Share:
      author avatar
      Muthukumar Dharmar
      Over 17 yrs of experience in the IT industry. Skill Set: Angular, RxJS Reactive Programming, AspNet WebApi, WCF, WPF, Azure, etc.,

      Previous post

      RxJs Tutorial Series: Part 3 - Understanding Subscription
      July 26, 2020

      Next post

      Angular CLI - Unit Test setup & Code coverage
      June 19, 2020

      Leave A Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Search

      Categories

      • Angular
      • Angular PWA
      • ArchiMate
      • AspNet Core – Razor
      • AspNet Core – WebApi
      • Best Practices
      • Design Patterns
      • EF Core
      • Entity Framework
      • IdentityServer4
      • RxJs for Beginners
      • Tips & Tricks
      • Uncategorized
      • Web Development
      • WPF / WPF Core

      Latest Posts

      Azure: Storage Services
      26Sep2024
      Angular Styles – Tips and Tricks
      23Dec2023
      Typescript – Tips and Tricks
      23Dec2023
      logo-eduma-the-best-lms-wordpress-theme

      webadmin@dt-tech.info

      Organization

      • Contact Us

      Links

      • Blogs
      • Gallery

      Recommend

      • Angular
      • RxJS
      • AspNet Core – Razor
      • AspNet Core – WebApi
      • AspNetCore

      Powered by DT Tech.