Javascript

Getting Started with RxJS

Published Nov 18, 2020

Updated Feb 14, 2023

5 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

If you've worked in the frontend JavaScript space, you may have heard, seen, or used RxJS.

But what is RxJS precisely?

Simply put, it's lodash for events.

We could extend that definition and say: "it's a library for reactive programming using Observables, following the Observer Pattern." But does that really help you understand what RxJS is and how to actually use it? Probably not.

You might also be asking, "Why is it useful?", and I would tell you that it makes asynchronous code easier to write, maintain, and reason about. But I doubt that's the most helpful description.

This article will attempt to give you an understanding of what RxJS is and how to get started with it.

It should be noted, however, that RxJS is an implementation of two programming paradigms that a lot of developers struggle to get their heads around. So, if you feel lost or confused when working with RxJS, don't fret. We've all been there.

Within this article, I will cover a basic overview of Reactive Programming and the Observer Pattern before detailing how to set up some simple use-cases in RxJS to give hands-on experience with using the library.

Reactive Programming

Reactive Programming is a programming paradigm wherein code is written to react to events that are produced from a data source or event emitter, such as a mouse click.

You may have heard of events before if you've worked with the DOM in JavaScript. A common event would be the click event, which you would handle with an onClick event handler. Something like the following:

<div onClick="handleClick()"></div>

But I think it's best to define an event as an action that is created asynchronously, such as when the user performs an action, or when an HTTP call receives a response.

Therefore, we can allude that Reactive Programming is all about handling events that are created as our application runs. It is a great method of handling applications that involve a lot of user interactivity, as we can react to the events that the user creates as they use the application.

This makes it an ideal candidate for frontend development. However, writing and maintaining an application that responds to events can quickly become cumbersome without a suitable pattern in place.

Observer Pattern

The Observer Pattern is a pattern that is usually used when implementing event handling systems, or any system that must react to events throughout the application lifecycle.

In its most basic form, it consists of subjects and observers, alternatively called publishers and subscribers.

A subject is an object that consists of a stream of events, and a list of dependents. These dependents are the observers.

When the subject's stream receives a new event, it tells each of its observers that it has received a new event, and will send them a copy of the event. The observers will then handle this event in whatever fashion they see fit. In other words, what they were set up by the developer to do.

Let's review a quick example to help clarify this.

Let's say we need to implement some functionality that tracks user engagement within our application by keeping a record of how many times a user clicks, and by keeping a record of how much time has passed between each time the user has clicked.

With the Observer Pattern, not only can we do this very easily, but we can also separate the concerns, making it much easier to test and maintain, as well as allowing us to add or remove new ways of recording metrics based on the user's clicks within our application.

We would have a subject that receives an event every time a user clicks within the application.

We would then set up two observers. One that will update the record of how many times the user has clicked within the application, and one that will record the time between each click. It may seem like overkill to handle this with two different observers but it massively reduces coupling of logic within our application.

Creating and Using an Event Stream with RxJS

Now, let's look at how we would implement the above use-case using RxJS. It's worth noting that RxJS has two methods of setting up an Event Stream, Subjects and Creation Operators

Subjects
- Subjects share a single execution path to all of their observers
- You would normally set these up manually, and using their API, dictate what values get sent as the message to all of the observers.
- This will be covered in more detail in a future article!
Creation Operators
- These are special functions that will help you turn almost anything into an Event Stream, allowing you to handle them in an asynchronous manner.

To implement the use-cases of performing logic, based on user clicks, within our application, there is a great Creation Operator called fromEvent that creates a stream, and sends a new message to the observers of the stream every time the user clicks within our application.

Let's start by setting up the stream:

const userClick$ = fromEvent(document, 'click');

Something to note here is the $ suffix. This is a convention when writing async code to highlight that this property is an Observable. Essentially, something that can be subscribed to. We will cover Observables in more detail in a future article so stay tuned!

Now, let's see how we would keep track of how many times a user has clicked within our application using this Event Stream:

let numberOfClicks = 0;
const trackNumberClicksSubscription = userClick$.subscribe((event) => {
  numberOfClicks++;
  console.log(`User has clicked ${numberOfClicks} times!`);
});

Every time the user clicks in our app, the numberOfClicks will increase by 1 and the total value will be logged to the console output.

