6 ms·
How we made our React-Rails app 5x faster
- misterbowfinger 10y ago1. Make sure you're using the latest stable version of React core 2. Get a CDN for static assets 3. Use Webpack, again, for making development easier Saved you a click.
- dovdov 10y agoNow I have to find out what to do with my extra click, thank you real much!
- porker 10y agoUpvote the comment ;)
- amk_ 10y agoPretty much! Caching makes a big difference, especially for first-time visitors. For logged-in users, one particular big gain was getting rid of a join from users to events to show the notifications count, and replacing that with a counter cache (denormalization).
- dorianm 10y agoBy the way there is counter_culture[1] which is great for more complex counter caches: Inventory: product quantity 1 2 1 5 2 -1 2 3 2 10 And having a counter cache for the sum per product (e.g.: product.inventory_quantity). [1]: https://github.com/magnusvk/counter_culture https://github.com/magnusvk/counter_culture
- amk_ 10y agoThat looks useful, thanks
- diziet 10y agoHow do they define 5x faster? http request to browser renders the page usable?
- ciconia 10y ago> Last week we deployed an update to our React-Rails app that improved load time by 500% By "improve" they surely mean reduce. How can a measurement be reduced by 500%? If load time has decreased to one fifth, it would have been clearer to write "load time was reduced by 80%"?
- deoxxa 10y agoMaybe it takes 1s to load, but now happens 4s before you even think of opening the page?
- danmaz74 10y agoTechnically, we can say they increased load speed by 400%. But it would still sound very awkward.
- hrydgard 10y agoI guess the velocity measurement "amount of functionality loaded per second" did improve by 500%, a bit contrived though.
- amelius 10y ago"500%" is equivalent to "5x" So "improved by 500%" means "improved by a factor of 5". In the case of time, improving means reducing. So time got reduced by a factor of 5.
- mkesper 10y agoWhich is also wrong. "Improving speed by 100%" means being twice as fast. 100% + 500% = 600%. Better avoid it even if it sounds sooo much more than "double" or "five times".
- rco8786 10y agoImprove by itself doesn't imply a direction. It has to be inferred via context. Improving page load time by 500% is perfectly reasonable to say, the reader infers that improve means decrease in this case. Just as you can improve a golf score, or a marathon pace, or your BMI.
- prymitive 10y agoIs it just me or is every story titled "10 tips on making X faster" or "how we migrated from X to Y and reduced number of servers from 10k to just 2" or "how we speed up Z by 400000%" is really just a story of "how we made our project better by stopping, checking what we really need to do, researching how to do it and then investing time to actually do it right"? There is hardly ever any new ground breaking wisdom, new revolutionary algorithm or amazing new tool, it's all about knowing what you're doing, which usually takes a few tries.
- shawabawa3 10y agoHow to make your software 5x faster Step 1: Have it be 5x slower than necessary Step 2: Fix it
- jaclaz 10y ago>How to make your software 5x faster >Step 1: Have it be 5x slower than necessary >Step 2: Fix it Corollary: Step3: Pat yourself on the back Step4: Show everyone how clever you are
- diamondo25 10y agoYes, this is what it boils down to. However, without these posts people would keep developing more and more overhead, mot taking a step back and questioning oneself wether the current state of the project can be improved. Especially when you work at a startup, it is sometimes hard to find the time and reasoning to take a step back and analyze the project from a distance. Trust me, these tips are useful to get the optimizing ball rolling.
- stevebmark 10y ago"Using the Webpack-Rails gem allowed us to finally compile frontend assets when deployed instead of checking the minified files into source control for Heroku deployments." Huge red flag for a project. Checking in minified files at any point of app development is a nightmare for developers. The fact that they were doing this at all is no good. And if you're reading this and your team is doing it, that's no good either! The #1 thing you can do to speed up a SPA is server side rendering, which it doesn't look like this company is doing https://progressly.com/engineering#/engineering https://progressly.com/engineering#/engineering. The entire page is blank for almost a second on each load. Was it 5s before? I sure hope not! But the tactics mentioned in this article are insignificant to actual server rendering.
- tzaman 10y agoWhy would you couple Rails + React in the first place? We have a similar project and decided to just put everything React-related into "client" directory in Rails, then, once webpack builds production-ready files, it puts them into public/assets (during container build time). And that's it, I can run React without Rails, vice versa, test them independently,... etc.
- pmontra 10y agoYes, I would create two different projects, one Ruby only and one JavaScript only. I wonder if there is a well established pattern for server side rendering of some pages in this kind of applications. Obviously one can use Rails views for some important pages but how not to duplicate HTML in Rails and React?
- tzaman 10y agoHm, why would you need to render some pages in Rails? Why not just go React all the way and use Rails for API only. If you absolutely do need them, I would just separate them by routes.
- pmontra 10y agoIf the SPA is large, server side rendering is faster. Users get the first page in milliseconds, whatever page it is, then the SPA loads and takes over. I would do that for a few entry points to the site, for example the ones that get into the sitemap in the Google results page.
- oelmekki 10y agoAgree with this. While you may feel like you're losing something big by not using the asset pipeline, tools for managing assets in js are now totally awesome. A frontend app using create-react-app has everything to compose js files, load css and even manage sha1 suffixed asset file names.
- juandazapata 10y agoThey were checking in the minified files into git? Really?
- arkadiytehgraet 10y agoThis snippet from the gist provided in the article says it all about any "optimizations" they might have done: path: production ? path.resolve(appRoot, 'public', 'webpack') : path.resolve(appRoot, 'public', 'webpack')
- kimshibal 10y agoFTFY: How we made our React-Rails app COMPILE 5x faster This kind of article is just a click bait. No data to support his claim.
- magoon 10y agoHow much of the 5x was from proper CDN usage? Given that we can all expect a CDN to dramatically benefit delivery time, I would be interested in seeing these kinds of posts with obvious wisdom omitted.
- partycoder 10y agoNo mention of E-Tags.