Hacker News Clone Using GraphQL and React • Hacker News Board

Re: Hacker News Clone Using GraphQL and React

#91

Post by reacthate » Mon, Oct 02, 2017, 4:40 AM UTC

scottmf wrote: post #62

chrisco255 wrote: post #52

Earlier quoted context omitted.

It's called a 'reference architecture'. It's intended to be used as a teaching tool and learning tool for a stack that has tremendous benefits for applications more complex than HN. Since everyone is familiar with HN on HN, they can look at that code and understand how it fits in with the big picture without having to learn a new app PLUS a new architecture. [1] https://en.wikipedia.org/wiki/Reference_architecture

Good god look at all these over-engineered todo lists! All you need is a piece of paper and a pencil. Maybe a pen if you’re on the immutability bandwagon.

Bit of a false equivalence, but kinda. How you make a todo list isn't nearly as important as getting your shit done, which can be easily done with a pen and a notebook.

Re: Hacker News Clone Using GraphQL and React

#92

Post by orange8 » Mon, Oct 02, 2017, 4:41 AM UTC

zappo2938 wrote: post #15

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.

Clone: 22 requests | 1.1 MB transferred | Finish:2.86 s | DOMContentLoaded 636 ms | Load:2.87 ms Real Hacker News: 6 requests | 11.5 KB transferred | Finish: 336 ms | DOMContentLoaded: 325 ms | Load: 343 ms Hacker News is just a static cached webpage

What is the technical difference between Finish, DOMContentLoaded and Load?

Re: Hacker News Clone Using GraphQL and React

#93

Post by foobarbecue » Mon, Oct 02, 2017, 4:43 AM UTC

Caveman_Coder wrote: post #6

Duplicate of the following... - https://news.ycombinator.com/item?id=15297922 - https://news.ycombinator.com/item?id=15134949 EDIT: Not sure why my comment is being downvoted for pointing out that this exact hobby project has been continually posted in the last couple of months.

Thanks for posting about the duplicates -- now I can read the comments on the duplicates.

Re: Hacker News Clone Using GraphQL and React

#94

Post by wiredearp » Mon, Oct 02, 2017, 4:58 AM UTC

10-6 wrote: post #82

hasenj wrote: post #77

Clicking on comments results in a weird flicker effect where the page appears empty for a split second before being filled with content. Also, the comment collapse button doesn't seem to work. Is there really any benefit to implement HN as a JS driven web application? IMO, Hacker News is simple enough such that implementing it as JS-Driven app actually makes it slower than the original.

The weird flicker/initial empty page (might) be because all the components are being mounted synchronously on page load. The new version of react introduced async rendering of new components: https://medium.com/behind-the-screens/dont-load-all-your-web...

I don't know what they told you, but async rendering will in any case cause flickering.

Re: Hacker News Clone Using GraphQL and React

#95

Post by weego » Mon, Oct 02, 2017, 5:02 AM UTC

leeoniya wrote: post #63

kccqzy wrote: post #56

The latency of clicking on the "comments" link is greater than actual HN (about 0.9s) for an example I tried, of which about half is spent in the POST network request, another half in JavaScript and layout/rendering/painting. For actual HN the whole process is well below 0.5s. Seems like with more comments it is much slower.

the hn api could be to blame for the slow i/o: https://github.com/HackerNews/API#design

Or the enormous over engineering

Re: Hacker News Clone Using GraphQL and React

#96

Post by hasenj » Mon, Oct 02, 2017, 5:03 AM UTC

clintonwoo wrote: post #80

hasenj wrote: post #77

Clicking on comments results in a weird flicker effect where the page appears empty for a split second before being filled with content. Also, the comment collapse button doesn't seem to work. Is there really any benefit to implement HN as a JS driven web application? IMO, Hacker News is simple enough such that implementing it as JS-Driven app actually makes it slower than the original.

Yes the benefit is that you can prefetch other page assets then client render new pages using only GraphQL queries. Download the whole site once and and runs more like an app afterwards. Perhaps a good alternative to the flicker effect would be to put loading indicators in place of each UI component as it loads so you can see the structure.

You are missing the point.

HN is so simple that introducing such defects in the name of some theoretical abstract benefit shows a lack of care about the user experience and the product.

I see this attitude all the time and I find it unprofessional.

Re: Hacker News Clone Using GraphQL and React

#97

Post by sgdesign » Mon, Oct 02, 2017, 5:24 AM UTC

md224 wrote: post #84

I'm curious if we'll see a highly-opinionated framework arise that encapsulates all of the technologies used here under the umbrella of a single configurable library... or does that already exist?

We're trying with http://vulcanjs.org

Re: Hacker News Clone Using GraphQL and React

#98

Post by nevir » Mon, Oct 02, 2017, 5:40 AM UTC

altano wrote: post #74

whalesalad wrote: post #65

I really dislike the tendency to couple graphql queries with components. Is this idiomatic? If you are comfortable with side effects in your presentation layer i’d much rather manage data at a higher level and have a component request the data it needs from that. As opposed to actually making HTTP requests. What happens when two components used in two totally different areas of a single page need common data? Relying…

Declaring what data your UI binds to is not a side effect, so co-locating GraphQL queries with your component doesn't necessarily introduce side effects. You don't have to co-locate GraphQL mutation queries to your component, you can just have your event handlers (or other mutation-creating events) handled elsewhere in your app. > What happens when two components used in two totally different areas of a single page n…

It certainly does introduce side effects (by default, for Apollo or Relay):

* A network request is kicked off if the cache doesn't contain the data the component declares a dependency on.

* other components that depend on any part of the requested subgraph will update when the response comes in

* query observers (which HoC'd components really are) will similarly fire, potentially triggering other side effects in your application

Re: Hacker News Clone Using GraphQL and React

#99

Post by cdata » Mon, Oct 02, 2017, 5:46 AM UTC

IncRnd wrote: post #54

cdata wrote: post #44

This is a nice example of the state of the art of a React & Friends stack. Thank you for building it and sharing it. Is it supposed to be completely functional? Login doesn't seem to work for me, at least. After 1.1 MB transferred, I experience subjectively sluggish page transitions and less-subjective FOUC on a recent MacBook Pro and Chrome over fast wifi. The features in this stack are impressive and appealing, but…

Are you saying that you put your regular hacker news credentials into this system?

No, that's not what I'm saying.

Re: Hacker News Clone Using GraphQL and React

#100

Post by ng12 » Mon, Oct 02, 2017, 5:48 AM UTC

Touche wrote: post #73

ng12 wrote: post #13

Earlier quoted context omitted.

I see these kind of posts often. What's a reasonable benchmark? What useful projects have only a handful of dependencies? You could say the same about a project in any language -- it's just more noticeable in the JavaScript ecosystem because best practices are still developing.

news.ycombinator.com which is faster and has 0 js deps.

HN contains 2kb worth of JavaScript, it's almost all HTML.