User has clicked 1 times! 
User has clicked 2 times! 
User has clicked 3 times!

.subscribe() returns a Subscription. This Subscription gives you the ability to unsubscribe from an Event Stream if the need arrives. For example, if your application only cares about the user's first 10 clicks, then you could add logic to unsubscribe from the Event Stream when numberOfClicks === 10. This will aid performance as it prevents logic from being run when it isn't necessary.

Subscriptions will be covered in more depth in a future article!

let numberOfClicks = 0;
const trackNumberClicksSubscription = userClick$.subscribe((event) => {
  numberOfClicks++;
  console.log(`User has clicked ${numberOfClicks} times!`);

  if(numberOfClicks === 10) {
    trackNumberClicksSubscription.unsubscribe();
    console.log(`No longer tracking number of user clicks!`);
  }
});

User has clicked 9 times! 
User has clicked 10 times!
No longer tracking number of user clicks!

Now, how about our other use-case, in which we track the time between each user click? Let's set up a new Subscription to the userClick$ Event Stream.

let lastClickTime = -1;
const trackTimeBetweenClicksSubscription = userClick$.subscribe((event) => {
  // Wait until the first click has been received before we start tracking
  // the time between each click
  if (lastClickTime === -1) {
    lastClickTime = Date.now();
    return;
  }

  const difference = (Date.now() - lastClickTime) / 1000;
  console.log(`Time between user clicks: ${difference}s`);

  lastClickTime = Date.now();
});

We simply record the last time the user clicked, and check the difference between that time, and the time we receive the new click event.

Date.now() returns the epoch time in milliseconds, therefore we need to divide by 1000 to get the number of seconds between clicks.

We now have two Subscriptions that handle separate logic, allowing it to be easily maintained and tested!

You can see the above examples in action here.

Conclusion

We've barely scratched the surface of RxJS here, but hopefully by looking at the example above you can start to see the power it provides in writing and maintaining asynchronous, event-based code.

The real power of RxJS comes from its many Operators which can further extend its capabilities and use-cases. We'll cover that in a different article, so stay tuned!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Colum Ferry
JavaScript Developer and Enthusiast. Really enjoy working with Angular. Married with 2 amazing kids. Powered by Coffee.
@FerryColum @https://github.com/coly010

Exploring Angular Forms: A New Alternative with Signals

