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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark definition represents two different approaches to achieve a specific result:

1. **RXJS (Reactive Extensions for JavaScript)**: This approach uses the RXJS library to perform data processing and visualization.
2. **Vanilla**: This approach does not use any external libraries, relying solely on vanilla JavaScript.

**What is being tested?**

In both cases, the goal is to create a chart that displays a set of rectangles (rects) with their corresponding values and labels. The input data `rawdata` contains an array of objects with `value`, `label`, and other properties.

The test aims to compare the performance of these two approaches in achieving this specific result:

* RXJS: Uses the RXJS library to create an observable sequence, process the data using various operators (e.g., flatMap, map, tap), and then visualize it as a chart.
* Vanilla: Manually processes the data using array methods (e.g., sort, slice) and creates the chart without relying on any external libraries.

**Options compared**

The two approaches differ in the way they:

1. **Process the input data**: RXJS uses its operators to transform and process the data, while Vanilla relies solely on manual array manipulation.
2. **Create the chart**: RXJS uses a library (D3.js) to create and render the chart, whereas Vanilla creates the chart manually using SVG elements.

**Pros and Cons of each approach**

RXJS:

Pros:

* Leverages the power of RxJS operators for data processing and visualization.
* Can take advantage of concurrency and parallelism through the observable sequence.
* Simplifies the code by abstracting away many low-level details.

Cons:

* Requires the use of an external library (RxJS) which may introduce additional overhead.
* May require more setup and configuration compared to Vanilla.

Vanilla:

Pros:

* Does not rely on any external libraries, making it a more lightweight option.
* Can be more straightforward to implement for those familiar with vanilla JavaScript.

Cons:

* Manual processing of data can lead to code that's harder to maintain and optimize.
* May require more manual effort to handle edge cases and errors.

**Special JS feature or syntax**

The benchmark makes use of the following special JavaScript features:

* Arrow functions (e.g., `x => x.domain([0, d3.max(values, d => d.value)])`)
* Template literals (e.g., `y.bandwidth() / 2`)
* Object destructuring (e.g., `let { from, Observable } = rxjs;`)

These features are widely supported in modern browsers and JavaScript environments.

**Benchmark result**

The benchmark results show the number of executions per second for each approach:

* Vanilla: ~256,632 executions/sec
* RXJS: ~154,414 executions/sec

This suggests that the vanilla implementation is faster than the RXJS implementation. However, it's essential to note that this may be due to various factors, such as differences in library overhead or specific use cases.

In conclusion, the benchmark compares two approaches for creating a chart with rectangles and their corresponding values and labels. The vanilla approach is more lightweight, but manual processing can lead to code complexity. The RXJS approach simplifies data processing and visualization using its operators, but relies on an external library.

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

No previous run results

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