Benchmark: RXJS vs Vanilla v7.5.6

HTML Preparation code:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
RXJS	267140.4 Ops/sec
Vanilla	514239.5 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 its options.

**Benchmark Overview**

The benchmark compares the performance of two approaches: RXJS (Reactive Extensions for JavaScript) and Vanilla JavaScript v7.5.6, both using D3.js for data visualization. The benchmark creates a dataset from sample data, sorts it, slices it, maps it to a specific format, and then visualizes it using a chart.

**Options Compared**

The two options being compared are:

1. **RXJS**: Uses the Reactive Extensions library to handle asynchronous operations, sort, slice, map, and visualize the data.
2. **Vanilla JavaScript**: Does not use any external libraries; instead, relies on built-in JavaScript functions for sorting, slicing, mapping, and visualizing the data.

**Pros and Cons of Each Approach**

**RXJS:**

Pros:

* Handles asynchronous operations more efficiently with RXJS's reactive programming model.
* Reduces manual memory management and error handling.

Cons:

* Introduces additional overhead due to library dependencies.
* May have a steeper learning curve for developers unfamiliar with RXJS.

**Vanilla JavaScript:**

Pros:

* No external library dependencies, reducing overhead and potential issues.
* Familiarity with built-in JavaScript functions may be more intuitive for some developers.

Cons:

* Requires manual handling of asynchronous operations, which can lead to errors or inefficient code.
* May result in more verbose code.

**D3.js Library**

The D3.js library is used for data visualization. It provides a powerful and flexible way to create interactive visualizations. However, it also introduces additional dependencies and potential performance overhead.

**Other Considerations**

When choosing between RXJS and Vanilla JavaScript, consider the trade-offs between performance, code complexity, and maintainability.

* If you prioritize simplicity and are comfortable with manual asynchronous handling, Vanilla JavaScript might be a better choice.
* If you prefer a more expressive and efficient way to handle asynchronous operations, and are willing to invest time in learning RXJS, it might be a better fit.

**Alternative Approaches**

Other alternatives could include:

1. **Redux**: A state management library that can help with data management and flow, but may not provide the same level of reactive programming capabilities as RXJS.
2. **PouchDB**: A NoSQL database library that provides a robust way to store and manage data, which might be an alternative to D3.js for data storage and visualization.
3. **Other charting libraries**: Libraries like Chart.js or Highcharts provide alternative data visualization options with varying degrees of complexity and performance characteristics.

Keep in mind that the choice ultimately depends on your specific use case, project requirements, and team expertise.

Related benchmarks:

RXJS vs Vanilla v7.5.6 (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):