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

Hacker News Clone Using GraphQL and React

github.com

Post reply on HN
Print view View original

131–140 of 187 posts

Re: Hacker News Clone Using GraphQL and React

#131

Post by ivanhoe »

elnygren wrote: post #117

GraphQL is a very nice spec for building APIs that have many sources of data and then building a modern frontend with proper caching etc. on top of it. The ugliest part of it, or one requiring most hacky solutions, is optimising queries. For example, there are some nasty N+1 traps or "oops-I-joined-your-entire-database" problems when using SQL. JoinMonster helps with this, but it is a bit too much of a "full solution…

Don't have tones of experience with GraphQL, but doesn't one write resolve methods himself? GraphQL just works with the data you've fetched, and as always it's up to the developer to know how to use the tool properly

Re: Hacker News Clone Using GraphQL and React

#132

Post by zero_shift »

arjie wrote: post #123
zero_shift wrote: post #112

I feel a little mixed about projects like this. It's fantastic to see people share their knowledge, and turn theory into practice. It's very easy to spout on about best practices and good ideas without demonstrating how they can be implemented in the real world. And this application does demonstrate some good ideas. ...But some bad ideas also. I think one problem we have in the frontend world is that developers of ve…

That's just how we learn to apply things correctly. If the first time you use a tool is to build a scale-appropriate project, you will stumble and likely fail. Imagine you want to sail across the Atlantic and, to acclimate to the necessary tasks, you started small: sailing down the Thames, then sailing to Calais, then sailing farther and into the deeper ocean, before you decide to take the big trip. Now imagine you p…

> That's just how we learn to apply things correctly.

That's fine when we're writing personal projects, but don't professional gigs require a greater standard of care?

Imagine you need to need to transport water to your home. You start by consulting best practices and blogs and conclude that the only way to take water somewhere is using a helitanker. This is a dual rotor helicopter with an enormous hold. You consult a building planner to construct a helipad on your roof. You seek an expert helicopter pilot. You spend several weeks poring over different models of helicopter.

You can do a lot of iteration and eventually reach the right result, but that still won't stop your house burning down in this analogy.

Re: Hacker News Clone Using GraphQL and React

#133

Post by zingmars »

vincnetas wrote: post #130
sdfjkl wrote: post #111

The original HN is one of the fastest loading sites I regularly visit. You fixed that pretty good. Disclaimer: I'm on terrible internet connections most of the time and it really makes you hate all this modern web crud. Often "dynamic" sites don't load at all because while the initial HTTP request eventually gets through, one or more of the following XMLHttpRequests or whatever fail, and a lot of the time there is no…

Just tested that :) Clean load 22 requests, 1.1 MB 38sec vs 6 requests 48.8 KB 4sec

To be fair, it does seem to be pre-loading the pages the links at the top of the page lead to... Except then it also makes a request which ends up being ~7-8kb in size when you switch to a tab for the first time.

This is a pretty good example of older websites vs 'web 2.0' I guess.

Re: Hacker News Clone Using GraphQL and React

#134

Post by arjie »

zero_shift wrote: post #132
arjie wrote: post #123

Earlier quoted context omitted.

That's just how we learn to apply things correctly. If the first time you use a tool is to build a scale-appropriate project, you will stumble and likely fail. Imagine you want to sail across the Atlantic and, to acclimate to the necessary tasks, you started small: sailing down the Thames, then sailing to Calais, then sailing farther and into the deeper ocean, before you decide to take the big trip. Now imagine you p…

> That's just how we learn to apply things correctly. That's fine when we're writing personal projects, but don't professional gigs require a greater standard of care? Imagine you need to need to transport water to your home. You start by consulting best practices and blogs and conclude that the only way to take water somewhere is using a helitanker. This is a dual rotor helicopter with an enormous hold. You consult…

Hahaha, I must admit to laughing out loud reading that.

I was referring to projects like the one linked, which are quite clearly either technology demonstrations or practice stuff.

Re: Hacker News Clone Using GraphQL and React

#135

Post by kuschku »

lucasmullens wrote: post #10
kuschku wrote: post #4

Damn, those load times. This is on all my tests – fast internet or dialup, 2016 desktop or ancient android phone – significantly faster than the real HN. Wow.

This new site is around 1MB, regular HN is around 50KB. They're not even close. It's just that navigating to new pages is faster since it doesn't take a full page refresh.

Correct, but so is commenting, loading comments, going back to the home page, etc.

All these actions are a lot faster on that site than on real HN with Firefox Nightly on PC and mobile.

Re: Hacker News Clone Using GraphQL and React

#137

Post by kuschku »

kuschku wrote: post #4

Damn, those load times. This is on all my tests – fast internet or dialup, 2016 desktop or ancient android phone – significantly faster than the real HN. Wow.

Yeesh, thanks for the downvotes on an actually measured result.

I'm trying this in Firefox nightly (stylo enabled, webrender not).

Even on an old phone over throttled internet, that page is faster than real HN for page transitions, but the same happens on 100Mbps WiFi with my Nexus 5X, or on LAN with my desktop.

In all cases, that site is significantly faster than real HN in loading and rendering (I can see the real HN's icon slowly load on every page refresh — that page doesn't do that).

If you get different results, you're probably using Chrome, which is over-aggressively caching.

Re: Hacker News Clone Using GraphQL and React

#138

Post by petetnt »

I've been working with a React+GraphQL+Apollo+PostgraphQL stack as of late it and has been absolute joy. Apollo is super robust and has excellent documentation and PostgraphQL _just worked_ out of the box against an existing Postgres database. Fetching non-trivial amounts of data and displaying them for the user has never been this easy (nor this fun).

Re: Hacker News Clone Using GraphQL and React

#139

Post by emteycz »

zingmars wrote: post #133
vincnetas wrote: post #130

Earlier quoted context omitted.

Just tested that :) Clean load 22 requests, 1.1 MB 38sec vs 6 requests 48.8 KB 4sec

To be fair, it does seem to be pre-loading the pages the links at the top of the page lead to... Except then it also makes a request which ends up being ~7-8kb in size when you switch to a tab for the first time. This is a pretty good example of older websites vs 'web 2.0' I guess.

Nah, it's just poorly done.

Re: Hacker News Clone Using GraphQL and React

#140

Post by Dowwie »

zero_shift wrote: post #112

I feel a little mixed about projects like this. It's fantastic to see people share their knowledge, and turn theory into practice. It's very easy to spout on about best practices and good ideas without demonstrating how they can be implemented in the real world. And this application does demonstrate some good ideas. ...But some bad ideas also. I think one problem we have in the frontend world is that developers of ve…

It's easier to espouse the virtues of code simplicity than it is to actually practice it. However, it doesn't help that "Less is more" isn't one of the core tenets of Javascript programming.

Be that as it may, praise the author for creating a fully-functioning case study from which audiences could learn and discuss.

Post reply on HN