Very impressive engineering on the whole stack. The question that arises to my mind is, maybe even too much engineering?
Hard to understand the architecture when there is so many moving parts which makes me not want to use it for my own stuff. Because if I don't know how it works how can I fix/change it when I have to? Also the loader icons last for worryingly long time when I'm running it on my localhost. Which means the caching isn't working as it's supposed to or should it really take that long to load a single webpage? Not trying to attack on anyone here, just observing.
How is your serviceWorker configured? The problem I have had with them is the N+1 (or sometimes more) times it takes to reload changes which is infuriating to me and I've stopped using them altogether since the benefits aren't that great (for me at least).
Maybe if you could bootstrap with this step by step it would be easier to get to know the structure a little better. So say you could first bootstrap à la create-react-app with bare minimum to get things rolling and then add on caching features which there seems to be plenty of.
Thanks for your comment and raising the question. We are working on documentation and are really moving fast to get it understandable. To understand the architecture I will create a Video thus making it more easy to understand.
Regarding performance, Please try building and running the application. Development mode is not good for measuring performance.
The site https://www.reactpwa.com & https://demo.reactpwa.com are built with the same boilerplate and are performing really nice. Any inputs here are appreciated.
Currently the site is down due to heavy traffic. The docs are written and in progress. You can also view pages on github wiki. Thank you for checking it out. :)
The bigger problem my team has had with service workers is the infuriating opaqueness caused by even the smallest problem in configuration. Stuff like "it keeps showing a white screen even though I've already manually unregistered the service worker and cleared caches in four different places".
Initial page load: 279kb
Click on 'Features': 1.58Mb (40 requests)
Click on 'PWA': 2.88Mb (74 requests)
...
If you visit this page on mobile and start to scroll down while it's still loading, you'll have to scroll down multiple time because the loaded content resets the scrollbar (Firefox on Android)
Top comment: 'Impressive engineering on the whole stack'
Hey there, the request you see are being loaded in background, thus not affecting the user experience at all, its not the size of each page, it preloads data when ever it can. I.e. Cache by service worker. Its for best user experience, regarding the page restoring scroll, that is what I did, which I guess was not that of great Idea. But yes we worked hard in it and its pretty useful if you check it yourself
"I use React over Angular because it is so small! Also here are my 2 MB of 3rd party modules that are loaded directly on the home view, that the other frameworks come with and lazy load when needed".
how would you do it with create-react-app ? the ecosystem around CRA is incredible (e.g. https://codesandbox.io/) and it makes a lot of sense to build on top of that.
I refreshed, and got a Cloudflare page with a banner at the top saying "This page (https://www.reactpwa.com/) is currently offline. However, because the site uses Cloudflare's Always Online™ technology you can continue to surf a snapshot of the site." The bottom of that page where the "snapshot of the site" presumably should be is a differently branded 502 error page.
The traffic is really hitting hard right now, and the server was not supposed to be handling that. Its just 512 MB ram and now I need to scale it. #unExpectedProgress.
It is not a static website. It is made using the same boilerplate that is mentioned in the documentation. As the repo maintainer believes in using what he has made. ;)
It's a gh-pages site right? Never seen one of those bulk over heavy traffic. Or are they (you?) hosting it somewhere else?
edit: nevermind, reading more of the github README.md I realize the site itself is a PWA (make sense) and you probably need a server and not a static site like gh-pages.
Have we solved the issue of server-side rendering + code splitting? I see both in features, but last time we attempted this, we had to give up one of those features.
No you are not missing anything, its just if you want to understand how and what we have done. And how we want the further development to proceed, thus contacting us would become inevitable.
page.js is used by many people, documentation is great and support is not needed at all because it is simple and just works (while React Router is incredibly complicated for such a simple thing).
React Router depends on a ton of libraries and thus has a huge impact on your build size (not to mention your disk while developing).
But maybe because they have "React" in the name and have got some network effects everybody keeps using and recommending them?
No it is based on es6/7 jsx. Also it has server side rendering, code splitting and many more features. Kindly check the github repo link shared by tirthbodawala.
This is such a coincidence. I was looking for such thing today and found few projects that are from last year and abandoned. Wondered why this is and thought about doing it myself.
...
Aww, this is such a mess. I am sorry but this project is making me think twice before using it.
A lot of comments on slow loading and site not being available. I appreciate your desire to use and share new technology, but this might be too early for this project.
At that time it was on a slow server with multiple sites loaded on that server.
You can check the speeds now.
If still you have complaints regarding speed kindly comment or raise an issue over there.
By the way the issue was with the server and not the boilerplate.
Desireco42, the PHP tags are part of design, we are PHP enthusiasts. Regarding slow loading, we were not expecting great response and traffic, check the site now, shifted it to new EC2 server and is working lightning fast!
Hard to understand the architecture when there is so many moving parts which makes me not want to use it for my own stuff. Because if I don't know how it works how can I fix/change it when I have to? Also the loader icons last for worryingly long time when I'm running it on my localhost. Which means the caching isn't working as it's supposed to or should it really take that long to load a single webpage? Not trying to attack on anyone here, just observing.
How is your serviceWorker configured? The problem I have had with them is the N+1 (or sometimes more) times it takes to reload changes which is infuriating to me and I've stopped using them altogether since the benefits aren't that great (for me at least).
Maybe if you could bootstrap with this step by step it would be easier to get to know the structure a little better. So say you could first bootstrap à la create-react-app with bare minimum to get things rolling and then add on caching features which there seems to be plenty of.