DEV Community: Danyson

Reactive Programming with RxJS

Danyson — Tue, 26 Dec 2023 11:56:48 +0000

Reactive programming is a paradigm that deals with asynchronous data flows, where the data is transformed and manipulated by applying various operators.

RxJS is a library that implements reactive programming in JavaScript, providing a rich set of operators and utilities to work with observables, which are streams of data that can be subscribed to and reacted to.

One of the main benefits of reactive programming is that it allows us to write cleaner, more maintainable, and robust code, especially when dealing with complex logic, concurrency, and error handling. Reactive programming also enables us to create declarative UIs that react to changes in data and user interactions.

To illustrate reactive programming with examples from RxJS, let's look at some common scenarios:

Fetching data from an API: Suppose we want to fetch some data from an API endpoint using RxJS. We can use the from operator to create an observable from a function that returns a promise. The promise will resolve with the data when it is available. Then we can use the map operator to transform the data into a desired format. For example:

import { from } from 'rxjs';
import { map } from 'rxjs/operators';

// Define a function that returns a promise
function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .catch(error => console.error(error));
}

// Create an observable from the function
const fetchDataObservable = from(fetchData);

// Map the data into an array of objects
const dataArray = fetchDataObservable.pipe(
  map(data => {
    // Do some transformation here
    return {
      id: data.id,
      name: data.name,
      price: data.price
    };
  })
);

// Subscribe to the observable and log the array
dataArray.subscribe(array => console.log(array));

Filtering and sorting data: Suppose we want to filter and sort some data based on some criteria using RxJS. We can use the filter operator to apply a predicate function that returns true or false for each element in the stream. The predicate will determine which elements are emitted by the stream. Then we can use the sorted operator to sort the elements based on one or more keys. For example:

import { filter, sorted } from 'rxjs/operators';

// Define some sample data
const sampleData = [
  { id: 1, name: 'Alice', price: 10 },
  { id: 2, name: 'Bob', price: 20 },
  { id: 3, name: 'Charlie', price: 30 },
];

// Filter out elements with price less than or equal to 15
const filteredData = sampleData.pipe(
  filter(data => data.price > 15)
);

// Sort elements by name in ascending order
const sortedData = filteredData.pipe(
  sorted('name')
);

// Subscribe to the observable and log the arrays
sortedData.subscribe(array => console.log(array));

Combining multiple streams: Suppose we want to combine multiple streams of data into one stream using RxJS. We can use various operators such as merge, concat, zip, or combineLatest depending on our needs. For example:

import { merge } from 'rxjs';

// Define two sample streams of numbers
const stream1 = new Observable<number>(observer => {
  setTimeout(() => observer.next(1), 1000);
});

const stream2 = new Observable<number>(observer => {
  setTimeout(() => observer.next(2), 2000);
});

// Merge both streams into one stream
const mergedStream = merge(stream1, stream2);

// Subscribe to the observable and log each number emitted by both streams
mergedStream.subscribe(number => console.log(number));

These are just some examples of how reactive programming with RxJS can help us write better code for various scenarios. If you want to learn more about reactive programming with RxJS, you can check out the official documentation => RxJs

Explore more about me here:- danyson.netlify.app

LinkedIn : LinkedIn/danyson

Reactive Programming with RxJS

Danyson — Tue, 26 Dec 2023 11:56:48 +0000

Reactive programming is a paradigm that deals with asynchronous data flows, where the data is transformed and manipulated by applying various operators.

RxJS is a library that implements reactive programming in JavaScript, providing a rich set of operators and utilities to work with observables, which are streams of data that can be subscribed to and reacted to.

To illustrate reactive programming with examples from RxJS, let's look at some common scenarios:

Fetching data from an API: Suppose we want to fetch some data from an API endpoint using RxJS. We can use the from operator to create an observable from a function that returns a promise. The promise will resolve with the data when it is available. Then we can use the map operator to transform the data into a desired format. For example:

import { from } from 'rxjs';
import { map } from 'rxjs/operators';

// Define a function that returns a promise
function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .catch(error => console.error(error));
}

// Create an observable from the function
const fetchDataObservable = from(fetchData);

