DEV Community: Siddharth Sharma

Reactive Programming- Part I

Siddharth Sharma — Tue, 05 Mar 2024 17:32:05 +0000

ReactiveX

What is ReactiveX?
ReactiveX (Rx) is a programming paradigm and library that focuses on asynchronous programming using observable sequences.

Why to use ReactiveX?
ReactiveX provides API to treat and consume asynchronous stream of data originating from various sources e.g: Sensor readings, News Updates etc. in an concise and easy way, thus making it easy to develop and maintain asynchronous data.

Hot vs cold observables

Cold Observables
Sequences that start producing notifications per subscription. It starts producing data only when a subscriber subscribes to it.

Hot Observables
Sequence that starts producing notifications regardless of subscriptions. Subscribers that join later might miss some of the initial data.

Rxjs

RxJS is a implementation of Reactive Extensions (ReactiveX) for Javascript and TypeScript ReactiveX was developed by Erik Meijer at Microsoft. Open sourced in 2012 Used by GitHub, Netflix, SoundCloud, AirBnb and others Reactive Extensions is Cross Platform (available for Java, C#, C++, JavaScript, Python, and more)

Patterns used

The Observer Pattern
The Iterator Pattern
Functional programming concepts

Observer Pattern

// Observer
class Observer {
  constructor(name) {
    this.name = name;
  }

  update(message) {
    console.log(`${this.name} received message: ${message}`);
  }
}

// Subject
class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(message) {
    this.observers.forEach(observer => observer.update(message));
  }
}

// Usage
const subject = new Subject();

const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify("Hello, observers!");
subject.removeObserver(observer2);
subject.notify("Observers after removal.");

Iterator Pattern

The Iterator pattern is a behavioral design pattern that provides a way to access the elements of a collection (such as an array or list) without exposing the underlying representation. It allows you to traverse through the elements sequentially, abstracting away the details of how the traversal is implemented.

// Iterator
class Iterator {
  constructor(collection) {
    this.collection = collection;
    this.index = 0;
  }

  hasNext() {
    return this.index < this.collection.length;
  }

  next() {
    if (this.hasNext()) {
      return this.collection[this.index++];
    }
    return null;
  }
}

// Collection
class Collection {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  getIterator() {
    return new Iterator(this.items);
  }
}

// Usage
const collection = new Collection();
collection.addItem("Item 1");
collection.addItem("Item 2");
collection.addItem("Item 3");

const iterator = collection.getIterator();

while (iterator.hasNext()) {
  console.log(iterator.next());
}

Key Functional Programming Concepts

Pure Functions: Pure functions are functions that always produce the same output for the same input and have no side effects. They don't modify data outside their scope or rely on external state. Pure functions promote predictability, testability, and composability.
Immutability: Functional programming encourages immutability, which means that once a data structure or value is created, it cannot be modified. Instead, new values are created when transformations or modifications are required. This avoids unintended side effects and makes reasoning about code easier.
Higher-Order Functions: In functional programming, functions are treated as first-class citizens. This means that functions can be assigned to variables, passed as arguments to other functions, and returned as results from functions. Higher-order functions are functions that either take other functions as arguments or return functions.
Function Composition: Functional programming promotes composing functions to create more complex behavior. Function composition involves chaining or combining multiple functions together to create a new function. It allows for modular and reusable code.
Recursion: Recursion is a technique where a function calls itself to solve a problem. Functional programming often relies on recursion instead of iterative loops. Recursive functions break down complex problems into simpler subproblems, which can lead to elegant and concise code.
Immutable Data Structures: Functional programming favors immutable data structures, such as lists, sets, and maps, that don't change after creation. Instead of modifying these data structures, functional programming encourages creating new instances with modifications. Immutable data structures provide safety and make it easier to reason about program behavior.
Referential Transparency: Referential transparency means that a function can be replaced with its resulting value without changing the program's behavior. It enables reasoning about code by allowing expressions to be evaluated independently of their context.

Operators

map: Transforms the items emitted by an Observable by applying a function to each item and returning the transformed result.
filter: Filters items emitted by an Observable based on a predicate function, allowing only those items that satisfy the condition to pass through.
mergeMap (also known as flatMap): Projects each source item to an Observable and merges the emissions from those Observables into a single stream. It allows for concurrent inner subscriptions.
switchMap: Projects each source item to an Observable, cancels the previous inner Observable (if any), and emits the values from the most recent inner Observable. Useful for scenarios like canceling ongoing requests when a new request is made.
concatMap: Projects each source item to an Observable and concatenates the emissions from those Observables, ensuring that the order of emissions is preserved.
debounceTime: Emits a value from the source Observable only after a specified amount of silence, ignoring any new values emitted during that period. Useful for scenarios like search input throttling.
distinctUntilChanged: Emits a value from the source Observable only if it is different from the previous value. It ensures that only distinct consecutive values are emitted.
takeUntil: Emits values from the source Observable until another Observable emits a value. After that, it completes and stops emitting further values.
retry: Resubscribes to the source Observable if it encounters an error, allowing for a specified number of retries.
catchError (or catch): Catches errors emitted by the source Observable and substitutes them with another Observable or a default value, allowing graceful error handling.

