DEV Community: Asaf Eliasim

Unsubscribe Observable! why is it so important?

Asaf Eliasim — Mon, 23 Dec 2024 13:02:02 +0000

In Angular, Observables are commonly used for asynchronous operations, like HTTP requests, user input events, or WebSocket messages. While Observables are powerful and efficient, one common pitfall developers can encounter is not unsubscribing from them when they are no longer needed. This can lead to memory leaks — where the application continues to hold onto resources (memory) that should have been released.

Let's explain the issue with a real-life metaphor

The Water Tap and the Bathtub

Imagine your application is like a bathtub, and Observables are like water taps filling the bathtub. When you create an Observable, it’s like turning on the tap. The data from the Observable keeps flowing into your app, just like water fills the bathtub. If you don’t close the tap (unsubscribe), the water keeps flowing endlessly, and the bathtub fills up indefinitely. Over time, this will cause issues, like an overflowing bathtub, just like a memory leak happens in your application when you don't unsubscribe from Observables.
If you keep the tap running (don’t unsubscribe), your resources (memory) will eventually run out. The water (data) might even spill over and cause problems in other parts of the house (application). It’s a slow and often hidden process, but if unchecked, it will degrade your app's performance over time.

How It Causes Memory Leaks

When you subscribe to an Observable and don’t unsubscribe, your application listens to the stream even after the component or service that initiated the Observable is no longer in use. This means that Angular will still hold onto the subscription object in memory, keeping it alive. If this happens multiple times, it can result in accumulated memory usage — which is what we call a memory leak.
For instance, when a component is destroyed, if you don't unsubscribe, the Observable may continue emitting values to a destroyed component that no longer exists in the DOM. This can accumulate over time and cause the browser to consume more and more memory, slowing down or even crashing the application.

Different ways to unsubscribe observables and prevent a memory leak issue ❕❕

✅ Unsubscribe in ngOnDestroy
To ensure the observables are cleaned when the component is off, unsubscribe all observables inside the life hook.

✅ Using 'rxjs' operator 'takeUntil'
It is a wonderful way to automatically clean subscriptions, especially when there is more than one observable.
The operator automatically unsubscribes from observables when a specified condition is met.
Take the emitted values until you met the condition.
Usually, we will use a _destory$ Subject and emit a null value inside the life hook on destroy as our action to kill all subscribers.

✅ Async pipe
The pipe subscribes to an Observable and returns the latest value it has emitted. When a new value is emitted, it marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically. It reduces manual subscription management in the model.

✅ DestroyRef
Those developing using Angular >= 16 can use this awesome provider (which provides you) to run a callback (unsubscribe) when the component is destroyed. 🤩

To summarize 🤯
Angular's developers or any other developers that are using the wonderful observables of 'RXJS' keep your subscriptions alive as you never keep your water tap, and every time you fill a bathtub, think about your last feature if you used observables and ensure to unsubscribe them.

DOM - Elevator Pitch

Asaf Eliasim — Fri, 22 Mar 2024 10:46:48 +0000

Who doesn't know about puppets on a string? Pinkoyo-style

DOM stands for Document Object Model. It's the puppeteer for HTML pages.
With the DOM, you can change the HTML page and adjust the elements. It's operated and maintained by JS, of course.

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

Additional Context

Component store – perfect for managing local state

Asaf Eliasim — Fri, 01 Mar 2024 15:03:46 +0000

For those unfamiliar with @ngrx/component-store, this article serves as an imperative read, urging immediate hands-on practice. Additionally, I hope to uncover new insights and refine existing knowledge for those already familiar with its prowess.

Make yourself a cup of coffee and settle in for a few minutes to read.

💥 What is it component store?
The Component Store serves as a tailored state management solution, explicitly designed to handle the state of individual components rather than the global application state, as seen in @ngrx/store. Like other state management solutions, the Component Store enables reading, writing, and handling side effects. Notably, it operates as a push-based service, rendering components reactive. Subscribing to the store allows the view to effortlessly capture immediate changes, amplifying its efficacy.

Within the Component Store architecture, we find four essential components:

✅ State: The cornerstone of our data management, encompassing all information vital to the component's functionality.

✅ Selectors: extract specific data from the component's state, enabling convenient and efficient access to relevant information.

✅ Updaters: modifying the component's state, facilitating seamless updates and modifications.

✅ Effects: handle side effects, ensuring the integrity and stability of the component's state and behavior.

The state, along with its functionalities, is presented as observables, enabling components to observe and react to state changes.

💥 What are the benefits of the component store? What makes it so powerful to use?

😊 Simplicity: It offers a straightforward approach to managing component state, keeping complexity at bay while ensuring efficient state management.
😊 Maintenance: in a direct context to simplicity, it is so comfortable to make some changes and update the service whenever we want.
😊 Performance: Leveraging Agular’s change detection mechanism and observables, Component Store ensures swift state updates and judicious component re-renders, enhancing overall application performance. Moreover, the component state persists as long as the component is active, ensuring efficient resource management.
😊 Encapsulation: Its ability to instantiate multiple instances of the same component, each with its independent state managed within its Component Store, promotes encapsulation and modularity, contributing to a clean and organized codebase.

In summary, the Component Store offers an elegant solution for managing component state, combining simplicity, efficiency, and encapsulation to elevate the development experience.