Exploring Angular Forms: A New Alternative with Signals In the world of Angular, forms are essential for user interaction, whether you're crafting a simple login page or a more complex user profile interface. Angular traditionally offers two primary approaches: template-driven forms and reactive forms. In my previous series on Angular Reactive Forms, I explored how to harness reactive forms' power to manage complex logic, create dynamic forms, and build custom form controls. A new tool for managing reactivity - signals - has been introduced in version 16 of Angular and has been the focus of Angular maintainers ever since, becoming stable with version 17. Signals allow you to handle state changes declaratively, offering an exciting alternative that combines the simplicity of template-driven forms with the robust reactivity of reactive forms. This article will examine how signals can add reactivity to both simple and complex forms in Angular. Recap: Angular Forms Approaches Before diving into the topic of enhancing template-driven forms with signals, let’s quickly recap Angular's traditional forms approaches: 1. Template-Driven Forms: Defined directly in the HTML template using directives like ngModel, these forms are easy to set up and are ideal for simple forms. However, they may not provide the fine-grained control required for more complex scenarios. Here's a minimal example of a template-driven form: ` ` 2. Reactive Forms: Managed programmatically in the component class using Angular's FormGroup, FormControl, and FormArray classes; reactive forms offer granular control over form state and validation. This approach is well-suited for complex forms, as my previous articles on Angular Reactive Forms discussed. And here's a minimal example of a reactive form: ` ` Introducing Signals as a New Way to Handle Form Reactivity With the release of Angular 16, signals have emerged as a new way to manage reactivity. Signals provide a declarative approach to state management, making your code more predictable and easier to understand. When applied to forms, signals can enhance the simplicity of template-driven forms while offering the reactivity and control typically associated with reactive forms. Let’s explore how signals can be used in both simple and complex form scenarios. Example 1: A Simple Template-Driven Form with Signals Consider a basic login form. Typically, this would be implemented using template-driven forms like this: ` ` This approach works well for simple forms, but by introducing signals, we can keep the simplicity while adding reactive capabilities: ` ` In this example, the form fields are defined as signals, allowing for reactive updates whenever the form state changes. The formValue signal provides a computed value that reflects the current state of the form. This approach offers a more declarative way to manage form state and reactivity, combining the simplicity of template-driven forms with the power of signals. You may be tempted to define the form directly as an object inside a signal. While such an approach may seem more concise, typing into the individual fields does not dispatch reactivity updates, which is usually a deal breaker. Here’s an example StackBlitz with a component suffering from such an issue: Therefore, if you'd like to react to changes in the form fields, it's better to define each field as a separate signal. By defining each form field as a separate signal, you ensure that changes to individual fields trigger reactivity updates correctly. Example 2: A Complex Form with Signals You may see little benefit in using signals for simple forms like the login form above, but they truly shine when handling more complex forms. Let's explore a more intricate scenario - a user profile form that includes fields like firstName, lastName, email, phoneNumbers, and address. The phoneNumbers field is dynamic, allowing users to add or remove phone numbers as needed. Here's how this form might be defined using signals: ` > Notice that the phoneNumbers field is defined as a signal of an array of signals. This structure allows us to track changes to individual phone numbers and update the form state reactively. The addPhoneNumber and removePhoneNumber methods update the phoneNumbers signal array, triggering reactivity updates in the form. ` > In the template, we use the phoneNumbers signal array to dynamically render the phone number input fields. The addPhoneNumber and removePhoneNumber methods allow users to reactively add or remove phone numbers, updating the form state. Notice the usage of the track function, which is necessary to ensure that the ngFor directive tracks changes to the phoneNumbers array correctly. Here's a StackBlitz demo of the complex form example for you to play around with: Validating Forms with Signals Validation is critical to any form, ensuring that user input meets the required criteria before submission. With signals, validation can be handled in a reactive and declarative manner. In the complex form example above, we've implemented a computed signal called formValid, which checks whether all fields meet specific validation criteria. The validation logic can easily be customized to accommodate different rules, such as checking for valid email formats or ensuring that all required fields are filled out. Using signals for validation allows you to create more maintainable and testable code, as the validation rules are clearly defined and react automatically to changes in form fields. It can even be abstracted into a separate utility to make it reusable across different forms. In the complex form example, the formValid signal ensures that all required fields are filled and validates the email and phone numbers format. This approach to validation is a bit simple and needs to be better connected to the actual form fields. While it will work for many use cases, in some cases, you might want to wait until explicit "signal forms" support is added to Angular. Tim Deschryver started implementing some abstractions around signal forms, including validation and wrote an article about it. Let's see if something like this will be added to Angular in the future. Why Use Signals in Angular Forms? The adoption of signals in Angular provides a powerful new way to manage form state and reactivity. Signals offer a flexible, declarative approach that can simplify complex form handling by combining the strengths of template-driven forms and reactive forms. Here are some key benefits of using signals in Angular forms: 1. Declarative State Management: Signals allow you to define form fields and computed values declaratively, making your code more predictable and easier to understand. 2. Reactivity: Signals provide reactive updates to form fields, ensuring that changes to the form state trigger reactivity updates automatically. 3. Granular Control: Signals allow you to define form fields at a granular level, enabling fine-grained control over form state and validation. 4. Dynamic Forms: Signals can be used to create dynamic forms with fields that can be added or removed dynamically, providing a flexible way to handle complex form scenarios. 5. Simplicity: Signals can offer a simpler, more concise way to manage form states than traditional reactive forms, making building and maintaining complex forms easier. Conclusion In my previous articles, we explored the powerful features of Angular reactive forms, from dynamic form construction to custom form controls. With the introduction of signals, Angular developers have a new tool that merges the simplicity of template-driven forms with the reactivity of reactive forms. While many use cases warrant Reactive Forms, signals provide a fresh, powerful alternative for managing form state in Angular applications requiring a more straightforward, declarative approach. As Angular continues to evolve, experimenting with these new features will help you build more maintainable, performant applications. Happy coding!...

Oct 4, 2024

5 mins

AngularJavaScript

Fly.io for Easier Cloud Deployment with Annie Sexton

