Benchmark: RXJS 7.8.0 vs Vanilla

HTML Preparation code:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://unpkg.com/rxjs@7.8.0/dist/bundles/rxjs.umd.min.js'></script>

Script Preparation code:

var rawdata = [{"rect":{"y":80.39215686274508,"width":79.10307898259705,"height":17.64705882352941},"value":5909,"label":{"value":"2020-01-27 15:52:39.000","x":39.55153949129853,"y":89.21568627450979}},{"rect":{"y":60.784313725490186,"width":104.99330655957162,"height":17.64705882352941},"value":7843,"label":{"value":"2019-11-11 20:55:13.000","x":52.49665327978581,"y":69.60784313725489}},{"rect":{"y":41.17647058823529,"width":107.1619812583668,"height":17.64705882352941},"value":8005,"label":{"value":"2020-04-14 18:29:52.000","x":53.5809906291834,"y":49.99999999999999}},{"rect":{"y":21.56862745098039,"width":137.46987951807228,"height":17.64705882352941},"value":10269,"label":{"value":"2020-01-22 15:48:25.000","x":68.73493975903614,"y":30.392156862745097}},{"rect":{"y":1.9607843137254903,"width":270,"height":17.64705882352941},"value":20169,"label":{"value":"2020-01-03 19:09:13.000","x":135,"y":10.784313725490195}}];
var x = d3.scaleLinear().range([0, 300]);
var y = d3.scaleBand().range([250, 0]).padding(0.1);

Tests:

RXJS
let { from, Observable } = rxjs; let { flatMap, map, tap, toArray } = rxjs.operators; var data$ = from(rawdata) .pipe( toArray(), map(values => values.sort((a, b) => b.value - a.value)), map(values => values.reverse()), map(values => values.slice(0, 5)), tap((values) => { x = x.domain([0, d3.max(values, d => d.value)]); y = y.domain(values.map((d) => d.label)); }), flatMap(values => values), map(bar => ({ rect: { y: y(bar.label), width: x(bar.value), height: y.bandwidth() }, value: bar.value, label: { value: bar.label, x: x(bar.value) <= 300 / 5 ? x(bar.value) + 10 : x(bar.value) / 2, y: y(bar.label) + y.bandwidth() / 2 } })), toArray() ); let data; data$.subscribe(d => data = d);
Vanilla
let values = rawdata.sort((a, b) => a.value - b.value).slice(0, 5); // Set x and y values x = x.domain([0, d3.max(values, d => d.value)]); y = y.domain(values.map((d) => d.label)); // Set bars on chartmap var data = values.map(bar => ({ rect: { y: y(bar.label), width: x(bar.value), height: y.bandwidth() }, value: bar.value.toString(), label: { value: bar.label, x: x(bar.value) <= 300 / 5 ? x(bar.value) + 10 : x(bar.value) / 2, y: y(bar.label) + y.bandwidth() / 2 } }))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
RXJS
Vanilla

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Browser/OS: Chrome 139 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
RXJS	392300.0 Ops/sec
Vanilla	911533.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two approaches: RXJS (a popular JavaScript library for reactive programming) and Vanilla JavaScript (the standard JavaScript without any additional libraries). The benchmark compares the execution speed of these two approaches in rendering a chart with bar charts.

**Test Case Comparison**

There are only two test cases:

1. **RXJS**: This test case uses the RXJS library to create an observable from the raw data, apply various operators to transform and filter the data, and finally render the chart using D3.js.
2. **Vanilla**: This test case performs the same operations as the RXJS test case but without using any additional libraries. Instead, it uses standard JavaScript functions like `sort`, `slice`, `map`, and `reduce` to process the data.

**Options Compared**

The two approaches differ in how they handle data processing and rendering:

* **Data Processing**: RXJS uses its operators (e.g., `pipe`, `flatMap`, `map`) to transform and filter the data, while Vanilla JavaScript relies on standard functions like `sort`, `slice`, and `map`.
* **Rendering**: Both approaches use D3.js to render the chart. However, RXJS creates an observable that emits the transformed data, whereas Vanilla JavaScript processes the data in-place.

**Pros and Cons**

**RXJS (Reactive Programming)**

Pros:

* Efficient processing of large datasets using reactive programming principles
* Simplified code structure with a focus on operator chaining
* Built-in support for handling errors and side effects

Cons:

* Adds overhead due to library dependencies and runtime checks
* Requires learning additional concepts and syntax

**Vanilla JavaScript (Standard Library)**

Pros:

* No external library dependencies or runtime checks
* Familiarity with standard JavaScript functions makes it easier to understand and modify code
* Can be more efficient for small datasets

Cons:

* More verbose code structure compared to RXJS
* Requires manual handling of errors and side effects

**D3.js (Visualization Library)**

Both approaches rely on D3.js for rendering the chart. While not explicitly mentioned in the benchmark definition, it's essential to consider the pros and cons of using a visualization library:

Pros:

* High-performance rendering capabilities
* Rich set of tools for data visualization and manipulation

Cons:

* Additional library dependency
* Steeper learning curve due to D3.js-specific syntax and concepts

Related benchmarks:

RXJS 7.8.0 vs Vanilla (version: 0)

Comparing performance of: RXJS vs Vanilla

Created: 3 years ago by: Guest

Jump to the latest result

RXJS

Vanilla

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):