Benchmark: RXJS single vs multi-pipe

HTML Preparation code:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://unpkg.com/rxjs@%5E7/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}}];

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) => { console.log(values.length); }), flatMap(values => values), map(bar => ({ value: bar.value, label: bar.label })), toArray() ); let data; data$.subscribe(d => data = d);
RxJS Separate pipes
let { from, Observable } = rxjs; let { flatMap, map, tap, toArray } = rxjs.operators; var data$ = from(rawdata) .pipe(toArray()) .pipe(map(values => values.sort((a, b) => b.value - a.value))) .pipe(map(values => values.reverse())) .pipe(map(values => values.slice(0, 5))) .pipe(tap(values => { console.log(values.length); })) .pipe(flatMap(values => values)) .pipe(map(bar => ({ value: bar.value, label: bar.label }))) .pipe(toArray()); let data; data$.subscribe(d => data = d);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
RXJS
RxJS Separate pipes

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

RXJS

126K/s

RxJS Separate pipes

118K/s

View exact numbers

Test name	Executions per second
✓ RXJS	125,987 Ops/sec
RxJS Separate pipes	117,906 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares two different approaches to processing data using RxJS, a library for reactive programming in JavaScript.

**Option 1:  `RXJS`**

- This approach chains multiple RxJS operators within a single `pipe()` function. Operators like `toArray()`, `map()`, `sort()`, `reverse()`, `slice()`, `tap()`, `flatMap()`, and `toArray()` are used to transform the input data (an array of objects) into a final result.
   - **Pros:**  More concise, potentially easier to read for those familiar with RxJS pipeline style. 
   - **Cons:**  Can become harder to debug if there are many chained operators.

**Option 2: `RxJS Separate pipes`**

- This approach also uses RxJS operators but chains them into separate `.pipe()` calls, each focusing on a specific transformation stage. 
   - **Pros:**  More modular and easier to reason about individual transformations. Debugging can be more straightforward.
   - **Cons:**  Can result in slightly more verbose code compared to the single `pipe()` approach.

**Other Considerations:**

* **Performance:** The benchmark aims to measure which approach is faster. The results will indicate which method executes the transformations more efficiently.

* **Readability & Maintainability:** Developers may prefer one approach over the other based on personal preference and project complexity.

Let me know if you have any other questions about this benchmark or want to explore specific aspects of RxJS in more detail.

RXJS single vs multi-pipe (version: 0) Benchmark.js

Comparing performance of: `RXJS vs RxJS Separate pipes`

Created: 2 years ago by: Guest

Go to the latest result

RXJS

RxJS Separate pipes

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

RXJS single vs multi-pipe (version: 0) Benchmark.js

Comparing performance of: RXJS vs RxJS Separate pipes

Created: 2 years ago by: Guest

Go to the latest result

RXJS

RxJS Separate pipes

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

Related benchmarks

Comparing performance of: `RXJS vs RxJS Separate pipes`