Benchmark: RXJS vs Vanilla - MeasureThat.net

HTML Preparation code:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://unpkg.com/rxjs@6.5.5/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: 28 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Windows

View result in a separate tab

Test name	Executions per second
RXJS	107036.9 Ops/sec
Vanilla	390591.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition**

The benchmark is comparing two approaches: one using ReactX (RXJS) and another using vanilla JavaScript.

**Vanilla Approach**

In the vanilla approach, the code uses `d3` library to create a bar chart. Here's what's happening:

* The data is sorted in descending order by value.
* Two functions, `x` and `y`, are created using `d3.scaleLinear()` and `d3.scaleBand()`, respectively. These functions map values to positions on the x-axis and y-axis of the chart.
* The data is then mapped to create bar objects with `rect` properties (width, height, and position). Each bar's value is displayed as a string.

**RXJS Approach**

In the RXJS approach:

* A reactive stream (`data$`) is created using `rxjs.from()` and `rawdata`.
* Several operators are applied to this stream:
	+ `toArray()`: Converts the stream to an array.
	+ `map()`: Sorts the values in descending order. This creates a new array with reversed values.
	+ `slice(0, 5)`: Takes only the first five elements of the sorted array.
* The `tap()` function is used to update the domain of `x` and `y` functions based on the maximum value of the sliced array.
* Finally, `flatMap()` and `map()` are applied again to create bar objects with `rect` properties (width, height, and position). These bars have values that are converted to numbers.

**Comparison**

The benchmark is measuring the performance difference between these two approaches: RXJS vs vanilla JavaScript.

**Pros and Cons of Each Approach**

* **Vanilla Approach**
	+ Pros:
		- Easy to understand and implement.
		- No external dependencies (D3.js).
	+ Cons:
		- More verbose code due to manual scaling and mapping.
		- May have slower performance compared to RXJS due to the overhead of manual DOM updates.
* **RXJS Approach**
	+ Pros:
		- More concise and expressive code using reactive streams.
		- Automatic scaling and mapping with operators.
	+ Cons:
		- External dependencies (RXJS).
		- May have slower performance compared to vanilla JavaScript due to the overhead of reactive stream operations.

**Other Considerations**

* The benchmark uses Firefox 130 as the test browser, which may not be representative for other browsers or platforms.
* The `d3` library is used in both approaches, but its version and configuration are different between the two. This could affect the results if the versions have different performance characteristics.

**Alternatives**

If you're looking for alternative libraries or approaches:

* For charting: Consider using Chart.js or other popular charting libraries.
* For reactive streams: Look into other reactive stream libraries like RxJS Alternatives (e.g., MobX, Redux) or plain JavaScript alternatives to RXJS (e.g., async/await with promises).
* For vanilla JavaScript optimization: Explore techniques like code splitting, memoization, and caching to improve performance.

Related benchmarks:

RXJS vs Vanilla (version: 0)

Comparing performance of: RXJS vs Vanilla

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