// Map the data into an array of objects
const dataArray = fetchDataObservable.pipe(
  map(data => {
    // Do some transformation here
    return {
      id: data.id,
      name: data.name,
      price: data.price
    };
  })
);

// Subscribe to the observable and log the array
dataArray.subscribe(array => console.log(array));

Filtering and sorting data: Suppose we want to filter and sort some data based on some criteria using RxJS. We can use the filter operator to apply a predicate function that returns true or false for each element in the stream. The predicate will determine which elements are emitted by the stream. Then we can use the sorted operator to sort the elements based on one or more keys. For example:

import { filter, sorted } from 'rxjs/operators';

// Define some sample data
const sampleData = [
  { id: 1, name: 'Alice', price: 10 },
  { id: 2, name: 'Bob', price: 20 },
  { id: 3, name: 'Charlie', price: 30 },
];

// Filter out elements with price less than or equal to 15
const filteredData = sampleData.pipe(
  filter(data => data.price > 15)
);

// Sort elements by name in ascending order
const sortedData = filteredData.pipe(
  sorted('name')
);

// Subscribe to the observable and log the arrays
sortedData.subscribe(array => console.log(array));

Combining multiple streams: Suppose we want to combine multiple streams of data into one stream using RxJS. We can use various operators such as merge, concat, zip, or combineLatest depending on our needs. For example:

import { merge } from 'rxjs';

// Define two sample streams of numbers
const stream1 = new Observable<number>(observer => {
  setTimeout(() => observer.next(1), 1000);
});

const stream2 = new Observable<number>(observer => {
  setTimeout(() => observer.next(2), 2000);
});

// Merge both streams into one stream
const mergedStream = merge(stream1, stream2);

// Subscribe to the observable and log each number emitted by both streams
mergedStream.subscribe(number => console.log(number));

What does the "yield" keyword do in Python and Javascript?

Danyson — Tue, 12 Dec 2023 20:27:35 +0000

The "yield" keyword in both Python and Javascript plays a key role in working with generators, but with some subtle differences:

Python:

Function creation: yield is used to create generator functions, which are functions that can pause and resume their execution multiple times, yielding values each time they resume. This allows for memory-efficient iteration over large datasets or lazy evaluation of expressions.
Pausing and resuming: Within a generator function, yield pauses execution and returns a value to the caller. The function can then resume execution when the caller requests the next value using an iterator interface.

def fibonacci(n):
  a, b = 0, 1
  for _ in range(n):
    yield a
    a, b = b, a + b

# Use the generator with a for loop
for num in fibonacci(10):
  print(num)

This code generates the first 10 Fibonacci numbers without storing them all in memory at once.

Javascript:

Async iteration: yield is used with the async and await keywords to pause and resume execution in asynchronous code. It allows for iterating over asynchronous operations one by one, similar to a regular loop.
Returning values: Similar to Python, yield within an async generator function returns a value to the caller. However, it doesn't pause execution; instead, it signals that the next value is ready when the caller resumes.

async function fetchUserRepos(username) {
  const response = await fetch(`https://api.github.com/users/${username}/repos`);
  const repos = await response.json();

  for (const repo of repos) {
    yield repo.name;
  }
}

(async () => {
  const repoNames = [];
  for await (const name of fetchUserRepos('<insert_userName_here>')) {
    repoNames.push(name);
  }
  console.log(repoNames); // Prints all repository names
})();

This code fetches a user's repositories from Github and iterates over them one by one, waiting for each repository to be fetched before proceeding.

Key differences:

Feature	Python	Javascript
Execution	Synchronous	Asynchronous
Value consumption	`for` loop or iterators	`next()` method
Generator completion	`return` statement or end of function	`return` statement or end of function

Purpose:

In Python, yield is primarily used for memory-efficient iteration and lazy evaluation. In Javascript, it's used for asynchronous iteration and managing control flow in async functions.

Execution:

Python's yield pauses execution completely, while Javascript's yield only signals that a value is ready for the caller.

I hope this clarifies the role of yield in both Python and Javascript. Feel free to ask if you have further questions!

