Angular Signals

Eslam Heikal — Sun, 08 Dec 2024 11:31:03 +0000

Imagine you’re in a busy café with a friend. Whenever your coffee order is ready, a light above the counter flashes—it’s a signal! You don’t need to keep asking if your coffee is ready; the light tells you instantly.

They act like messengers, notifying your application when data changes so everything updates seamlessly, without you needing to check constantly.

Signals are reactive state management mechanism that provide an intuitive way to manage and track state changes while improving performance by removing the need for manual subscriptions, zonal bindings, or complex state management libraries.

*Nice to know that signals are *

Declarative State Management: Signals create observable values that automatically update when dependencies change.
Fine-Grained Reactivity: Updates are localized, meaning only components or templates depending on the signal will re-render.
Simplicity: Minimal boilerplate compared to other reactive paradigms like RxJS.

How do we use signals?

1.Create a signal with an initial value.

// import signal to use
import { signal } from "@angular/core";

// define a signal with intial value
const _counter = signal(0);

2.Read a signal value.

_counter()

3.To change the value.

_counter.set(1);

4.To change the value with make some login

_counter.update((value) => {
   if(value == 0) return 0;

   return value - 1;
});

5.Derived signals calculate values based on other signals; this will create a new signal based on the current signal.

const doubleCounter = computed(() => _counter() * 2);

6.To create a signal from observable.

const rxSignal = fromObservable(of(1, 2, 3));

7.To create an observabel from a signal.

const obs$ = toObservable(rxSignal);
obs$.subscribe(value => console.log(value));

To define readonly signal, you can use computed signal to define a signal as readonly

// both are readonly
_counter: Signal<number> = signal(0);
_doubleCount: Signal<number> = computed(() => this._counter() * 2);

To define writable signal, you can use default signal or WritableSignal

// both are writable
_counter = signal(0); // default is writable
_counter: WritableSignal<number> = signal(0);

Now let's go with a counter example:
It has two components (one for view and a second for increment/decrement) and one service to manage our signal.

1.Counter serive to manage our signal.
we have three function :

*getCounter: * To read signal value.
*increment: * To increment the signal value.
*decrement: * To decrement the signal value and apply a condition.

import { signal } from "@angular/core";

export class CounterService {
    private _counter = signal(0);

    getCounter() {
        return this._counter();
    }

    increment() {
        this._counter.update((value) => value + 1);
    }

    decrement() {
        this._counter.update((value) => {
            if(value == 0) return 0;

            return value - 1;
        });
    }
}

2.Control component that uses the counter service and increments/decrements the signal value.

export class CounterControlsComponent {
  constructor(public counterService: CounterService){}
}

<button (click)="counterService.increment()">Increment</button>
<button (click)="counterService.decrement()">Decrement</button>

View component that uses the counter service to read and display a signal value.

export class CounterViewComponent {
  constructor(public counterService: CounterService){}
}

<p>Counter : {{counterService.getCounter()}}</p>

you should see the view like this, and when you click on decrement when the value is 0 , it shouldn't make anything, just display 0

Summary

Use signals for localized and component-level state.
Prefer computed signals for derived state instead of duplicating logic.
Combine with RxJS when dealing with streams or external observables.

First time to read about Kafka

Eslam Heikal — Thu, 18 Aug 2022 01:46:00 +0000

If you don’t know anything about Kafka this article for you , we are going to start a short journey to get to know Kafka. Now let’s go.

Suppose we have two parties on applications (A and B) and we need to exchange a message which may be is (Text, JSON), What should we do?

First thing to think we will build an APIs in both, It’s good if you have a short message and will be between two apps only.

Now let’s imagine an application A is an online customer service that receive requests from the customer.
And an application B is for employees to display the customer requests and working on them.
And using an APIs application A will receive the requests from all users and send them to application B which is store them into data storage then employees can display the request and working on them.

Maybe you think, we can integrate both with one data storage application A receive requests and store them directly then application B will read them directly it will be good if application A receive small number of requests.
So what if application A receive 100 request per minute ?
, what if application A receive 1000 request per minute ?
and what if application A receive 1000 request per second ?
and so on …etc.

Now what about the performance ? it will be no good.

So integrate both applications using one database is not better solution :( .
What if we have a solution to make application A just receive any number of messages per second then send them to another component made to transfer a huge amount of data quickly 😊 it will be good, right ?

Yes, you right This is Kafka.

Simply we can say Kafka is a platform which is used to handle real-time data storage and exchange message (data) between two parties.
When you work with Kafka will listen some of words like :
Message, Topic, Partition, Producer, Consumer…etc.

Anything will be exchange between two parties called Message.
Now we will transfer data from application A to application B but using Kafka.
Application A will send a message This is known as a Producer.
Application B will receive a message This is known as a Consumer.

Let’s image a scenario, application A (Producer) will receive a huge number of requests at the same time, it will to send them to Kafka directly. GOOD !.

Kafka will receive them and need to store them in place till application B (Consumer) receive them, This place known as Topic.
Topic is a place which use to store a messages, it identified by name each topic has unique name because this name used by producer to send a message to it.

Let’s say we have a topic called *company_customer_services_topic * on Kafka, when you implement the producer you will add the topic name in configuration setup to know the producer, where it can send the messages?

Now our messages store on the topic on Kafka, and application B need those messages (Also when you implement application B as Consumer will add topic name in configuration setup to know where it can get the message? )
Actually, the consumer app always talking with Kafka to tell it, I’m here if and message stored in topic company_customer_services_topic I need to get it.
So now the consumer will pull the messages from the topic and store it in the database, and can work anything with any request.

Summary
Now both applications talk together via Kafka to improve the performance of exchange data, application A(Producer) just receive a requests from customers and produce them to Kafka in specific Topic in the same time application B talk Kafka to consume/subscribe the same topic, once the message arrives and stores in the topic application B(Consumer) will pull it .

DEV Community: Eslam Heikal

Angular Signals

First time to read about Kafka