11 ms·

5 minute real-world performance test: I just upgraded a relatively large (200K+ LOC) app that performs server side rendering of charts from React 15.6 to 16.0.

5 minute real-world performance test: I just upgraded a relatively large (200K+ LOC) app that performs server side rendering of charts from React 15.6 to 16.0. Render time dropped from ~50ms to ~15ms. The previous version was already optimized and precompiled (e.g. none of the process.env performance penalties were applicable). Very impressive improvement for a drop-in upgrade! Especially considering the previous version was not considered slow at all given the complexity.

Ralfp 9y ago
Could you compare your JS's bundle sizes before and after? I've heard that its little smaller, I've been wondering how much. Edit: I've got it in announcement: React is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped). react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped). react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped 15kb shaved in production builds. Thats quite nice!
- realityking 9y ago
  Unfortunately pulling in the now required polyfills for ES6 Map and Set can add 40kb :/ (the 40kb are with core-js, will need to look for something smaller)
  - danabramov 9y ago
    They're only required if you target IE10 or lower.
    - Bahamut 9y ago
      Some older versions of Safari as well I believe since Safari had shipped a broken implementation prior to becoming ES2015 compliant.
      - danabramov 9y ago
        If you have specific data about what was broken please share in an issue report so we can amend the docs if necessary. Thanks!
        Bahamut 9y ago
        Here is one issue where I saw some comments on the broken Map implementation: https://github.com/google/traceur-compiler/issues/1810 https://github.com/google/traceur-compiler/issues/1810 Admittedly, this is an older browser at this point (Safari 11 formally shipped yesterday), but I remember it biting a workplace I was at 2 1/2 years ago & we had to polyfill Map and Set. I believe this was fixed in Safari 9. I would like to report it on GitHub, but unfortunately I think it would violate my employment contract until I complete the process to get approval to do open source work.
    - realityking 9y ago
      Does that mean React is only using the save subset of Map/Set methods that are supported by IE11? That'd one great news and should be documented.
  - spicyj 9y ago
    Good realization. We were already using Map/Set polyfills in our apps so didn't notice the cost as much. I imagine it should be possible to polyfill with a much smaller footprint; maybe we can find another to recommend. As Dan notes Map+Set polyfills are also not needed in newer browsers.
  - chrismorgan 9y ago
    For Topicbox (which doesn’t use React, but that’s irrelevant), I decided a good signal to check was Object.values; if it’s missing, we include core-js. Thus, older browsers (IE, Safari≤10.0, iOS≤10.2, Chrome≤53, Firefox≤46 and Edge≤13?) will pull that in, but recent versions of all browsers won’t need the weight (the check is very light, and the overhead roughly `Object.values||require('core-js')`), and you have a solid and dependable ES6+ base to build on.
    - realityking 9y ago
      I assume you're then dynamically loading core-js when it's required? Dynamic module loading is something we've avoided so far, maybe we need to start looking into that.
      - chrismorgan 9y ago
        This article may interest you: https://philipwalton.com/articles/loading-polyfills-only-when-needed/ https://philipwalton.com/articles/loading-polyfills-only-whe... Also on being able to use new syntax: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ https://philipwalton.com/articles/deploying-es2015-code-in-p...
ellyagg 9y ago
You have a 200 KLOC React app? That's amazing to me. Just you? Is it public facing?
- jbreckmckye 9y ago
  If it's a Redux app, there'll be a lot of boilerplate in that. Not 200 KLOC's worth, but a fair bit. I recently inherited a moderately sized Redux app with over 1300 source files! It's not a trivial app but it's not a word processor or videogame, either...
  - acemarke 9y ago
    As a Redux maintainer, I'll toss out my obligatory reminder you can use as much or as little abstraction on top of Redux as you want. Don't like writing action constants by hand? Use `redux-actions` to generate action creators that have an overriden `toString()`. Don't like touching multiple files? Use the "ducks" pattern. Want something that adds additional layers on top so you don't have to write a lot of reducers and action creators by hand? Use Kea or redux-tiles or redux-scc. I'll also post a link to the slides and livestream video for my React Boston talk this last weekend, where I talked about the Redux ecosystem and gave an overview of useful Redux libs that can help with various use cases: http://blog.isquaredsoftware.com/2017/09/presentation-might-need-redux-ecosystem/ http://blog.isquaredsoftware.com/2017/09/presentation-might-... .
    - edoloughlin 9y ago
      It's been 10 months since I last used React and I'm already way out of touch. Does anyone else feel exhausted just reading that list?
      - chrshawkes 9y ago
        yes
      - root_axis 9y ago
        I dislike this attitude. That list is not exhausting, it's a list of specific tools that solve specific problems, if you don't have the problem don't concern yourself with the tool.
