Use production mode for React that strips out all the warnings #3

Merged
merged 1 commit into from May 24, 2016

Conversation

Projects
None yet
@vjeux
Contributor

vjeux commented May 24, 2016

This benchmark is using the dev mode of React which enables a lot of developer warnings and is not meant to be used in production because it is way slower. This pull request enables production mode and the perf is totally different.

I bumped the number of games to 500 in both React and Vue and this is what the traces look like:

React:
screen shot 2016-05-24 at 10 29 12 am

Vue:
screen shot 2016-05-24 at 10 29 16 am

@Willmo36

This comment has been minimized.

Show comment
Hide comment
@Willmo36

Willmo36 May 24, 2016

Contributor

Shit that's a big difference. I'll re-run the tests on the same computer tomorrow. Cheers for this!

Contributor

Willmo36 commented May 24, 2016

Shit that's a big difference. I'll re-run the tests on the same computer tomorrow. Cheers for this!

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux May 24, 2016

Contributor

You should also add a minification pass which also seems to improve the benchmark a bit too

new webpack.optimize.UglifyJsPlugin({}),

screen shot 2016-05-24 at 11 05 20 am

Contributor

vjeux commented May 24, 2016

You should also add a minification pass which also seems to improve the benchmark a bit too

new webpack.optimize.UglifyJsPlugin({}),

screen shot 2016-05-24 at 11 05 20 am

@jaygarcia

This comment has been minimized.

Show comment
Hide comment
@jaygarcia

jaygarcia May 24, 2016

Shiiiiiiiiiit. Such a simple change made that big of an effect. wow.

Shiiiiiiiiiit. Such a simple change made that big of an effect. wow.

@yyx990803

This comment has been minimized.

Show comment
Hide comment
@yyx990803

yyx990803 May 24, 2016

Contributor

Just want to chime in here - I was running the two versions locally and it seems the React version is doing way fewer actual updates than the Vue version, because the update delay is different:

return i === 0 ? $ : $.delay(delay * 1000);

return i === 0 ? $ : $.delay(delay * 100);

(links above are from the commit before merging the PR that fixed this)

Basically the Vue version is doing 10 times the work than the React version?... ouch

Contributor

yyx990803 commented May 24, 2016

Just want to chime in here - I was running the two versions locally and it seems the React version is doing way fewer actual updates than the Vue version, because the update delay is different:

return i === 0 ? $ : $.delay(delay * 1000);

return i === 0 ? $ : $.delay(delay * 100);

(links above are from the commit before merging the PR that fixed this)

Basically the Vue version is doing 10 times the work than the React version?... ouch

@yyx990803

This comment has been minimized.

Show comment
Hide comment
@yyx990803

yyx990803 May 24, 2016

Contributor

