Comments (19)
in development or in production with SSR?
from suicrux.
Heh, SSR. I've found it on shift refresh. Only need to import big libraries and eventually it'll happen. I get the screen below for about 1.4 seconds of loading on shift refresh and first time loading. Sorry for the bad quality, chrome frame inspector. The login component doesn't show up (error in my routes), just the screen below.
SSR. Got it to happen on clone. Importing big packages (just need import statement). Using the performance tool in chrome and screen frames.
from suicrux.
At entry point of 2.3MB (of course it's gzipd'), on normal page refresh I'll get about 200MS of the above :( It's the FOUC of the login component (I had it disabled).
from suicrux.
@TheDolo , I found error in SSR, but can't push fix for it right now, would be fixed soon (approximately: one day)
from suicrux.
@TheDolo SSR was rewritten, should be fixed now
from suicrux.
If you shift refresh on your demo, you'll find that! Auth FOUC will be there too if not logged in. (Not the end of the world, but more libs pronounces this).
from suicrux.
@TheDolo FOUC caused by Semantic.UI. SUI styles ~540KB - before they are downloaded only styled-components styles are active. I'm trying to follow Shell pattern, but not sure is it so easily possible.
Approximate improvements plan:
- vendor.css and vendor.js must be separated into smaller files. Separate each file into 2 smaller chunks and download would be faster
- Critical CSS path must be extracted from SUI.
UPD: Probably, I need to say that this behaviour likely to occurs only on a first load = Before the app will be cached by ServiceWorkers.
The main reason of FOUC - server can't render SUI styles.
from suicrux.
Wonderful, thank you for the explanation!
from suicrux.
@TheDolo probably problem would be solved after #49 will be solved. There wouldn't be unnecessary re-rendering. But still, FOUC might be because of the huge SUI bundle. Also, I'm currently experimenting with separation of SUI bundle for faster content download with HTTP2.
from suicrux.
@TheDolo do you still get FOUC on page loading?
from suicrux.
I'll have to refactor your current updates in, I'm a few days behind your commits. I can't get your demo to show it, so thats good. Will follow up in a day or two. Still having problems with every page refresh going back to auth page since your new refactor only in SSR + using my own endpoints for auth. It worked before your refactor and my endpoints have not changed, so I'm assuming it's something with the auth wrapper. But I don't see any FOUC when shift refresh even if it takes me back to auth!
from suicrux.
Shifting to /auth
was caused by invalid configuration provided to OfflinePlugin, so right now it's fixed.
Also, I recommend you to check dev branch due to new features:
- Webpack_config was rewritten in es6
- Webpack configuration that is used by both apps for both development and production was extracted to
webpack_config/webpack.isomorphic.js
- CircularDependencyPlugin was added
- Some documentation about testing, env variables, i18n and semantic-ui-react
Dev will be merged into master soon when I'll finish docs and README.md.
@TheDolo waiting for you to adopt new features. You're the most active user of this starter, probably 👍
from suicrux.
Yup, FOUC after deploying to a live server. Will get your new updates in a few days and report back! I've gotten good at swapping out all code except my custom routes, reducers, and containers (and some minor code there). It's actually pretty painless! Could easily see a CLI!
from suicrux.
CLI will be soon, sorry, have a lot of work on docs.
I hope you figure out what the hell is currently in /webpack_config
. There were some changes to make code follows DRY principle.
from suicrux.
Heh yea docs for sure first. At this point I understand nearly all your code, but that did take a while! I love what you did with webpack_config vs the last refactor! +2000 points for the GA/Sentry integrations. I've still kept the API server separate from the SSR server! But it would be nice to mount/remount the API calls ON server instead of browser.
from suicrux.
docs folder.
Maybe the starter needs more integrations, what do you think about it?
Also, I didn't understand (sorry for bad English). Is last update of webpack_config not so good?
from suicrux.
Np! I love what you did with webpack_config this time around versus the single folder! Much better than before! I was actually going to request a GA integration, it's almost always a requirement, and the Sentry was just the topping on the sundae. What other major services are there? Minds blank!
from suicrux.
Hah, thanks :)
Right now only Sentry and GA for the client, but Sentry for the server is very soon.
I'm currently working on the styleguide for the folder structure. I got some problems in a similar project, where my friend and I used a lot of relative imports (e.g. import {lol} from 'almost-a-root-dir'
). And we have had many circular dependencies until today.
So, maybe this doc about avoiding circular dependencies will be added too, I've never faced a similar guide for frontend before. Of course, there are similar guides for other languages/frameworks because it's OOP basics, but not for React/Redux projects for sure.
from suicrux.
Style guide is perfect, I was a bit confused on how to use scss in the project properly.
Plugs: Further integration of GA into your route system would be nice! And maybe official 'guest' routes tags (x2 please), and the sidebar only shows certain routes if guest. And maybe.... :D
from suicrux.
Related Issues (20)
- Stuck at Login `auth` screen HOT 2
- NextJS integration HOT 9
- Basic Setup ? HOT 1
- The script has an unsupported MIME type ('text/html'). HOT 2
- Source Map Issue HOT 2
- sidebaritem titles are shown on header when page is refreshed HOT 6
- Deploying application with apache, frontend does not show... HOT 5
- Who's using Suicrux? HOT 9
- Roadmap [WIP]
- Eager to see Redux-Saga in this project HOT 1
- flow-typed install fails HOT 1
- Error Can't resolve 'react-tree-walker', while running "npm run dev" from master branch HOT 2
- Version 10 of node.js has been released
- static only? HOT 1
- Unable to debug in VSCode editor HOT 1
- An in-range update of webpack-hot-middleware is breaking the build 🚨 HOT 3
- An in-range update of babel-plugin-styled-components is breaking the build 🚨 HOT 1
- An in-range update of react is breaking the build 🚨 HOT 31
- An in-range update of enzyme is breaking the build 🚨
- An in-range update of eslint-plugin-react is breaking the build 🚨 HOT 12
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from suicrux.