polskibus 9y ago
Can you tell what app is it? I'm looking for an app that can do server side chart rendering if necessary.
- cies 9y ago
  I'd go with SVG charts (SVG is well supported - http://caniuse.com/#feat=svg http://caniuse.com/#feat=svg) http://mediatemple.net/blog/tips/svg-charting-libraries http://mediatemple.net/blog/tips/svg-charting-libraries
- deleted 9y ago
  [deleted]

Ralfp 9y ago

Could you compare your JS's bundle sizes before and after? I've heard that its little smaller, I've been wondering how much. Edit: I've got it in announcement: React is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped). react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped). react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped 15kb shaved in production builds. Thats quite nice!

realityking 9y ago
Unfortunately pulling in the now required polyfills for ES6 Map and Set can add 40kb :/ (the 40kb are with core-js, will need to look for something smaller)
- danabramov 9y ago
  They're only required if you target IE10 or lower.
  - Bahamut 9y ago
    Some older versions of Safari as well I believe since Safari had shipped a broken implementation prior to becoming ES2015 compliant.
    - danabramov 9y ago
      If you have specific data about what was broken please share in an issue report so we can amend the docs if necessary. Thanks!
      - Bahamut 9y ago
        Here is one issue where I saw some comments on the broken Map implementation: https://github.com/google/traceur-compiler/issues/1810 https://github.com/google/traceur-compiler/issues/1810 Admittedly, this is an older browser at this point (Safari 11 formally shipped yesterday), but I remember it biting a workplace I was at 2 1/2 years ago & we had to polyfill Map and Set. I believe this was fixed in Safari 9. I would like to report it on GitHub, but unfortunately I think it would violate my employment contract until I complete the process to get approval to do open source work.
  - realityking 9y ago
    Does that mean React is only using the save subset of Map/Set methods that are supported by IE11? That'd one great news and should be documented.
- spicyj 9y ago
  Good realization. We were already using Map/Set polyfills in our apps so didn't notice the cost as much. I imagine it should be possible to polyfill with a much smaller footprint; maybe we can find another to recommend. As Dan notes Map+Set polyfills are also not needed in newer browsers.
- chrismorgan 9y ago
  For Topicbox (which doesn’t use React, but that’s irrelevant), I decided a good signal to check was Object.values; if it’s missing, we include core-js. Thus, older browsers (IE, Safari≤10.0, iOS≤10.2, Chrome≤53, Firefox≤46 and Edge≤13?) will pull that in, but recent versions of all browsers won’t need the weight (the check is very light, and the overhead roughly `Object.values||require('core-js')`), and you have a solid and dependable ES6+ base to build on.
  - realityking 9y ago
    I assume you're then dynamically loading core-js when it's required? Dynamic module loading is something we've avoided so far, maybe we need to start looking into that.
    - chrismorgan 9y ago
      This article may interest you: https://philipwalton.com/articles/loading-polyfills-only-when-needed/ https://philipwalton.com/articles/loading-polyfills-only-whe... Also on being able to use new syntax: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ https://philipwalton.com/articles/deploying-es2015-code-in-p...

ellyagg 9y ago

You have a 200 KLOC React app? That's amazing to me. Just you? Is it public facing?

jbreckmckye 9y ago
If it's a Redux app, there'll be a lot of boilerplate in that. Not 200 KLOC's worth, but a fair bit. I recently inherited a moderately sized Redux app with over 1300 source files! It's not a trivial app but it's not a word processor or videogame, either...
- acemarke 9y ago
  As a Redux maintainer, I'll toss out my obligatory reminder you can use as much or as little abstraction on top of Redux as you want. Don't like writing action constants by hand? Use `redux-actions` to generate action creators that have an overriden `toString()`. Don't like touching multiple files? Use the "ducks" pattern. Want something that adds additional layers on top so you don't have to write a lot of reducers and action creators by hand? Use Kea or redux-tiles or redux-scc. I'll also post a link to the slides and livestream video for my React Boston talk this last weekend, where I talked about the Redux ecosystem and gave an overview of useful Redux libs that can help with various use cases: http://blog.isquaredsoftware.com/2017/09/presentation-might-need-redux-ecosystem/ http://blog.isquaredsoftware.com/2017/09/presentation-might-... .
  - edoloughlin 9y ago
    It's been 10 months since I last used React and I'm already way out of touch. Does anyone else feel exhausted just reading that list?
    - chrshawkes 9y ago
      yes
    - root_axis 9y ago
      I dislike this attitude. That list is not exhausting, it's a list of specific tools that solve specific problems, if you don't have the problem don't concern yourself with the tool.

polskibus 9y ago

Can you tell what app is it? I'm looking for an app that can do server side chart rendering if necessary.

cies 9y ago
I'd go with SVG charts (SVG is well supported - http://caniuse.com/#feat=svg http://caniuse.com/#feat=svg) http://mediatemple.net/blog/tips/svg-charting-libraries http://mediatemple.net/blog/tips/svg-charting-libraries
deleted 9y ago
[deleted]