Annie Sexton, Developer Advocate at Fly.io, to discuss Fly.io’s approach to simplifying cloud deployment. Annie shares Fly.io's unique position as a public cloud that offers the flexibility of infrastructure control with a streamlined developer experience. They explore Fly.io’s private networking and distributed app capabilities, allowing developers to deploy applications close to users worldwide with ease. Annie also addresses common challenges in distributed systems, including latency, data replication, and the balance between global reach and simple, single-region projects. Chapters: - 00:00 - 01:32 Introduction to the Modern Web Podcast and Guests - 01:33 - 04:00 Overview of Fly.io and Annie’s Role as Developer Advocate - 04:01 - 06:35 What Makes Fly.io Stand Out Among Cloud Platforms - 06:36 - 08:57 Distributed Applications: Benefits and Use Cases - 08:58 - 11:28 Understanding Distributed Web Servers and Private Networking - 11:29 - 13:49 Challenges in Distributed Data and Replication Techniques - 13:50 - 16:12 Fly.io’s Unique Solutions for Data Consistency - 16:13 - 18:34 When to Consider a Distributed Setup for Your Application - 18:35 - 20:35 Tools and Tips for Evaluating Geographical Distribution Needs - 20:36 - 22:22 Simplifying Global Deployment with Fly.io’s Command Features - 22:23 - 24:18 Considerations for Latency and Performance Optimization - 24:19 - 26:45 Balancing Simplicity with Advanced Control for Developers - 26:46 - 29:04 Easy Deployment for Hobbyists and Smaller Projects - 29:05 - 31:27 Getting Started on Fly.io with Fly Launch - 31:28 - 33:48 Developer Advocacy and Meeting Diverse Needs in the Cloud - 33:49 - 36:15 Catering to Beginners and Experienced Developers Alike - 36:16 - End Closing Remarks and Where to Find Fly.io and the Hosts Follow Annie Sexton on Social Media Linkedin: ⁠https://www.linkedin.com/in/annie-sexton-11472a46/⁠ Github: ⁠https://github.com/anniebabannie⁠ Sponsored by This Dot: thisdot.co...

Nov 6, 2024

2 mins

Software EngineerJavaScript

Going Reactive with RxJS