Website: https://danyson.netlify.app/
LinkedIn: https://www.linkedin.com/in/danyson/

Clean Code Principles - Vadivelu Version 1

Danyson — Tue, 05 Dec 2023 21:26:05 +0000

Keep it simple Stupid (KISS). Avoid unnecessary complexity in your code. | Danyson Jose posted on the topic | LinkedIn

1. Keep it simple Stupid (KISS). Avoid unnecessary complexity in your code. If you can find a simpler way to write something, do it. 2. Single Responsibility…

linkedin.com

How to temporarily save your uncommitted changes using Git Stash?

Danyson — Tue, 05 Dec 2023 21:08:23 +0000

Use git stash to temporarily save your uncommitted changes.

Steps:

Make some changes to your files.
Run git status to see that you have uncommitted changes.
Run git stash to save your uncommitted changes.
Make some more changes to your files.
Run git status to see that you have uncommitted changes again.
Run git stash list to see your stashed changes.
Run git stash apply to apply your first stashed changes and restore your working directory to the state it was in before you ran git stash.
Run git stash pop to apply your first stashed changes and delete them from the stash.

This trick can be useful if you need to temporarily switch to a different branch or work on another task without losing your uncommitted changes.

My Website: danyson.netlify.app
My LinkedIn: linkedin/danyson

Last Write Wins - A Conflict resolution strategy

Danyson — Sun, 24 Apr 2022 17:16:59 +0000

Imagine, a file or database is written concurrently by 3 processes.

Eventhough from the user point of view where all the file write processeses happen at the same time, but that doesn't mean all three can co exist in the same file or database field right?

It will break consistency.

So, we need to make sure only the last written data as the final data for the file, in a given time.

How do we consider which data is the last data?

Timestamp of course!

Timestamp is used for each write operation to identify which write is the final write.

MongoDB and Cassandra are examples of having Last Write Wins Strategy.

More importantly in Cassandra if we are quering an update, each column has its own timestamp value.

Hope you guys find usefull

Support us by Buying us some Cookies

Visit our site Doge Algo

Staged Event Driven Architecture for highly concurrent systems

Danyson — Sat, 09 Apr 2022 14:42:13 +0000

Brief:

Anything connected to internet has the probability of accessing its resources from anywhere at any given time from any number of users.

As the "any number of users" translates to the number of users can be from 1 to billion at any given time.

Arises the question of, how we are going to allocate resources accessible by the users of any number?

Lets break things up,

So any number of user can be accessing resources at any time, says clearly the need arises dynamically.

So lets say we can dynamically increase our resources at any time.

A fictious controller that is responsible for increasing the resource pool as per the load.

The Staged Event driven system:

Consider every call towards the system as Event.

Each Event can be processed by Network of Stages.

Why Events should be processed by "Network of Stages"?

Lets take HTTP request as an example,

A Socket connection Event is established with the server and request is read from Socket
The HTTP request packet is parsed in HTTP parser
If the requested data by the HTTP request Event is available in Cache, then Cache hit and proceeds to send response by writing the data to the Socket
If the requested data by the HTTP request is not available in Cache, then Cache miss, now handle Cache miss by doing an I/O Event to the Database to fetch the Cache missed Data back to system, now system sends data by writing the data to the Socket

The above 4 steps are general, which is why Events are processed in stages.

A Staged event driven HTTP server will look as follows

Figure 1: Staged event driven HTTP server[1]

Each stage from above example

Socket IN
Data Parser
Cache
Database (File I/O)
Socket OUT

as each stage handles their very own Events, each stages will have a Event Queue, Event Handler and Resource Pool Controller

Event Queue holds events
Event Handler manages the events by doing enqueue and dequeue operations on the Event Queue
Resource Pool Controller will allocate the resources like CPU, Network I/O, Memory required by Each Stage Figure 2: SEDA Stage[1]

The Resource Pool Controller can be classified in to two types

Thread pool controller
Batching controller

As the name suggest the Thread pool controller controls the amount of threads running in the pool.

While the Batch controller controls the number of events processed by Event handlers on their each iterations

