Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Trends – A GitHub trending PWA

news.ycombinator.com

Post reply on HN
Print view View original

1–10 of 34 posts

Show HN: Trends – A GitHub trending PWA

#1

Post by jack_hanford »

Over the past few weeks I've been working on a small application to view trending repos on GitHub. I built the PWA[1] with React, Next.js and GraphQL .. but what's interesting is the application is only using React server side, meaning the client side javascript is only a few lines code adding some event listeners and registering a service worker for offline capability. This helped me achieve a perfect google chrome performance audit

I learned a ton working on it and would love to talk about it if anyone has any questions!

Application Link: https://trends.now.sh

Source code on Github: https://github.com/hanford/trends

[1]: https://developers.google.com/web/progressive-web-apps/

Re: Show HN: Trends – A GitHub trending PWA

#2

Post by yodon »

I'm super intrigued by the client-side/server-side rendering question. When I discovered single page apps I thought I'd seen the future - servers were just things that hosted web services, and all the presentation was a bundled, minimized blob served up by a static CDN. So simple, so clean, such clear separation of concerns. But now I'm seeing reports of faster first page rendering with React server than React client, and here I'm seeing a clearly very smart person articulating a completely different class of benefit of server-side rendering. Clearly I shouldn't be walking away from old style server side rendering so casually. My question is how do you think about that choice, now that we have the freedom to go either direction?

Re: Show HN: Trends – A GitHub trending PWA

#4

Post by jack_hanford »

codesections wrote: post #3

I notice that it lets you sort by language. Does the underlying data let you get at trends in relative language popularity?

If I understand correctly you could build something like that but I'm not currently persisting any data from github which is something I'd need to add first.

I'm simply getting this data from Github and then caching the rendered result on the cloudflare CDN layer, the rendered page data in memory in node, and additionally the GraphQL query in memory

Re: Show HN: Trends – A GitHub trending PWA

#5

Post by jack_hanford »

yodon wrote: post #2

I'm super intrigued by the client-side/server-side rendering question. When I discovered single page apps I thought I'd seen the future - servers were just things that hosted web services, and all the presentation was a bundled, minimized blob served up by a static CDN. So simple, so clean, such clear separation of concerns. But now I'm seeing reports of faster first page rendering with React server than React client…

It's certainly interesting. This kind of development has gone full circle where the methodologies are back to where it was years ago.

The issues that really large JS bundles can cause are really hard to solve (bloated sizes, but also parse time of the bundles). There are a lot of tools to help mitigate those like code splitting, but it's really challenging once things get big.

When I wanted to achieve a 100 in my chrome performance audit, I simply couldn't include React.

I think React adds a tremendous amount of value from the ecosystem, the constant improvements and updates .. and the mindset that developers have when building out react applications. (component model, etc)

I think for any really large application with lots of client side interactions or async data / data management, my solution would become unwieldy.

But for smaller applications that maybe don't need to do as much, (in the above case we're simply registering some event listeners to submit a form) or landing pages or the like .. the above solution would work very well.

Re: Show HN: Trends – A GitHub trending PWA

#7

Post by jack_hanford »

Mithorium wrote: post #6

Never used next, looks interesting. So with this setup, the browser doesn't do any work, all pages are loaded as if they were static, and rendered server side?

Correct!

The way that is achieved is pretty neat, Next.js has a [1] component that you can extend. This Document is essentially your application shell that is used when server side rendering.

Here is the trends Document component[2] where you can see I'm simply omitting `NextScripts` which ends up being the frontend bundle with react + application code

[1] https://github.com/zeit/next.js#custom-document

[2] https://github.com/hanford/trends/blob/master/pages/_documen...

Re: Show HN: Trends – A GitHub trending PWA

#10

Post by pandler »

vimslayer wrote: post #9

The page load speed is seriously impressive, congrats! There's something weird going on with the styling of the dropdowns, though: https://i.imgur.com/WQ3m52X.gif I'm on Windows 10 & Chrome

> The page load speed is seriously impressive, congrats!

I happened to see this before I clicked the link, and I have to agree the page load speed lives up to your hype!

I'm not experiencing your issue on OS X, Chrome.

Post reply on HN