RxJS is the perfect tool for implementing reactive programming paradigms to your software development. In general, software development handling errors gracefully is a fundamental piece of ensuring the integrity of the application as well as ensuring the best possible user experience. In this article, we will look at how we handle errors with RxJS and then look at how we can use RxJS to build a simple yet performant application. Handling Errors Our general approach to errors usually consists of us exclaiming "Oh no! What went wrong?" but it's something that is a common occurrence in all applications. The ability to manage errors well without disrupting the user's experience, while also providing accurate error logs to allow a full diagnosis of the cause of the error, is more important than ever. RxJS gives us the tools to do this job very well! Let's take a look at some basic error handling approaches with RxJS. Basic Error Handling The most basic way of detecting and reacting to an error that has occurred in an Observable stream provided to us by the .subscribe() method. ` Here we can set up two different pieces of logic—one to handle non-error emission from the Observable and one to gracefully handle errors emitted by the Observable. We could use this to show a Notification Toast or Alert to inform the user that an error has occurred: ` This can help us minimize disruption for the user, giving them instant feedback that something _actually_ hasn't worked as appropriate rather than leaving them to guess. Composing Useful Errors Sometimes, however, we may have situations wherein we want to throw an error ourselves. For example, some data we received isn't quite correct, or maybe some validation checks failed. RxJS provides us with an operator that allows us to do just that. Let's take an example where we are receiving values from an API, but we encounter missing data that will cause other aspects of the app not to function correctly. ` If we receive a value from the Observable that doesn't contain an ID, we throw an error that we can handle gracefully. _NOTE: Using the throwError will stop any further Observable emissions from being received._ Advanced Error Handling We've learned that we can handle errors reactively to prevent too much disruption for the user. But what if we want to do multiple things when we receive an error or even do a retry? RxJS makes it super simple for us to retry errored Observables with their retry() operator. Therefore, to create an even cleaner error handling setup in RxJS, we can set up an error management solution that will receive any errors from the Observable, retry them in the hopes of a successful emission, and, failing that, handle the error gracefully. ` Once we reach an error, emitting the EMPTY observable will complete the Observable. The output of an error emission above is: ` Usage in Frontend Development RxJS can be used anywhere running JavaScript; however, I'd suggest that it's most predominately used in Angular codebases. Using RxJS correctly with Angular can massively increase the performance of your application, and also help you to maintain the Container-Presentational Component Pattern. Let's see a super simple Todo app in Angular to see how we can use RxJS effectively. Basic Todo App We will have two components in this app: the AppComponent and the ToDoComponent. Let's take a look at the ToDoComponent first: ` Pretty simple, right? It takes an item input and outputs an event when the delete button is clicked. It performs no real logic itself other than rendering the correct HTML. One thing to note is changeDetection: ChangeDetectionStrategy.OnPush. This tells the Angular Change Detection System that it should only attempt to re-render this component when the Input has changed. Doing this can increase performance _massively_ in Angular applications and _should_ always be applicable to _pure_ presentational components, as they should only be rendering data. Now, let's take a look at the AppComponent. ` This is a container component, and it's called this because it handles the logic relating to updating component state as well as handles or dispatches side effects. Let's take a look at some areas of interest: ` We create a basic local store to store our ToDo items; however, this could be done via a state management system or an API. We then set up our Observable, which will stream the value of our ToDo list to anyone who subscribes to it. You may now look over the code and begin to wonder where we have subscribed to items$. Angular provides a very convenient Pipe that handles this for us. We can see this in the template: ` In particular, it's the (items$ | async) this will take the latest value emitted from the Observable and provide it to the template. It does much more than this though. It also will manage the subscription for us, meaning when we destroy this container component, it will unsubscribe automatically for us, preventing unexpected outcomes. Using a pure pipe in Angular also has another performance benefit. It will only ever re-run the code in the Pipe if the input to the pipe changes. In our case, that would mean that item$ would need to change to a whole new Observable for the code in the async pipe to be executed again. We never have to change item$ as our values are then streamed through the Observable. Conclusion Hopefully, you have learned both about how to handle errors effectively as well put RxJS into practice into a real-world app that improves the overall performance of your application. You should also start to see the power that using RxJS effectively can bring!...

Dec 28, 2020

4 mins

RxJSJavaScript

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

In this episode of Leadership Exchange, host Rob Ocel chats with Jerry Reghunadh, Senior Director of Enterprise Architecture at Data Nimbus, about leadership, AI adoption, and data-driven decision-making. Jerry shares his career journey, insights on leveraging tools like ChatGPT and Copilot, and strategies for building effective data pipelines. They explore how companies can avoid "analysis paralysis," adopt AI strategically, and evaluate new technologies to solve real-world problems. Tune in for practical advice on aligning innovation with business goals and staying competitive in a rapidly evolving tech landscape. Chapters 00:00 – Introduction 00:31 – Jerry’s Leadership Journey 02:01 – Discussing AI in Leadership 03:59 – Experimenting with AI Tools 06:24 – Overcoming Analysis Paralysis 09:18 – Importance of Early AI Adoption 13:12 – AI’s Impact on Efficiency 14:30 – Sponsor Message 16:26 – Setting Realistic Goals for AI 19:41 – Data Management and AI 23:09 – Is AI Just a Fad? 27:22 – Testing New Technologies 29:56 – Final Thoughts on AI 30:25 – Connect with Jerry 30:44 – Closing Remarks 31:20 – Outro Follow Jerry on Social Media Linkedin: https://www.linkedin.com/in/jerrymannel/ Sponsored by This Dot: thisdot.co...

Nov 18, 2024

1 min

AIEngineering Leadership

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Getting Started with RxJS

Reactive Programming

Observer Pattern

Creating and Using an Event Stream with RxJS

Conclusion

Colum Ferry

You might also like

Exploring Angular Forms: A New Alternative with Signals

Fly.io for Easier Cloud Deployment with Annie Sexton

Going Reactive with RxJS

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh

Let's innovate together!

You might also like

Exploring Angular Forms: A New Alternative with Signals

Fly.io for Easier Cloud Deployment with Annie Sexton

Going Reactive with RxJS

AI Leadership: Data-Driven Decision Making & Avoiding "Analysis Paralysis" with Jerry Reghunadh