Figure 3: Thread pool controller[1] and Batching controller[1]

Reference:

http://www.sosp.org/2001/papers/welsh.pdf

Hope you guys find usefull

Support us by Buying us some Cookies

Visit our site Doge Algo

Firewall: Egress Filtering with ufw

Danyson — Sat, 12 Feb 2022 08:45:15 +0000

What is about Firewalls with Egress filtering?

Egress filtering is when we control the traffic leaving our network. Egress filtering limits our outbound traffic flow to a reduced subset by introducing Firewall rules.

Which tool we are going to use for implementing Egress Filtering?

We are going to use the ufw tool which defaults in Ubuntu distros. You can also install ufw for other Linux distros.

Lets go root first

sudo su

We are assuming here that we have a system with Ubuntu,
lets start by enabling ufw

ufw enable

Why is there a need for Egress Filtering?

Egress filtering restricts the information that you don't want to leak into internet. Whether an internal system is compromised and it shares information to some remote hosts that can we avoided, an information leak may happen due to misconfigurations or network mapping attempts and that can also we avoided.

Now we are going to block some TCP/UDP ports and IP from establishing outbound connections

Trivial File Transfer Protocol - TFTP - UDP - 69

TFTP helps to move files between remote hosts, thus it will be a doorway for the attacker to move their payloads to the compromised system, an unsual connection between your system and a remote host through tftp is an indication of a compromised system

You can find if any connection established through this port by using the following command

netstat -anu | grep ":69"

its better to block its port so that it wont do any outbound communications.

for that try the following command

ufw deny out 69/udp

Now your firewall is updated with blocking the TFTP on UDP at port 69

Syslog - UDP - 514

Syslog operating on UDP at port 514 helps to send logs to a server. Log files may contain sensitive or private information, anytime if you are not sure of any system, you can block syslog from making any oubound connection.

Try,

ufw deny out 514/udp

Simple Network Management Protocol – SNMP - UDP - 161-162

SNMP on UDP at port range 161 to 162 is capable of collecting,organizing informations, monitor the network, detect network faults, and sometimes even used to configure remote devices.

To block SNMP, Try

ufw deny out 161:162/udp

SMTP mail server TCP - 25

Many systems are compromised for to be used as SPAM relays for sending emails. To avoid this we can block all the IPs from accessing TCP port 25 execpt our mail server ip

ufw allow from <our-mail-server-ip> to any proto tcp port 25

ufw deny from any to any proto tcp port 25

Internet Relay Chat – IRC - TCP 6660-6669

IRC is a network for text-based messaging. An attacker can communicate with the compromised system throuh IRC, eventhough IRC can connect with any port, the most common port ranges are 6660 to 6669.

Try,

ufw deny out 6660:6669/tcp

The Internet Control Message Protocol - ICMP

ICMP is a network layer protocol used by network devices to diagnose network communication issues. ICMP is mainly used to determine whether or not data is reaching its intended destination in a timely manner.

Using ICMP can lead to three differnt scenarios of vulnerablity

Echo reply packets (type 0 code 0) are returned by a system in response to receiving Echo Request packets. This is when someone pings our system replies back. An attacker can use this for secret communication channel.
An attacker can ping a network with its connected hosts and look for host unreachable (type 3 code 1) reply from the network to identify which hosts are offline and which are online which in turn becomes a network mapping tool for the attacker.
Time Exceeded in Transit (type 11 code 0) Network mapping tools like traceroute, tracert, Firewalk and tcptraceroute map all of the routers between a source and a target host by creating modified packets with having abnormal low Time To Live (TTL). So the routing devices in its path return ICMP time exceeded.

As usual got root with,

sudo su

Lets take a back up of our firewall rules

cp /etc/ufw/before.rules /etc/ufw/before.rules_backup

vi /etc/ufw/before.rules

which will output as below

# ok icmp codes for INPUT
-A ufw-before-input -p icmp --icmp-type destination-unreachable -j ACCEPT
-A ufw-before-input -p icmp --icmp-type source-quench -j ACCEPT
-A ufw-before-input -p icmp --icmp-type time-exceeded -j ACCEPT
-A ufw-before-input -p icmp --icmp-type parameter-problem -j ACCEPT
-A ufw-before-input -p icmp --icmp-type echo-request -j ACCEPT

