coryhouse / react-slingshot

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in
MIT License
9.75k stars 2.95k forks source link

Performance Enhancement For good performance UI #609

Closed ARKKYN closed 5 years ago

ARKKYN commented 5 years ago

@coryhouse MY CONTEXT REGARDING THIS FEATURE REQUEST: I have used react slingshot for couple of my projects even though it is good and easy to use . I have some feature requests , Since I benchmarked this boilerplate with create-react-app, react-pwa, react-boilerplate and few others I saw the build output of the final build is bigger compared to other boilerplate's build output . (Since It includes all the code in the build file which are not used)

My Main Suggestion: I was trying to add purgecss to remove unused css and other plugins to remove render blocking css, js and resources out of which one or two were unsuccessful I would like to suggest to add following for Good UI for a 100% google light house score and also make things easier -- Dead code elimination for css and javascript -- Add native support for Progressive web app -- Enhanced Code splitting for this app -- Debugging tools for debugging -- making features more modular like adding or removing a feature in the boilerplate via setup or by a script utility -- Performance audit tools like webpack-bundle-analyzer and much more

And Finally a readme with links for building high performance frontend react apps

DaneTheory commented 5 years ago

React-Slingshot is my goto starter for most projects, which ultimately led me to start contributing. It sounds like you are finding yourself in a similar situation. Community driven contributions are what makes open source projects all worth it.

If you haven't already, check out the docs on CONTRIBUTING. Any work you do won't go unnoticed long. @coryhouse and most of the other contributors are active regularly and quick to respond.

I say all this only because a few of the points you list relate to things you are absolutely free to build on your own, then create a Pull Request for and perhaps have it added to the project. Some potential PR's you could roll out based on what you've brought up are:

Feature Requests are meant more for when, in adding the new feature, its consequence is noticeable across React-Slingshot's architecture design as a whole. As per the docs:

If you intend to change the public API, or make any non-trivial changes to the implementation, we recommend filing an issue. This lets us reach an agreement on your proposal before you put significant effort into it.

Also, in proposing a Feature Request, it's productive to include any potential working solutions you may have as well. This helps improve the overall context to the back and forth discussion had here. You listed:

I don't say any of this to argue. In fact, I agree with the overall sentiment you're proposing. Just need more detail on you're end in how we should do things.

Next, you listed:

The latter statement, I assume, is what you mean by "much more".

React-Slingshot does come with webpack-bundle-analyzer. Please be sure to review the project thoroughly, especially it's dependencies in the the package.json, first and foremost.

I do, however, disagree about adding links on "building high performance frontend react apps"; or even doing much additional improvement of the production build aspect of React-Slingshot. Other than the common performance tooling offered via mini, concat, uglyfy, code splitting and purging there are only so many ways to create performant, static assets. Front And performance also largely depends on the developer and their inherent knowledge on optimization when crafting the codebase.

Beyond that, application performance enhancement is derived from architectural design implementations and strategies commonly understood within the Back End realm of things. CDN's, load balancing, cache-busting, front-end proxies, streams, chunking, webserver options, persistence design; the list could go on and on. These are all solutions to improving performance, but are only useful to the context of the application they are meant to serve. Changing React-Slingshot to try and curtail to all performance options via the backend is an overly-opinionated move to make on the part of this project's purpose.

As a last note,

create-react-app, react-pwa, and react-boilerplate, like React-Slingshot, all act as starterkits for developing React apps. However, React-Slingshot does a great job at going a bit further than any of those options in what it gives devs out of the box in terms of overall tooling, without over doing it and becoming too opinionated in it's implementation. None of the alternatives you mentioned include Redux nor native support for SASS/SCSS (without a little work) among other perks in this project.

While React-Slingshot does add a bit of extra weight to the codebase, in my opinion, it's for good reason. I prefer this project over others mostly because of its adherence to consistent, best practice focussed React/Redux driven development, while also keeping concepts like "separation of concerns" in mind.

Hope you found this helpful. Looking forward to seeing your changes come through!

-Cheers!

nickytonline commented 5 years ago

I'll let the others chime in, but here are my thoughts.

ARKKYN commented 5 years ago

will open pull request soon