Benchmark: RXJS (8.0.0-alpha.7) vs Vanilla

HTML Preparation code:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://unpkg.com/rxjs@8.0.0-alpha.7/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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
RXJS	157566.1 Ops/sec
Vanilla	238650.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 test cases.

**Benchmark Overview**

The benchmark compares the performance of two approaches: RXJS (a library for reactive programming) and Vanilla JavaScript (plain JavaScript without any libraries).

**Test Cases**

There are two individual test cases:

1. **RXJS**: This test case uses the RXJS library to create a reactive pipeline that processes an array of data.
2. **Vanilla**: This test case performs the same processing using plain JavaScript without any libraries.

**Comparison Options**

The benchmark tests the following options:

* RXJS: Using the RXJS library for reactive programming
* Vanilla: Performing the same task without using the RXJS library

**Pros and Cons of Each Approach**

**RXJS:**

Pros:

* Provides a declarative, event-driven programming model that can simplify complex tasks.
* Can handle asynchronous operations and side effects in a more manageable way.

Cons:

* Introduces an additional library dependency, which may incur overhead due to initialization and loading times.
* Can be less intuitive for developers who are not familiar with reactive programming concepts.

**Vanilla:**

Pros:

* No external dependencies or overhead associated with loading the RXJS library.
* Can be more straightforward to understand and implement for simple tasks.

Cons:

* May require more manual handling of asynchronous operations and side effects, which can lead to more complex code.

**Other Considerations**

The benchmark also considers other factors that may impact performance, such as:

* **Data size**: The test data is processed in slices of 5 elements. Increasing the slice size could affect performance.
* **Browser version**: The benchmark uses a specific browser version (Chrome 111). Different browsers and versions may exhibit varying performance characteristics.

**Library Used in RXJS**

In the RXJS test case, the `rxjs` library is used for reactive programming. Specifically:

* `from`: Creates an observable from an iterable.
* `Observable`: A base class for observables.
* `flatMap`, `map`, `tap`, and `toArray`: Operators that perform transformations on the data.

**Special JS Feature**

There is no explicit mention of a special JavaScript feature or syntax used in this benchmark. However, reactive programming concepts like observables and pipes are specific to certain libraries (in this case, RXJS).

Now, regarding alternatives, here are some other approaches you could consider:

* **Other reactive libraries**: Such as Lit, MobX, or React, which offer similar functionality to RXJS.
* **Pure functions**: Using function composition to create a pipeline of transformations without introducing side effects.
* **Async/await**: Using async functions and await keywords to simplify asynchronous code.

Keep in mind that each approach has its trade-offs, and the choice ultimately depends on the specific requirements of your project.

Related benchmarks:

RXJS (8.0.0-alpha.7) 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):