And this is after adjusting the delay in the Vue version to 1000ms (same as React's), item count to 500, running over 15s, in production mode for both React and Vue:

Vue

screen shot 2016-05-24 at 3 27 13 pm

React

screen shot 2016-05-24 at 3 27 51 pm

Contributor

yyx990803 commented May 24, 2016

And this is after adjusting the delay in the Vue version to 1000ms (same as React's), item count to 500, running over 15s, in production mode for both React and Vue:

Vue

screen shot 2016-05-24 at 3 27 13 pm

React

screen shot 2016-05-24 at 3 27 51 pm

@yyx990803

This comment has been minimized.

Show comment
Hide comment
@yyx990803

yyx990803 May 24, 2016

Contributor

And, if you decrease the delay to 100ms for both, the perf difference is much more obvious too:

Vue

screen shot 2016-05-24 at 3 35 48 pm

React

screen shot 2016-05-24 at 3 34 10 pm

Contributor

yyx990803 commented May 24, 2016

And, if you decrease the delay to 100ms for both, the perf difference is much more obvious too:

Vue

screen shot 2016-05-24 at 3 35 48 pm

React

screen shot 2016-05-24 at 3 34 10 pm

@gschambers gschambers merged commit 5f99cb5 into footballradar:master May 24, 2016

@gschambers

This comment has been minimized.

Show comment
Hide comment
@gschambers

gschambers May 24, 2016

Some really great insights. Thank you @vjeux and @yyx990803 for catching these two major bugs with the tests. We'll rerun and update our findings.

Some really great insights. Thank you @vjeux and @yyx990803 for catching these two major bugs with the tests. We'll rerun and update our findings.

@pluma

This comment has been minimized.

Show comment
Hide comment
@pluma

pluma May 24, 2016

I'm not sure whether this is relevant for the benchmark but the current "best practice" in React seems to be to also use these two babel transforms when running in production for additional performance optimization:

(see also https://github.com/thejameskyle/babel-react-optimize)

EDIT: also allegedly pure functional components are faster than class components, I think? Not sure what relative impact this has.

pluma commented May 24, 2016

I'm not sure whether this is relevant for the benchmark but the current "best practice" in React seems to be to also use these two babel transforms when running in production for additional performance optimization:

(see also https://github.com/thejameskyle/babel-react-optimize)

EDIT: also allegedly pure functional components are faster than class components, I think? Not sure what relative impact this has.

pluma added a commit to pluma/VueReactPerf that referenced this pull request May 24, 2016

@pluma pluma referenced this pull request May 24, 2016

Closed

Add babel react transforms #11

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon May 25, 2016

EDIT: also allegedly pure functional components are faster than class components, I think? Not sure what relative impact this has.

No, this is incorrect, they’re not. (And they’re slower than class components with shouldComponentUpdate.)

gaearon commented May 25, 2016

EDIT: also allegedly pure functional components are faster than class components, I think? Not sure what relative impact this has.

No, this is incorrect, they’re not. (And they’re slower than class components with shouldComponentUpdate.)

@pocketjoso

This comment has been minimized.

Show comment
Hide comment
@pocketjoso

pocketjoso May 25, 2016

No, this is incorrect, they’re not.

Not yet? :)

No, this is incorrect, they’re not.

Not yet? :)

@export-mike

This comment has been minimized.

Show comment
Hide comment
@export-mike

export-mike May 25, 2016

@pocketjoso use functional components sure, but decorate them with HOC that give you a shouldComponentUpdate shallow diff and get best of both worlds.

import pure from 'recompose/pure';
const MyFunctionalComponent => props => <h1>props.message</h1>;
export default pure(MyFunctionalComponent);

export-mike commented May 25, 2016

@pocketjoso use functional components sure, but decorate them with HOC that give you a shouldComponentUpdate shallow diff and get best of both worlds.

import pure from 'recompose/pure';
const MyFunctionalComponent => props => <h1>props.message</h1>;
export default pure(MyFunctionalComponent);
@pluma

This comment has been minimized.

Show comment
Hide comment
@pluma

pluma May 25, 2016

@gaearon Thanks for clarifying. I only remembered this quote from Ben Alpert:

In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

Is that still on the roadmap?

pluma commented May 25, 2016

@gaearon Thanks for clarifying. I only remembered this quote from Ben Alpert:

In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.

Is that still on the roadmap?

@pocketjoso

This comment has been minimized.

Show comment
Hide comment
@pocketjoso

pocketjoso May 25, 2016

@export-mike I use connect from react-redux which essentially for this purpose does the same thing.
(But I had not seen recompose before - looks very useful so thanks for sharing!)

pocketjoso commented May 25, 2016

@export-mike I use connect from react-redux which essentially for this purpose does the same thing.
(But I had not seen recompose before - looks very useful so thanks for sharing!)

@export-mike

This comment has been minimized.

Show comment
Hide comment
@export-mike

export-mike May 25, 2016

@pocketjoso connect just provides a shouldComponentUpdate function to your container component so that'll be ok, to get better performance add this to all components so thats containers and presentational components.

@pocketjoso connect just provides a shouldComponentUpdate function to your container component so that'll be ok, to get better performance add this to all components so thats containers and presentational components.

@export-mike

This comment has been minimized.

Show comment
Hide comment
@export-mike

export-mike May 25, 2016

a bit of background @pocketjoso I discovered it from this message @gaearon added to the unmaintained PureComponent https://github.com/gaearon/react-pure-render

a bit of background @pocketjoso I discovered it from this message @gaearon added to the unmaintained PureComponent https://github.com/gaearon/react-pure-render

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon May 25, 2016

Is that still on the roadmap?

Eventually, yea. I would say no earlier than facebook/react#6170 becomes a real thing.

gaearon commented May 25, 2016

Is that still on the roadmap?

Eventually, yea. I would say no earlier than facebook/react#6170 becomes a real thing.

@gschambers

This comment has been minimized.

Show comment
Hide comment
@gorioli

This comment has been minimized.

Show comment
Hide comment
@gorioli

gorioli Jun 27, 2016

Question:

After all of the comparison is done, would you consider to switch to Vue from React, or at least implement the new projects with Vue?

I am asking, because Vue does seem to be better for the particular case where a tabular data is changing frequently. This case suggests to use Rx with React, since we want to handle the data reactively.

For other cases, where we do not have observable data, the performance difference would not apparently be so noticeable. Developers, as all humans, have preferences which means if one likes React's semantic more than Vue's, would it be reasonable for him to stick to React despite the fact that Vue outperforms React in particular cases.

Also, React community is bigger so we have more React based libraries for common tasks and nice integration with webpack and redux for example (not sure if they are easily integrated with Vue as well).
In short, I am curious what are your personal choices regarding wether you will be using Vue in your future/current projects or not.

Would be nice to see how simulacra performs in the same context.

Thank you for the great post btw!

gorioli commented Jun 27, 2016

Question:

After all of the comparison is done, would you consider to switch to Vue from React, or at least implement the new projects with Vue?

I am asking, because Vue does seem to be better for the particular case where a tabular data is changing frequently. This case suggests to use Rx with React, since we want to handle the data reactively.

For other cases, where we do not have observable data, the performance difference would not apparently be so noticeable. Developers, as all humans, have preferences which means if one likes React's semantic more than Vue's, would it be reasonable for him to stick to React despite the fact that Vue outperforms React in particular cases.

Also, React community is bigger so we have more React based libraries for common tasks and nice integration with webpack and redux for example (not sure if they are easily integrated with Vue as well).
In short, I am curious what are your personal choices regarding wether you will be using Vue in your future/current projects or not.

Would be nice to see how simulacra performs in the same context.

Thank you for the great post btw!

@gerard-pmh

This comment has been minimized.

Show comment
Hide comment
@gerard-pmh

gerard-pmh Jul 28, 2016

vue-cli gives you a great integration of vue with webpack or browserify.

vue-cli gives you a great integration of vue with webpack or browserify.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment