DEV Community: Vaibhav Lande

Data Exchange Between Components Using Angular Signals

Vaibhav Lande — Fri, 03 Jan 2025 15:36:27 +0000

Previously, Angular developers relied on @Input, @Output, or shared services to exchange data between parent and child components. While effective, these methods often introduced tighter coupling and complexity when managing global or shared states.

With the release of signals in Angular 16, and further enhancements in Angular 19, a new approach has emerged that simplifies data sharing. Signals provide a reactive, declarative, and performance-optimized way to transfer data, even between unrelated components.If you are new to signal please go through Angular Signals and It's benifits

In this guide, we’ll explore how to use signals step by step to share data between unrelated components in Angular efficiently.

Step-by-Step Guide

1. Create a Shared Signal Service

2.Parent Component

3.Child Component

Run application and check data will be updated once update button is clicked. In image each line details added in commented line.

Why Use Signals?

Decoupled Architecture: Signals allow components to share state without direct dependencies, leading to more modular and maintainable code.
Automatic Reactivity: Components automatically update when the signal value changes, reducing the need for manual subscriptions.
Optimized Performance: Signals minimize unnecessary DOM updates, ensuring efficient change detection.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile:Vaibhav Lande

Angular Signals and Their Benefits

Vaibhav Lande — Fri, 03 Jan 2025 09:59:22 +0000

In this article, we will explore the exciting world of Angular Signals and their remarkable benefits for building modern, efficient, and scalable web applications.

Signals represent a revolutionary approach to state management and change detection, addressing key challenges developers face with traditional frameworks. By the end of this guide, you'll have a clear understanding of:

What is a signal?
Types of Angular Signals.
Benefits of using signal.

So, let’s start the power of Angular Signals!

What is a signal?

A signal is a new reactive primitive that allows you to build angular applications in a reactive style.

Types of Angular Signals

Writable Signals: This allows you to create a signal with a value that can be updated.

Readonly Signals: Readonly signals can be accessed to read their value but can't be changed using set or update methods.

Computed Signals: Depend on other signals and compute a value based on them.

Effects: Run logic whenever the value of one or more signals changes.

Benefits of using signal

Fine-Grained Reactivity

Signals enable more precise change detection by reacting only to changes in specific data rather than traversing the entire component tree.
This reduces unnecessary DOM updates and boosts application performance.

Example: Without signals, a component with multiple bindings might trigger change detection across all bindings, even if only one changes. Only the dependent bindings are updated with signals.

Push-Based Model

Signals use a push-based reactivity model: updates propagate directly to affected consumers (like templates or other signals).
This eliminates the need for Angular to check every component manually during change detection.

Traditional (Pull-Based): Angular’s default change detection traverses components and checks for changes.
With Signals: Change detection occurs only for parts of the app influenced by the changed signal, reducing overhead.

Simplified State Management

Signals naturally manage state, making it easier to maintain and debug reactive applications.
They integrate seamlessly into Angular’s reactivity model, removing the need for external state management libraries in many cases.

Predictable and Declarative Updates

Signals ensure that state changes are predictable and declarative, meaning developers can explicitly define dependencies and control how changes propagate.
This eliminates ambiguity in determining why and when a change detection cycle runs.

Improved Performance in Large Applications

In large applications, reducing unnecessary change detection cycles drastically improves performance.
Signals allow Angular to skip parts of the component tree unaffected by the change, making them ideal for optimizing resource-heavy or real-time apps.

Seamless Integration with computed and effect

Signals can be combined with computed for derived values and effect for side effects, offering more control over how changes propagate and are detected. Example: const count = signal(0); const doubleCount = computed(() => count() * 2); count.set(1); // Only doubleCount recalculates and updates its dependent views.

Better Debugging and Tooling

Signals provide a straightforward API to monitor and debug reactive changes in the application state.
Developers can easily trace which signals triggered specific updates, reducing debugging time.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile:Vaibhav Lande

API Versioning in .Net Core.

Vaibhav Lande — Mon, 23 Dec 2024 05:30:00 +0000

What is API versioning

API versioning helps you to manage and maintain different versions of endpoints.
It allows the developer to add new functionality instead of changing the existing ones as some clients rely on an older version

Common ways to implement API versioning

URL versioning: https://localhost:7091/api/v1/weatherForecast
Header versioning: https://localhost:7091/api/weatherForecast -H 'X-Api-Version: 1'
Query parameter versioning: https://localhost:7091/api/weatherForecast?api-version=1

Implement URL versioning

Create Project with .NetCore web api template
Install Nuget packages
Asp.Versioning.Mvc : Required for MVC controller end Point and
Asp.Versioning.Mvc.ApiExplorer: Required for ASP.NET Core API Versioning.

Use AddApiVersioning to provide options for API versioning ApiVersioningOptions.

Added the definition of each line in the comment (refer to the above snapshot).

At the controller level specify the supported API version.

Postman Result

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Vaibhav Lande

Microservice communication using Kafka

Vaibhav Lande — Fri, 20 Dec 2024 13:42:47 +0000

.Net Core Microservice Communication Using Kafka.

Vaibhav Lande ・ Dec 20

#eventdriven #microservices #interview #dotnetcore

.Net Core Microservice Communication Using Kafka.

