search

Metnew / suicrux

🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]
Apache License 2.0
944 stars 131 forks source link

Flash of unstyled content #29

Closed ghost closed 7 years ago

ghost commented 7 years ago

I'm submitting a ...

Bug Report:

More bugs <3

When running yarn run dev, the site will show unstyled content (skeleton html structure without CSS applied) for .25 seconds or so on refresh of browser.

Useful Info:

SSR doesn't appear to have this problem. Your SSR implementation and separation from any generic backend API is a major plus to this boilerplate!

Metnew commented 7 years ago

Hi, @TheDolo thank you for active participating 👍 But, it's dev mode, where app scripts and styles aren't minified + hot-module-replacement script exists + webpack script exists. If I remember correctly, size of all scripts that are used in development are bigger than 13 Mb, so it's ok that flash of unstyled content exists in development.

ghost commented 7 years ago

Thank you for the response! I had no idea, thank you!

Metnew commented 7 years ago

Also @TheDolo , what do you think about "ui-framework agnostic" fullstack micro-framework based on this starter? Can it be useful?

ghost commented 7 years ago

It's a good idea in many regards. Semantics was actually a huge plus for me, especially after surveying everything in the React land. Inevitably, I'm going to use something as a base for a UI framework, and not someone's abstraction. I also always mix in other frameworks. In this case, I've chosen Semantics as the base and BlueprintJS for design/typo/etc and other components. After that, I customize away.

I think if it's a matter of you writing the boilerplate for the UI side vs semantic, use semantic as it's top notch for react. I could see you strip out all of the semantic, but what are we left with? Redux/React and a blankish frontend?

I think including a UI framework is fine, it's not to hard to strip/replace. I don't think it extends beyond the scope of this project either. It would if you included a real API server (express or Hapi) and a huge array of boilerplate there, but you don't (which is good!), you focused on getting the frontend and how it interacts with an API in Redux/React fashion right, and making that whole process fast with SSR/WP3 :D (run on sentence)

Small plug for you using https://github.com/mjrussell/redux-auth-wrapper in this project :D and maybe playing with https://github.com/tonyhb/tectonic and https://github.com/react-ga/react-ga Google Analytics!

Metnew commented 7 years ago

@TheDolo thanks man, your feedback really helps. I'm currently working on HMR with SSR + webpack for server-side code. And after a small investigation I realize that it would be cool to make something similar to next.js, but more customizable for every developer.

I agree with you about UI frameworks, but when I started this project it was a small "how-to" example with semantic :) And semantic-ui-react mentions this project as an example on their main page, so I decided to left Semantic in this repo and made one more repo/package.

I recommend you to pull master branch again (or just last 3 commits which are hotfixes). Also, maybe you can find something useful for yourself in "dev" branch: fixed plugins order for production, image bundling using url-loader and some little improvements/deletitions :) https://github.com/Metnew/react-semantic.ui-starter/tree/dev

ghost commented 7 years ago

I'm currently working on HMR with SSR + webpack for server-side code. And after a small investigation I realize that it would be cool to make something similar to next.js, but more customizable for every developer.

Heh, Next.js has a lot of magic, rapscallion is nice and light, maybe even look at adding other renders as an option: https://github.com/electrode-io/electrode-react-ssr-caching

I agree with you about UI frameworks, but when I started this project it was a small "how-to" example with semantic :) And semantic-ui-react mentions this project as an example on their main page, so I decided to left Semantic in this repo and made one more repo/package.

It's really surprising to see such a huge framework with so little examples, lot's of responsibility on your part ;D