Show HN: React PWA – A scalable Progressive Web Application foundation | Hacker News Reader

Show HN: React PWA – A scalable Progressive Web Application foundation

reactpwa.com

125 pointstirthbodawala57 comments

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.

Many people don’t have the time to watch a video. Docs should be the source of truth

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".

FYI react-create-app also has PWA features: https://github.com/facebookincubator/create-react-app/blob/m...

Yes it does but it does not provide SEO support with SSR (Server side rendering)

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'

Really?

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

Welcome to React.

"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".

> Welcome to React.

Looks like less than 200kb of JS. And the initial page load is less than 30kb HTML/CSS.

The website is getting hugged, ouch.

Still, it seems perfectly possible to integrate this boilerplate with create-react-app using custom scripts if anyone is interested

Which is odd, because it's behind cloudflare, should mostly be static and describes itself as "highly scalable".

I guess there is a difference between highly scalable and highly scaled.

> The website is getting hugged, ouch.

Indeed. Direct link to GitHub project: https://github.com/Atyantik/react-pwa

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.

Odd. Can you please provide more details? I shall look into it asap ?

I got a plain 504 the first time I tried.

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.

Sorry, can you please check again?

If it's only a static website you could simply use Firebase hosting. It's free and scales automatically using Google's CDN.

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. ;)

Eh, he could also use Firebase functions to accomplish that and again for free with CDN without worrying about scaling issues.

https://www.youtube.com/watch?v=LOeioOKUKI8

Please visit https://github.com/Atyantik/react-pwa if the site is down

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.

Yes. Right now upgrading server for heavy traffic :) Should be up and running more smoothly in 20 mins I guess :)

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.

Yes we have.. with "pages" we can do that now. I can explain more if needed :)

What is code-splitting? Is it asynchronous loading of components?

If you're interested in a React-based static site generator that does that: https://github.com/fiatjaf/sitio

It means load only the code for the page/route that you are visiting and not the code of entire site.

Suppose you visit only example.com/about-us page then why should the server load example.com, example.com/faq, example.com/blog code together with it?

I hope you got the point of code-splitting. :)

A new name for a very old concept. People keep inventing these things...

Next.js does it.

We are looking for ReactJS contributors. Please reach us at admin [AT] atyantik.com

The word "contributors" just sent chills down my spine.

why?

There's the monthly Who Is Hiring thread[1] for that.

[1] https://news.ycombinator.com/item?id=15601729

It appears tirthbodawala is the repository maintainer. I think they are asking for contributions to the project, not looking for new hires.

Thanks Pault for making it clear. That is exactly what am looking for.

You're right, I read "contributors" as something else. My apologies.

You understood it correctly.

It's an open source project though, MIT license.

not sure what you mean. why email you if this is an open source project on github? is there something i'm missing?

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.

I still don't get what React Router offers that some simpler router, like page.js, for example, doesn't.

Well its just used by many people. Thus with great documentation and support.

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?

hey - pretty cool. I wonder if you can incorporate something like Netflix's optimization

https://news.ycombinator.com/item?id=15567657

Website does not load. Same as https://github.com/vuejs-templates/pwa for react?

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.

Look at the creators website... php tags visible https://www.atyantik.com/

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.

Wish you luck!

The PHP tags are clearly part of the graphic design. They're part of the <blockquote> styles.

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!

Any plan for supporting typescript?

Well its pretty easy to add typescript support. We can add it depending on user requests.

Can someone give a tldr since the site is down?

Kindly check the github repo and its wiki pages: https://github.com/atyantik/react-pwa

Reply on news.ycombinator.com