Angular VS React: Performance comparison with Google Web Vitals

Siddharth Sharma — Sat, 05 Nov 2022 14:47:33 +0000

Target Audience:

Software Developers/ Technical Managers who want to compare performance metrics of Angular and React to get better perspective about which one of these is more suitable for an upcoming project.

Introduction

Angular is a JavaScript framework built by Google, while React is a Javascript library built by Facebook. Angular is mostly used to build complex CRUD applications quickly, while React makes it possible to build apps that need to show a lot of data and need frequent and fast data update with its virtual DOM concept.

This post is going to compare the performance difference between React and Angular in terms of:

1) App bundle size (JS files only)
2) Heap size
3) DOM nodes
4) DOM Content Loaded (DCL)
5) First Contentful Paint (FCP)
6) Largest Contentful Paint (LCP)
7) Time To Interactive (TTI)
8) Scripting time
9) Rendering time

We will be comparing the data from Performance, Memory, Lighthouse, Performance insights (its still a preview feature) and Network tab of Chrome Devtools for a simple application (Contact manager) created in both React (v18.2.0) and Angular (v14.2.6).

Contact Manager Application

We are going to create Contact manager application in both React and Angular. Angular application was created using Angular CLI and React application using Create React App (CRA). The application will have some contacts by default and will have option to increase number of contacts, to allow you to compare these with different number nodes. There is option to provide a query parameter in the URL, no_of_contacts so that we can dynamically provide the number of contacts to be generated. In this article, we will be looking at performance results for 1,000 contacts.

If you would like to check the application’s performance for a different set of contact number, the applications can be accessed by the URL provided or cloned from Github repo link provided at bottom of article.

NOTE: I have tried to list most accurate readings but there are factors like latency and caching etc which could have affected them.

Table of readings (For 1,000 Contacts)

https://gist.github.com/hearsid/6d125d91283cd30c3ff958ef6e1e4e54#file-table-of-readings-1k-md

Setup Details

Hosting: Github pages

Angular stack: Angular v14.2.6 with default packages.

React stack: React (v18.2), react-router-dom, Typescript.

Lets dive in and see how the above reading were taken and how they contribute in enhancing the performance of our application.

1) Application Bundle Size

Application size decides the download time of the files by the browser and plays an important role, specially when the application size is very big or our target audience may be using slow internet connection. The pictures below are of the tab of chrome dev tools and the application size shown in the above table has been calculated by adding the JS file size. The file size can also be checked from the lighthouse report.

1.1 Angular Contact manager network tab

1.2 React Contact manager network tab

2) Heap size

Memory tab is going to show the memory distribution by the page’s JavaScript objects and related DOM nodes. Readings for both Angular and React look fine as for our application.

3) DOM nodes

This is crucial since a template parser’s internal compilation of the templates may result in the insertion of a few extra DOM nodes. Lesser the node elements, lighter the DOM tree, the better it is. But in our case the number of DOM nodes are same for Angular and React.

4) DCL- DOM Content Loaded

When the HTML document has been fully parsed and all deferred scripts have downloaded and run, the DOMContentLoaded event is fired. It doesn’t wait for other elements like as async scripts, subframes and pictures to finish loading. In the below screenshot and for comparison best of 3 readings been taken. We can take readings for these Web vitals from Performance and Lighthouse tab as well. The application looks like this or with less styling after DOM Content Loaded event.

4.2 Angular app DCL, FCP, TTI, LCP

4.3 React app DCL, FCP, TTI, LCP

5) FCP- First Contentful Paint

First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. The appliation should looks like this after FCP.

5.1 Application after FCP

6) LCP- Largest Contentful Paint

LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.

7) TTI- Time To Interactive

The TTI metric measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly. Our application should be completely loaded after this.

8) Scripting time

How much of the total time was spent in scripting phase by the framework. There is significant difference in this for Angular and React,

8.1 Angular app Performance app

8.2 React app Performance tab

9) Rendering Time

How much of the total time was spent in the rendering phase by the frameworks.

10) Onload event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOM Content Loaded event, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.