try changing like below

# ok icmp codes for INPUT
-A ufw-before-input -p icmp --icmp-type destination-unreachable -j DROP
-A ufw-before-input -p icmp --icmp-type source-quench -j ACCEPT
-A ufw-before-input -p icmp --icmp-type time-exceeded -j DROP
-A ufw-before-input -p icmp --icmp-type parameter-problem -j ACCEPT
-A ufw-before-input -p icmp --icmp-type echo-request -j DROP

then reload the firewall

ufw reload

Hope you guys find usefull

Support us by Buying us some Cookies

How do I undo 'git add'?

Danyson — Sat, 29 Jan 2022 14:14:43 +0000

Lets say we either did a git add <file-name> to stage a specific modified file or git add . to stage all the modified files.

We may consider git reset but we must do git reset only if we are trying to unstage "a change" in the file.

When we need to just unstage the file.

Good practice is,

if we done a git add <file-name>

Then the solution is git rm --cached

if we done a git add .

Then the solution is git rm -r --cached, as the git add . is recursive, we need to bring in the flag -r

Support Us: Buy Me a Cookie 🍪

What is the difference between 'git pull' and 'git fetch'?

Danyson — Sat, 29 Jan 2022 13:58:11 +0000

git fetch

Explanation: git fetch fetches commits from the target branch that is not in our current local branch and stores them in our local repository.

It does not merge. Which means we have the changes from target branch but not yet merged to our local branch.

git pull

Explanation: git pull does both git fetch and git merge.

Which means changes from target branch will be fetched and merged to our local branch.

Support Us: Buy Me a Cookie 🍪

Micro Frontends

Danyson — Sun, 09 Jan 2022 19:14:45 +0000

We all familiar with the term Micro Services, lot of organizations adapted this pattern to decompose their monolith back-end applications in to seperate entities based on their functions, that can be coveniently developed, tested and deployed with lot of other services.

While the Front-end mostly kept Monolith.

Now what if we apply this pattern of decomposing a monolith Front-end application to many pieces of Front-end applications?

Let's discuss few scenarios:

A company with lot of experience on CRM applications developed with an very old legacy Native HTML, CSS and JS wants to taste the Latest Angular or React
A complex food ordering and delivery company with a Front-end that handles ordering, delivery and listing restaurants with their foods needs to manage the code base complex free among various teams working on the same monolith Front-end

There can be a solution as mentioned by the below image from Thoughtworks latest article on Micro Front-ends

Now the question arises, how these different blocks of front end applications route among themselves?
There is one such example as the Thoughtworks article discusses with the term as follows

Cross Application Routing

Benifits:

Adopting this pattern can lead to much smaller source code of each individual micro frontend than that of source code of a single monolithic frontend.
These smaller codebases can be simple and easy to develop for developers.
We can avoid the complexity due to unwanted coupling between components that needs to be hidden.

Possible Downsides:

Increased Payload size due to different JS bundles. Solution: The integration team should know about the possible bottlenecks
The situation where multiple teams working on differnt components face a co-ordination crisis
Solution: An intense Test driven Production like deployment cycle must be followed before the actual production deployment
Final thing is to consider is how we are going to manage when the Micro Frontend components gets increased in numbers?

Support Us: Buy Me a Book

Explore more on dogealgo

Reference:
https://martinfowler.com/articles/micro-frontends.html

How to delete remote commits in git?

Danyson — Thu, 06 Jan 2022 18:00:54 +0000

Assume you have pushed commits in order A1 => B2 => C3 in remote repository.

Now you want to delete commits C3 and B2.

The simple solution is as follows using git reset

 git reset --hard <A1-commit-id>
 git push -f origin <branch-name>

However, you should avoid doing this if anyone else is working with your remote repository and has pulled your changes C3 and B2.

That's where git revert comes in

git revert --no-commit C3
git revert --no-commit B2
git commit -m "commit message for your reverts"

Avail My IT Services on https://danyson.netlify.app/