perf

[cztomsik]

Hey, first of all, let me thank you for this! I am currently using yoga and I'd like to replace it in the future so the stretch might be a great alternative.

Do you have any benchmarks already? I've stitched really qnd integration of stretch into my project and it seems to be a bit slower than yoga (15-25%) so I'm wondering if this is expected or if I'm doing something very wrong.

[msiglreith]

Hi, I don't have any numbers by hand, maybe the crate author has done some comparisons already. Do you have an easy to run benchmark/sample by chance as I would be interested looking into this a bit? I assume that would be the implementation, wouldn't it?

[cztomsik]

yes, that is correct however you're probably going to have some trouble making it work, I'm doing some refactor and it's still not done and docs are way off

there are some things to finish but it should be working you just need to switch layout from yoga to stretch in app.rs

and then you can run npm run example and it will open test app where is the bench.

[msiglreith]

Thanks for the description, unfortunately I had no luck getting it work so far (somewhere stuck regarding TextEncoder couldn't be found).

Maybe I find time to do some comparisons with a separate benchmark.

[cztomsik]

Hard to tell without complete output, but I was compiling it on raspi few hours ago and I went really close, unfortunately it's crashing in runtime (because it doesn't have opengl 3.0 as I've found out)

It's probably just some missing lib (unless you're on windows where I'm still clueless how to get it working)

[msiglreith]

I tried with windows first but then switch over to ubuntu.

Executing npm run example:

home@home:~/Desktop/stain$ npm run example

> [email protected] example /home/home/Desktop/stain
> ts-node -r ./examples/_hmr examples/react/main


/home/home/Desktop/stain/node_modules/ts-binary/dist-node/index.js:65
const encoder = new TextEncoder();
                ^
ReferenceError: TextEncoder is not defined
    at Object.<anonymous> (/home/home/Desktop/stain/node_modules/ts-binary/dist-node/index.js:65:17)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object._extensions.(anonymous function) [as .js] (/home/home/Desktop/stain/node_modules/hot-module-replacement/index.js:15:33)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module._load (/home/home/Desktop/stain/node_modules/hot-module-replacement/index.js:117:14)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] example: `ts-node -r ./examples/_hmr examples/react/main`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] example script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/home/.npm/_logs/2019-07-23T16_07_02_829Z-debug.log

log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/local/bin/npm', 'run', 'example' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preexample', 'example', 'postexample' ]
5 info lifecycle [email protected]~preexample: [email protected]
6 info lifecycle [email protected]~example: [email protected]
7 verbose lifecycle [email protected]~example: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~example: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/home/Desktop/stain/node_modules/.bin:/home/home/.cargo/bin:/home/home/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin
9 verbose lifecycle [email protected]~example: CWD: /home/home/Desktop/stain
10 silly lifecycle [email protected]~example: Args: [ '-c', 'ts-node -r ./examples/_hmr examples/react/main' ]
11 silly lifecycle [email protected]~example: Returned: code: 1  signal: null
12 info lifecycle [email protected]~example: Failed to exec example script
13 verbose stack Error: [email protected] example: `ts-node -r ./examples/_hmr examples/react/main`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:317:16)
13 verbose stack     at EventEmitter.emit (events.js:189:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:189:13)
13 verbose stack     at maybeClose (internal/child_process.js:970:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/home/Desktop/stain
16 verbose Linux 5.0.0-20-generic
17 verbose argv "/usr/bin/node" "/usr/local/bin/npm" "run" "example"
18 verbose node v10.15.2
19 verbose npm  v6.10.2-next.1
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] example: `ts-node -r ./examples/_hmr examples/react/main`
22 error Exit status 1
23 error Failed at the [email protected] example script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[cztomsik]

Hm, what node version do you have? It's just a guess (I'm using node 11)

[msiglreith]

18 verbose node v10.15.2
19 verbose npm  v6.10.2-next.1

thanks, will retry in the evening to update and rerun the command

[cztomsik]

I've re-benchmarked it and when built in release mode, it seems to be actually faster than yoga.

I'm in the middle of replacing rendering part (which should simplify building a lot) so after that I'll report back here and maybe do some PR with changes which could help to get even faster (I'm cloning a lot of styles and it would be much better if I could just mutate them)

[cztomsik]

for some reason, stretch is doing multiple measure() calls during layout, first with max_width and 2 others unconstrained... do you by a chance know why? master should be now with yoga again, but you can switch to stretch by replacing YogaLayout for StretchLayout in window.rs

if you have medium amount of text, it will make yoga a bit faster because of this

BTW: you might need node11 (nvm is great thing to help you with that)

EDIT: if you checkout feature/deps, you can test stretch with npm run build -- --features stretch && npm run example