Vaibhav Lande — Fri, 20 Dec 2024 11:43:20 +0000

In today’s data-driven world, real-time data processing is critical for many applications. To meet this demand, Apache Kafka has emerged as a leading open-source platform for managing and processing data streams at scale. Known for its robustness and efficiency, Kafka has become the go-to solution for stream processing.

In this blog, we’ll explore the core concepts of Apache Kafka, its advantages, and how microservices communicate using Kafka. By the end of this journey, you’ll be well-equipped to use Apache Kafka to its full potential, from understanding the theory to configuring it within your .net application.

So, let’s start with basic information about Kafka and its benefits.

What is Apache Kafka?

Apache Kafka is an open-source distributed streaming platform.
Kafka helps you to decouple applications through Producers and Consumers.
Producers and Consumers communicate events through topics.
Topics are created in the broker, Kafka can have 1 to 100s of brokers.
It's highly scalable and available through its replication of topics

Components of Kafka architecture

1. Producer: The producer in Kafka is responsible for sending data or messages to Kafka topics.

2. Broker: Kafka brokers are the core servers that manage the storage, retrieval, and distribution of messages. They handle tasks like message persistence, partitioning of data, and replication across nodes to ensure fault tolerance and reliability.

3. Topic: Topics act as message categories in Kafka, where producers publish records. Each topic represents a stream of related data, providing an organizational structure that simplifies data management and consumption.

4. Partition: Kafka topics are divided into partitions, allowing for parallel data processing. Partitions enable horizontal scalability by distributing the data load across multiple brokers, enhancing both performance and fault tolerance.

5. Consumer: Consumers retrieve and process messages from Kafka topics. They enable downstream applications to react to real-time data, making them fundamental for building data-driven applications, analytics, and more.

6. Offset: Offsets are unique identifiers for messages within a partition. Consumers use offsets to keep track of their progress in reading messages, allowing them to resume from where they left off even after restarts.

Possible Values for auto.offset.reset:

earliest:
This setting makes the consumer start reading from the earliest message available in the topic if no offset exists (e.g., on the first run).
If the consumer’s current offset is out of range (e.g., messages have been deleted), it will start reading from the earliest available offset.

latest:
With this setting, the consumer starts reading from the latest message (i.e., the next message to be produced).
This is useful when you only care about new messages and don’t need to process older messages that the consumer missed.

none:
This value tells Kafka to throw an error if no offset is found or the offset is out of range.
This is useful if you want to ensure that your application always processes data from a known valid offset.

anything else:
If the value of auto.offset.reset is set to anything other than the above options, it will be considered invalid, and Kafka will throw an error.

Now, let’s begin building microservice communication with Kafka, step by step.

Install Docker desktop.
Run Command "docker-compose -f kafka.yml up"
- This command will download Zookeeper and Kafka images and run at the docker desktop application

Create an (MicroserviceWithKafka)Empty solution using Visual Studio and add two .net core web API(Producer and Consumer)

Install Confluent.Kafka nuget package to both APIs.

5.Producer API

Create KafkaProducer.cs class which will be responsible for getting data from the controller post end Point and producing data to a topic

6.Consumer API

Create a hosted service that will consume data from the topic.

Run application and trigger producer end point and based on that respective consumer will get trigger with latest data from topic

Conclusion:

In this article, we have shared practical demo code to understand Apache Kafka and how it’s used in communication between microservices. Using Confluent’s .NET Producer and Consumer APIs is simple and straightforward, which makes it easy to adopt them for real microservices/streaming apps.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Vaibhav Lande

Download the Source code: Github Link

Microservice VS Monolithic

Vaibhav Lande — Thu, 19 Dec 2024 15:03:34 +0000

Monolithic Architecture

Monolithic applications are designed as a single, unified package that encapsulates all the necessary components and services. These applications operate as one complete unit, often sharing the same database and tightly coupling their functionalities.

A visual representation of monolithic architecture typically shows all components and services packaged together in a single block, regardless of whether a service-oriented approach is used.

Key Aspects

Single Repo: One repository to rule them all.
Easy to Scale (At the Start): Straightforward scaling approach.
Simplified Deployment: One-click deployment, one system.
Lower Infrastructure Costs: One server, fewer headaches.
Reduced Complexity: Perfect for small-medium apps.

Microservices Architecture

In contrast, microservices architecture involves breaking down the application into smaller, independent services. Each service runs in its own space and communicates with other services via lightweight messaging protocols, such as REST, Azure/AWS service bus, or messaging queues. Each microservice is self-contained, owning its own database and domain logic, which ensures modularity and independence.

A diagrammatic representation of microservices architecture would highlight the distributed nature of these independent services, each directly managing its own database.

Key Aspects

Fault Isolation: Bugs remain limited in their service.
Scaling each service independently based on the requirement.
Testing Made Easier: Test specific services independently.
Ownership: Independent teams own services.
Easier Revamps: Upgrade or rewrite single services.
Debugging: Focused logs make debugging faster.
Developer Experience: More autonomy and no code conflicts.

😍 If you enjoy the content, please 👍 like, 🔄 share, and 👣 follow for more updates!
Join me on a professional journey through my LinkedIn profile: Vaibhav Lande