💥 Now that we grasp the capabilities of the Component Store, let's dive into the implementation.

1️⃣ Begin by defining the managed state within the Component Store and initializing it accordingly. (Feel free to expand upon the state structure as needed.)

This initial state serves as the foundation, ready to scale as needed, accommodating additional details seamlessly.

Omit the providedIn property in the @Injectable decorator, as the Component Store is intended to be provided at the component level.

*While a user type hasn't been created for this example, adhering to best practices dictates that all components should be appropriately typed, and the usage of "any" should be avoided at all costs. *

2️⃣ In our next step, we'll implement selectors to efficiently retrieve data from the state. Leveraging observables, these selectors will ensure a reactive approach, allowing for seamless and elegant handling of data, thereby enhancing both responsiveness and overall user experience.

3️⃣ Now, let's proceed to define our state updaters, and notice their cleanliness and readability.

Do not forget to make validations

4️⃣ The final step in setting up the service store involves implementing side-effects. These serve crucial functions such as handling asynchronous operations and managing component state based on external events or data changes.

The 'setUser' effect, for instance, is responsible for receiving user data and updating the component's state. I've included a 'loading' state as an illustrative example of how we can manage the waiting period for data retrieval from the server.
Another aspect I find particularly satisfying to handle within the store is the 'editButtonStatus' effect. This continuously updates the button's state in the view, determining whether it should be enabled or disabled.
It's worth noting that there's significant potential for customization and manipulation of data streams within these effects using operators. This allows for fine-tuning and tailoring the data flow to precisely fit the requirements of the application.

5️⃣ Now, the last thing, we going to inject the store inside our component and use the selectors and effects.

When dealing with a child component, simply injecting the store service suffices, eliminating the need for explicit provision, especially when aiming to leverage the same store instance.

Understanding Observables: A Real-Life Perspective

Asaf Eliasim — Mon, 12 Feb 2024 08:05:53 +0000

Introduction:
In the realm of modern web development, asynchronous programming plays a pivotal role in creating responsive and interactive applications. However, managing asynchronous operations and handling data streams can often become complex and challenging. This is where the concept of observables comes into play, offering powerful and intuitive solutions to deal with asynchronous data flows. In this article, we will explore the concept of observables, understand why they are used, and delve into real-life examples to illustrate their relevance and importance.

so...
What is an Observable❓
At its core, an observable is a representation of a data stream that emits multiple values over time. Think of it as a pipeline through which data flows continuously, with the ability to emit values, errors, and completion signals. Much like a water pipe carrying water from one point to another, an observable stream facilitates the flow of data from its source to the consumer, allowing for seamless communication and interaction.

Why do we use Observables❓
Observables are used in programming for several reasons, primarily to handle asynchronous operations and manage data streams effectively. They offer a range of benefits, including:

✔ Asynchronous Operations Handling:
Observables provide a structured and consistent way to handle asynchronous tasks such as HTTP requests, user interactions, and timers, making it easier to manage complex asynchronous workflow.

✔ Reactive Programming:
Observables are a fundamental concept in reactive programming, enabling developers to build responsive and scalable applications by reacting to changes in data streams in a declarative and composable manner.

✔ Error Handling:
Observables come with built-in error handling mechanisms, allowing developers to handle errors gracefully within the data stream and propagate them as needed, ensuring robust error handling throughout the application.

✔ Data Transformation and Composition:
Observable offers a rich set of operators for transforming, filtering, combining, and composing data streams, enabling developers to manipulate and process data with ease and efficiency.

✔ Cancellation and Resource Management:
Observable support cancellation, enabling developers to unsubscribe from data streams when they are no longer needed, thus preventing memory leaks and optimizing resource usage.

Why do we use Observable❓
Observables are used in various scenarios where asynchronous data handling is required. some common use cases include:

❕ Handling HTTP requests and responses in web applications.

❕ Managing user interactions such as mouse clicks, keyboard inputs, and touch events.

❕ Processing real-time data streams from sources like sensors, IoT devices, or web sockets.

❕ Implementing reactive user interfaces that react to changes in data and events.

Real-Life Example 🤸‍♂️:
Water Pipes 🚿 to understand observable better
Let's consider the analogy of water pipes in a plumbing system. Imagine a network of interconnected pipes transporting water from a source. such as a reservoir, to various destinations. such as homes, businesses, and public facilities.

Data Stream
In this analogy, the flow of water through the pipes represents the data stream. Similar to how water flows continuously through the pipes, data streams emit values over time.
Source and Destination
The source of the water (reservoir) and the destination (home, businesses) represent the observable and observer respectively. The observable emits values (water) that are observed and consumed by the observer (homes, businesses).
Flow Control
Just as valves and controls regulate the flow of water in the pipes, operators in observables control the flow of data by transforming, filtering, and manipulating the emitted values.
Error Handling
In the event of a leak or malfunction in the pipes, the plumbing system is equipped with mechanisms to detect and address errors. Similarly, observables handle errors within the data stream, ensuring smooth and error-free data flow.

For summary and conclusion
Observables offer a powerful and intuitive way to handle asynchronous data streams in modern web applications. By understanding the concept of observables and their real-life analogies, developers can leverage their benefits to create more responsive, scalable, and robust applications. Whether it's managing HTTP requests, processing real-time data, or reacting to user interactions, observables provide a flexible and efficient solution for handling asynchronous tasks effectively.