
Show HN: React PWA – A scalable Progressive Web Application foundation - tirthbodawala
https://www.reactpwa.com
======
tekkk
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.

~~~
tirthbodawala
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://www.reactpwa.com) &
[https://demo.reactpwa.com](https://demo.reactpwa.com) are built with the same
boilerplate and are performing really nice. Any inputs here are appreciated.

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

~~~
yashthakur
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. :)

------
Geee
FYI react-create-app also has PWA features:
[https://github.com/facebookincubator/create-react-
app/blob/m...](https://github.com/facebookincubator/create-react-
app/blob/master/packages/react-scripts/template/README.md#making-a-
progressive-web-app)

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

------
ijustdontcare
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?

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

~~~
scottmf
> Welcome to React.

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

------
ulucs
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

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

~~~
rtb
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/](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.

~~~
tirthbodawala
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?

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

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

~~~
pier25
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](https://www.youtube.com/watch?v=LOeioOKUKI8)

------
tirthbodawala
Please visit [https://github.com/Atyantik/react-
pwa](https://github.com/Atyantik/react-pwa) if the site is down

~~~
flanbiscuit
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.

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

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

~~~
fiatjaf
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](https://github.com/fiatjaf/sitio)

~~~
yashthakur
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. :)

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

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

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

~~~
skrebbel
why?

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

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

~~~
fiatjaf
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?

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

[https://news.ycombinator.com/item?id=15567657](https://news.ycombinator.com/item?id=15567657)

------
waibelp
Website does not load. Same as [https://github.com/vuejs-
templates/pwa](https://github.com/vuejs-templates/pwa) for react?

~~~
yashthakur
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.

------
desireco42
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/](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!

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

------
bernadus_edwin
Any plan for supporting typescript?

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

------
WhitneyLand
Can someone give a tldr since the site is down?

~~~
yashthakur
Kindly check the github repo and its wiki pages:
[https://github.com/atyantik/react-pwa](https://github.com/atyantik/react-pwa)

