Skip to content
This repository was archived by the owner on Oct 16, 2024. It is now read-only.

Commit bca1ed7

Browse files
bennobuilderbennobuilder
committed
added pulsejs benchmark
1 parent 92d5152 commit bca1ed7

File tree

17 files changed

+248
-64
lines changed

17 files changed

+248
-64
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ It's only one click away. Just select your preferred Framework below.
6666
- [Vue](https://codesandbox.io/s/agilets-first-state-i5xxs)
6767
- Angular (coming soon)
6868

69-
More examples can be found in the [Example Section](https://agile-ts.org/docs/examples).
69+
More examples can be found in the [Example section](https://agile-ts.org/docs/examples).
7070

7171

7272
<br />
@@ -119,15 +119,15 @@ The advantage of keeping logic separate to UI-Components,
119119
is that your code is more decoupled, portable, scalable,
120120
and above all, easily testable.
121121

122-
Learn more about ways to centralize your application logic with AgileTs
122+
You can learn more about ways to centralize your application logic with AgileTs
123123
in our [Style Guides](https://agile-ts.org/docs/style-guide).
124124

125125
### 🎯 Easy to Use
126126

127127
Learn the powerful tools of AgileTs in a short period of time.
128128
An excellent place to start are our [Quick Start Guides](https://agile-ts.org/docs/Installation),
129129
or if you don't like to follow tutorials,
130-
you can jump straight into the [Example Section](https://agile-ts.org/docs/examples/Introduction).
130+
you can jump straight into the [Example section](https://agile-ts.org/docs/examples/Introduction).
131131

132132

133133
<br />

‎benchmark/benchmarks/react/1000fields/bench/agilets/collection.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react';
22
import ReactDom from 'react-dom';
3-
import { Agile, Logger } from '@agile-ts/core';
3+
import { createCollection } from '@agile-ts/core';
44
import { useAgile, useValue } from '@agile-ts/react';
55

66
export default function (target: HTMLElement, fieldsCount: number) {
7-
const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
8-
9-
const FIELDS = AgileApp.createCollection({
7+
const FIELDS = createCollection({
108
initialData: Array.from(Array(fieldsCount).keys()).map((i) => ({
119
id: i,
1210
name: `Field #${i + 1}`,

‎benchmark/benchmarks/react/1000fields/bench/agilets/nestedState.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import * as React from 'react';
22
import * as ReactDom from 'react-dom';
3-
import { Agile, Logger, State } from '@agile-ts/core';
3+
import { createState, State } from '@agile-ts/core';
44
import { useAgile } from '@agile-ts/react';
55

66
export default function (target: HTMLElement, fieldsCount: number) {
7-
const AgileApp = new Agile({
8-
logConfig: { level: Logger.level.ERROR },
9-
});
10-
11-
const FIELDS = AgileApp.createState(
7+
const FIELDS = createState(
128
Array.from(Array(fieldsCount).keys()).map((i) =>
13-
AgileApp.createState(`Field #${i + 1}`)
9+
createState(`Field #${i + 1}`)
1410
)
1511
);
1612

‎benchmark/benchmarks/react/1000fields/bench/agilets/state.tsx‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,18 @@
11
import React from 'react';
22
import ReactDom from 'react-dom';
3-
import { Agile, Logger } from '@agile-ts/core';
4-
import { useProxy, useSelector } from '@agile-ts/react';
3+
import { createState } from '@agile-ts/core';
4+
import { useAgile } from '@agile-ts/react';
55

66
export default function (target: HTMLElement, fieldsCount: number) {
7-
const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
8-
9-
const FIELDS = AgileApp.createState(
7+
const FIELDS = createState(
108
Array.from(Array(fieldsCount).keys()).map((i) => `Field #${i + 1}`)
119
);
1210

1311
let updatedFieldsCount = 0;
1412
let renderFieldsCount = 0;
1513

16-
// With Selector
17-
// function Field({ index }: { index: number }) {
18-
// const name = useSelector(FIELDS, (value) => value[index]) as string;
19-
//
20-
// return (
21-
// <div>
22-
// Last {`<Field>`} render at: {new Date().toISOString()}
23-
// &nbsp;
24-
// <input value={name} onChange={(e) => {
25-
// FIELDS.nextStateValue[index] = e.target.value;
26-
// FIELDS.ingest();
27-
// }} />
28-
// </div>
29-
// );
30-
// }
31-
32-
// With Proxy
3314
function Field({ index }: { index: number }) {
34-
const fields = useProxy(FIELDS);
15+
const fields = useAgile(FIELDS);
3516

3617
renderFieldsCount++;
3718

‎benchmark/benchmarks/react/1000fields/bench/pulsejs/collection.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react';
2+
import ReactDom from 'react-dom';
3+
import { collection, usePulse } from '@pulsejs/react';
4+
5+
export default function (target: HTMLElement, fieldsCount: number) {
6+
const FIELDS = collection<{ id: number; name: string }>();
7+
FIELDS.collect(
8+
Array.from(Array(fieldsCount).keys()).map((i) => ({
9+
id: i,
10+
name: `Field #${i + 1}`,
11+
}))
12+
);
13+
14+
let updatedFieldsCount = 0;
15+
let renderFieldsCount = 0;
16+
17+
function Field({ index }: { index: number | string }) {
18+
const ITEM = FIELDS.getData(index);
19+
const item = usePulse(ITEM);
20+
21+
renderFieldsCount++;
22+
23+
return (
24+
<div>
25+
Last {`<Field>`} render at: {new Date().toISOString()}
26+
&nbsp;
27+
<input
28+
value={item?.name}
29+
onChange={(e) => {
30+
ITEM?.patch({ name: e.target.value });
31+
32+
updatedFieldsCount++;
33+
34+
(document.getElementById(
35+
'updatedFieldsCount'
36+
) as any).innerText = updatedFieldsCount;
37+
(document.getElementById(
38+
'renderFieldsCount'
39+
) as any).innerText = renderFieldsCount;
40+
}}
41+
/>
42+
</div>
43+
);
44+
}
45+
46+
function App() {
47+
return (
48+
<div>
49+
<div>
50+
Last {`<App>`} render at: {new Date().toISOString()}
51+
</div>
52+
<br />
53+
{Object.keys(FIELDS.data).map((key, i) => (
54+
<Field key={i} index={key} />
55+
))}
56+
<div id={'updatedFieldsCount'} />
57+
<div id={'renderFieldsCount'} />
58+
</div>
59+
);
60+
}
61+
62+
ReactDom.render(<App key={'agilets-collection'} />, target);
63+
}

‎benchmark/benchmarks/react/1000fields/bench/pulsejs/nestedState.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import ReactDom from 'react-dom';
3+
import { state, State } from '@pulsejs/core';
4+
import { usePulse } from '@pulsejs/react';
5+
6+
export default function (target: HTMLElement, fieldsCount: number) {
7+
const FIELDS = state(
8+
Array.from(Array(fieldsCount).keys()).map((i) => state(`Field #${i + 1}`))
9+
);
10+
11+
let updatedFieldsCount = 0;
12+
let renderFieldsCount = 0;
13+
14+
function Field({ field }: { field: State<string> }) {
15+
const name = usePulse(field);
16+
17+
renderFieldsCount++;
18+
19+
return (
20+
<div>
21+
Last {`<Field>`} render at: {new Date().toISOString()}
22+
&nbsp;
23+
<input
24+
value={name}
25+
onChange={(e) => {
26+
field.set(e.target.value);
27+
28+
updatedFieldsCount++;
29+
30+
(document.getElementById(
31+
'updatedFieldsCount'
32+
) as any).innerText = updatedFieldsCount;
33+
(document.getElementById(
34+
'renderFieldsCount'
35+
) as any).innerText = renderFieldsCount;
36+
}}
37+
/>
38+
</div>
39+
);
40+
}
41+
42+
function App() {
43+
const fields = usePulse(FIELDS);
44+
return (
45+
<div>
46+
<div>
47+
Last {`<App>`} render at: {new Date().toISOString()}
48+
</div>
49+
<br />
50+
{fields.map((field, index) => (
51+
<Field key={index} field={field} />
52+
))}
53+
<div id={'updatedFieldsCount'} />
54+
<div id={'renderFieldsCount'} />
55+
</div>
56+
);
57+
}
58+
59+
ReactDom.render(<App key={'agilets-nested-state'} />, target);
60+
}

‎benchmark/benchmarks/react/1000fields/bench/pulsejs/state.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import ReactDom from 'react-dom';
3+
import { state } from '@pulsejs/core';
4+
import { usePulse } from '@pulsejs/react';
5+
6+
export default function (target: HTMLElement, fieldsCount: number) {
7+
const FIELDS = state(
8+
Array.from(Array(fieldsCount).keys()).map((i) => `Field #${i + 1}`)
9+
);
10+
11+
let updatedFieldsCount = 0;
12+
let renderFieldsCount = 0;
13+
14+
function Field({ index }: { index: number }) {
15+
const fields = usePulse(FIELDS);
16+
17+
renderFieldsCount++;
18+
19+
return (
20+
<div>
21+
Last {`<Field>`} render at: {new Date().toISOString()}
22+
&nbsp;
23+
<input
24+
value={fields[index]}
25+
onChange={(e) => {
26+
FIELDS.nextState[index] = e.target.value;
27+
FIELDS.set();
28+
29+
updatedFieldsCount++;
30+
31+
(document.getElementById(
32+
'updatedFieldsCount'
33+
) as any).innerText = updatedFieldsCount;
34+
(document.getElementById(
35+
'renderFieldsCount'
36+
) as any).innerText = renderFieldsCount;
37+
}}
38+
/>
39+
</div>
40+
);
41+
}
42+
43+
function App() {
44+
return (
45+
<div>
46+
<div>
47+
Last {`<App>`} render at: {new Date().toISOString()}
48+
</div>
49+
<br />
50+
{FIELDS.value.map((field, index) => (
51+
<Field key={index} index={index} />
52+
))}
53+
<div id={'updatedFieldsCount'} />
54+
<div id={'renderFieldsCount'} />
55+
</div>
56+
);
57+
}
58+
59+
ReactDom.render(<App key={'agilets-state'} />, target);
60+
}

‎benchmark/benchmarks/react/1000fields/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import ReactDOM from 'react-dom';
55
import agileCollection from './bench/agilets/collection';
66
import agileState from './bench/agilets/state';
77
import agileNestedState from './bench/agilets/nestedState';
8+
import pulseCollection from './bench/pulsejs/collection';
9+
import pulseState from './bench/pulsejs/state';
10+
import pulseNestedState from './bench/pulsejs/nestedState';
811
import hookstate from './bench/hookstate';
912
import jotai from './bench/jotai';
1013
import mobx from './bench/mobx';
@@ -17,7 +20,7 @@ import valtio from './bench/valtio';
1720
// Benchmark.js requires an instance of itself globally
1821
window.Benchmark = Benchmark;
1922

20-
const fieldsCount = 1;
23+
const fieldsCount = 1000;
2124

2225
// Create new Benchmark Test Suite
2326
const suite = new Suite(`${fieldsCount} Fields`);
@@ -68,6 +71,9 @@ suite
6871
.add('Agile Collection', configTest(agileCollection))
6972
.add('Agile State', configTest(agileState))
7073
.add('Agile nested State', configTest(agileNestedState))
74+
.add('Pulse Collection', configTest(pulseCollection))
75+
.add('Pulse State', configTest(pulseState))
76+
.add('Pulse nested State', configTest(pulseNestedState))
7177
.add('Hookstate', configTest(hookstate))
7278
.add('Jotai', configTest(jotai))
7379
.add('Mobx', configTest(mobx))

‎benchmark/benchmarks/react/computed/bench/agilets/autoTracking.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react';
22
import ReactDom from 'react-dom';
3-
import { Agile, Logger } from '@agile-ts/core';
3+
import { createComputed, createState } from '@agile-ts/core';
44
import { useAgile } from '@agile-ts/react';
55

6-
const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
7-
const COUNT = AgileApp.createState(0);
8-
const COMPUTED_COUNT = AgileApp.createComputed(() => {
6+
const COUNT = createState(0);
7+
const COMPUTED_COUNT = createComputed(() => {
98
return COUNT.value * 5;
109
});
1110

‎benchmark/benchmarks/react/computed/bench/agilets/hardCoded.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react';
22
import ReactDom from 'react-dom';
3-
import { Agile, Logger } from '@agile-ts/core';
3+
import { createComputed, createState } from '@agile-ts/core';
44
import { useAgile } from '@agile-ts/react';
55

6-
const AgileApp = new Agile({ logConfig: { level: Logger.level.ERROR } });
7-
const COUNT = AgileApp.createState(0);
8-
const COMPUTED_COUNT = AgileApp.createComputed(
6+
const COUNT = createState(0);
7+
const COMPUTED_COUNT = createComputed(
98
() => {
109
return COUNT.value * 5;
1110
},

0 commit comments

Comments
 (0)