Benchmark: RXJS vs Vanilla v2

HTML Preparation code:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://unpkg.com/rxjs@7.5.5/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 { of, Observable } = rxjs; let { flatMap, map, tap, toArray } = rxjs.operators; var data$ = of(rawdata) .pipe( map(values => values.sort((a, b) => b.value - a.value)), 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)); }), map(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 } }))) ); 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: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Browser/OS: Firefox 122 on Windows

View result in a separate tab

Test name	Executions per second
RXjs	201962.4 Ops/sec
vanilla	355730.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and analyze the provided benchmark.

**Benchmark Overview**

The benchmark compares two approaches: RXJS (a reactive programming library) and Vanilla ( plain JavaScript). The test case uses D3.js (Data-Driven Documents) for data visualization.

**Options Compared**

The benchmark tests two main options:

1. **RXJS**: This approach uses the Reactive Extensions for JavaScript (RxJS) library to create an observable sequence from the raw data. The pipeline of operators applied to this sequence:
	* `sort`: sorts the values in descending order.
	* `slice`: takes only the first 5 elements.
	* `tap`: updates the x and y scales based on the sorted values.
	* `map`: transforms each element into a bar object with properties: `rect`, `value`, and `label`.
2. **Vanilla**: This approach uses plain JavaScript to achieve similar results:
	* sorts the raw data in descending order using an arrow function.
	* sets up the x and y scales based on the sorted values (similar to tap).
	* creates a new array of bar objects with properties: `rect`, `value`, and `label`.

**Pros and Cons**

**RXJS:**

Pros:

* Simplifies complex data processing and visualization tasks using reactive programming concepts.
* Provides a declarative API, making it easier to focus on what the program should do rather than how it's done.

Cons:

* Additional dependencies (RxJS library).
* Can introduce overhead due to the creation of an observable sequence.

**Vanilla:**

Pros:

* No additional dependencies required.
* More control over the pipeline and optimization opportunities for better performance.

Cons:

* Requires more manual effort and knowledge of array manipulation techniques.

**Other Considerations**

The benchmark uses D3.js, which is a popular data visualization library. The test case creates a chartmap with bars representing each data point, where x represents time, y represents value, and the color represents label.

The test also uses JavaScript features like arrow functions, destructuring, and template literals (not explicitly mentioned in the benchmark definition).

**Alternatives**

Other alternatives for reactive programming libraries include:

* **Redux**: a state management library that shares similarities with RxJS.
* **Preact**: a lightweight alternative to React that can be used for data visualization.

For plain JavaScript implementations, other libraries like **Lodash** or **Underscore.js** provide utility functions for array manipulation and data processing.

In summary, this benchmark compares two approaches: RXJS (reactive programming library) and Vanilla (plain JavaScript). The test case uses D3.js for data visualization, and the results highlight the trade-offs between using a reactive programming library versus plain JavaScript.

Related benchmarks:

RXJS vs Vanilla v2 (version: 0)

RXJS vs Vanilla

Comparing performance of: RXjs vs vanilla

Created: 4 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):