12 ms·

Hacker News Clone Using GraphQL and React

418 points by alana99 9y ago

throwaway2016a 9y ago
While I don't want to belittle this accomplishment. The magic of Hacker News is the community that is on it. As a piece of technology NH isn't all that impressive. This kind of feels a little over-engineered. Edit: To downvoters, care to explain why I am wrong? The project is extremely well done. It is impressive in its documentation and execution. But in the real world done, launched, and with traction is more important than being well engineered. The existing implementations of upvote style sites work just fine. When Digg.com -- one of the first upvote style boards to go mainstream -- launched in 2004 dozens of copy cats came up. Few succeeded. Why? Community. Also, we are moving away from the decentralized web, unfortunately. For instance, few people run their own Wordpress blog now. Most use Blogger or Medium. I don't see how projects like this fit in in that world. Now, if rather than be a HN clone he added the ability for people to create and moderate their own boards. That would get my upvote.
- scottmf 9y ago
  You’re being downvoted for completely missing the point of the project.
hartror 9y ago
Impressive first load w/ < 1 sec to first render! The 400kb app.js takes ~10 sec to load on my connection but the page is functional during that time which is nice. Is this served from a CDN? Great job putting together a robust example application.
- clintonwoo 9y ago
  Nothing is being served on a CDN, nor even being cached. It's just a demo running on Google Cloud with Kubernetes/Docker.
  - bdcravens 9y ago
    Doesn't it cache the HN API results in memory however? You literally have a function called seedCache() :-)
    - clintonwoo 9y ago
      Yes that's true but the page doesn't get cached so in that regard there's still lots of room for real world performance improvements :)
- mike-cardwell 9y ago
  That's because it's a NextJS app, so comes with SSR for free and works if you disable JS.
kuschku 9y ago
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.
- sillysaurus3 9y ago
  significantly faster than the real HN. Proof? :)
- dcousens 9y ago
  Opposite experience here. Near 4-5x slower than actual HN for me.
  - arikr 9y ago
    What browser / internet speed / other diagnostics info?
- lucasmullens 9y ago
  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.
  - deleted 9y ago
    [deleted]
  - scottmf 9y ago
    Which makes for a better user experience. What’s your point?
    - sillysaurus3 9y ago
      Not really. Most of the point of HN is to navigate to it and then away from it (to other sites).
      - 9y ago
nodesocket 9y ago
Awesome job. This is not a knock on JavaScript in particular, but the amount of brain bandwidth and dependencies to launch a modern web app is getting a bit absurd. I'm turning into that old grumpy hacker who prefers the simple good ole' days of LAMP. :-) React - (UI Framework) GraphQL - (Web Data API) Apollo - (GraphQL Client) Next - (Routing, SSR, Hot Module Reloading, Code Splitting, Build tool uses Webpack) Redux - (State Management) Node.js - (Web Server) Express - (Web App Server) Passport - (Authentication) Babel - (JS Transpiling) Flow - (Static Types) ESLint - (JS Best Practices/Code Highlighting) Jest - (Tests) Yarn Package Manager - (Better Dependencies) Docker - (Container Deployment)
- wishinghand 9y ago
  The length of that is the same as doing it in any other language, it's just that the ways to do it aren't built into the language. You could eschew a lot of these things, but you'd just end up building them yourself. Flow? Unfortunate that it's a separate thing but it gets types which will relieve most programmers. Yarn? .NET has Nuget, Ruby has Gem, Go has dep, etc. Passport? I sure as hell don't want to do authentication all on my own. Jest? I mean, you don't have to test but everyone should.
- colordrops 9y ago
  Definitely a lot of stuff going on. I take that as a sign of maturity rather than a problem. It's not really any different from C++ or Java or Python. You've got to learn all the frameworks and tooling as well. There's an equivalent for many of those packages in other languages.
- ng12 9y ago
  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.
  - Touche 9y ago
    news.ycombinator.com which is faster and has 0 js deps.
Caveman_Coder 9y ago
Duplicate of the following... - https://news.ycombinator.com/item?id=15297922 https://news.ycombinator.com/item?id=15297922 - https://news.ycombinator.com/item?id=15134949 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.
- hellofunk 9y ago
  > Not sure why my comment is being downvoted Because of the following reasons: 1) There's the subtle implication in comments like yours that this posting is not worthy because it was posted before. 2) It doesn't matter. Stuff is re-posted all the time, sometimes simultaneously. That's just the way the web works. 3) It's not your job to moderate or research this site for others.
  - pandler 9y ago
    Tbh I upvote these comments all the time because it's interesting to follow the previous threads. The only differentlce with this comment and others is that they said "duplicate of:" instead of "previous discussion:". I understand the subtle difference between the two deliveries, but I wouldn't be so dismissive.
  - rixed 9y ago
    I, for one, appreciate when some link historian goes out of his way to fight online amnesia.
    - et-al 9y ago
      Online amnesia seems to be a problem with the design of karma-based forums. I used frequent a London bike forum where folks were notorious for answering common questions with "UTFS" (use the fucking search). It was refreshing to be among more "responsible" forum folks.
  - kreetx 9y ago
    I can't really agree on any of the given reasons. re 1) The assumed unworthiness is reading to much into it. Plenty of people point out previous posts. These are both good to read previous comments, and also to assess the spamminess of the post/poster -- how much this is so is up to the readers themselves to decide. I'm glad if someone has done the research for me already. re 2) Does matter, see previous. re 3) HN is a public forum, not a workplace.
chdsbd 9y ago
I can't seem to collapse comments on the site.
- bastijn 9y ago
  +1 for ios. In addition, it feels slower than regular HN. No actual benchmarks though. Checking https://github.com/clintonwoo/hackernews-react-graphql/blob/master/src/components/presentational/Comment.js https://github.com/clintonwoo/hackernews-react-graphql/blob/... it might be on purpose though. Toggle code is commented.
arikr 9y ago
Really well done, and thanks for sharing on HN + sharing the source code. Very kind of you!
dsego 9y ago
I don't know, it feels slower than the original, because when you click on comments, it first loads an empty page and the actual content loads 1-2 secs later, which looks very jarring.
- nodesocket 9y ago
  Agree. A bit dissatisfactory, but totally useable loading comment pages; especially on posts that have > 200 comments. See example: http://www.hnclone.win/item?id=15342486 http://www.hnclone.win/item?id=15342486
reacthate 9y ago
Hey, so, uh... all you need to clone HN is Postgres and some HTML/CSS and a smidgen of JavaScript. Good God, must we pull in the entire JavaScript ecosystem for a simple forum now?
- reacthate 9y ago
  This is why the JS community is so fucked. They take what should be a simple website and needlessly complicate it by (poorly) reimplementing what web browsers can already do.
  - mcgarnagle 9y ago
    I'm on the fence for this one. While I completely agree that the JS community is as you say "fucked." There are so many fast moving framework redesigns that make for huge incompatibilities during these paradigm shifts. Super annoying community. However, I love the advantage of exchanging the most minimal amount of data between a browser and the server for each additional page load (ie: JSON response).
  - scottmf 9y ago
    You’ve completely missed the point.
    - reacthate 9y ago
      I would consider that a win, personally.
  - deleted 9y ago
    [deleted]
  - npolet 9y ago
    This really isn't why the JavaScript community is fucked. It's just a reference project for others to learn from. The spreading of information and ideas through code doesn't mean anyone's fucked. Why fucked? Are you reading into the fact that it's a young ecosystem with a turbulent flow at the moment? JS is just finding its groove. It's an always developing language that has the difficult job of being the language that runs on a fuck load of systems, within the enormities of the internet.
squillful 9y ago
I think this is really nicely done. It's probably a little over-engineered for a project of this size, but it shows the power of using all of these libraries together, and I'm sure it was a great learning experience. Does anyone know what tool was used to generate the system architecture diagram? It's really clean and clear - https://github.com/clintonwoo/hackernews-react-graphql#architecture-overview https://github.com/clintonwoo/hackernews-react-graphql#archi...
- clintonwoo 9y ago
  It's using the magic of Google Slides if you can believe it. They have a lot of nice information modeling shapes.
- mike-cardwell 9y ago
  Sentence 2 on the front page: "It is intended to be an example or boilerplate to help you structure your projects using production-ready technologies." He could have used less tech, but then the project wouldn't have served it's purpose.
  - dullgiulio 9y ago
    Assuming that boilerplate is indeed necessary. Many comments point out exactly that: this very page shows that the boilerplate for a really fast page is just the opened and closed html tag.
computerex 9y ago
The reply functionality seems to be a bit broken. Currently when I try to reply to someone using the clone it replies to a totally irrelevant post..
sheeshkebab 9y ago
nice, but slow(er) than the original for comments > 50. The original is 2x faster than this clone, for that.
chrisco255 9y ago
The way in which Apollo + GraphQL + React work together is just awesome sauce. I love that you can simply declare your data dependencies with a GraphQL query string and Apollo just fetches, wires up and injects the data into your component. I had the pleasure of using this stack for a project once. The speed at which you can move once you have the stack in place and a full grasp of it is pretty mind blowing.
- scottmf 9y ago
  Completely agree. People complain about the state of web dev but we’ve honestly never had it so good.
- mlsarecmg 9y ago
  Do you know a good learning resource that got you there? Esp. Apollo and GraphQl. I feel a little overwhelmed, similar to how i felt when i encountered flux/redux the first time. I figured it was easier than i thought after a while, but the first step was hard.
cdata 9y ago
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 IMO they are not worth the general performance cost weighed by hundreds of kilobytes of JS abstractions.
- IncRnd 9y ago
  Are you saying that you put your regular hacker news credentials into this system?
  - nodesocket 9y ago
    Yah don't put your credentials into this. Tisk tisk. If you did, change your HN password.
  - AFNobody 9y ago
    http://www.hnclone.win/login http://www.hnclone.win/login If you try to create an account you get an internal server error. I assume that is what the OP means.
  - cdata 9y ago
    No, that's not what I'm saying.
- marksomnian 9y ago
  Could probably do with some code splitting.
  - mike-cardwell 9y ago
    It's a NextJS app. NextJS handles code splitting for you automatically. Or maybe I misunderstood what you meant? [edit] In fact, in the README at the root of the project: "Next - (Routing, SSR, Hot Module Reloading, Code Splitting, Build tool uses Webpack)"
pippy 9y ago
I went down the path of learning Relay instead of Apollo. I'm regretting this decision. Relay is too restrictive, and the relay compiler is far too sensitive for most server side endpoints.
- clintonwoo 9y ago
  What put the nail in the coffin to Relay for me was watching a talk by the dev team where they said they don't want to create proper documentation because they feel like that's creating a contract with the community to support the API. It's somewhere on YouTube sorry I can't find it now.
- Rodeoclash 9y ago
  Interesting. I've worked with Relay almost since its release, more recently on the modern branch, and haven't run into anything that's been too restrictive. You have an element of thinking about things in "Relay" terms (in the sense of how to structure them) but once you've figured that it then things just work (TM). I'm curious about the second part of your statement, the compiler being too sensitive for your server side endpoints, can you elaborate on that a bit?
  - pippy 9y ago
    Sure. The first issue I came across was that the relay compiler expects a strict specification when mutating data, one that wasn't compatible with the server library I was using. Expect to write your own server side scaffolder to get around this. The second big issue was that relay modern decoupled the networking logic, so having a series of chained queries is something you either have to handle yourself or write your own networking logic for. And because creating dynamic queries can't be done with relay it's a bit annoying that this logic isn't handled automatically for you. My biggest gripe happens to be the lack of flexibility around dynamic queries. You can't define the data you want back at run time, which feels defeats a major point of GraphQL. Apollo supports dynamic queries with higher-order components. It might be a case of the grass looks greener on the other side, but I felt as soon as you try to do something bigger than a todo app with Relay you start to feel the restrictions.
kccqzy 9y ago
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.
- leeoniya 9y ago
  the hn api could be to blame for the slow i/o: https://github.com/HackerNews/API#design https://github.com/HackerNews/API#design
  - weego 9y ago
    Or the enormous over engineering
whalesalad 9y ago
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 on a cache feels like a hack. I really love React but really dislike the way I see it being used these days. I think of it as a polyfill for a UI component that should be stateless and free of side effects. Not an end to end controller/fetcher/renderer.
- whitefish 9y ago
  So basically you prefer something more along the lines of Model View Controller. Me too. When React was first released it was advertised as “the ‘V’ in MVC”. Unfortunately the developer community took it in a different direction.
  - abritinthebay 9y ago
    How so? It still is exactly that. You can add additional layers/groupings/couplings but that isn't React doing that...
- altano 9y ago
  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 need common data? Relying on a cache feels like a hack. When declaring what data you rely on is as simple as a GraphQL query, it's basically like declaring what data goes in your component. It's NOT like building ORM layers directly into your UI components.
  - nevir 9y ago
    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
gustoguy28 9y ago
Is there a wordpress theme which is similar to HN ? Upvote and others out there have pretty bad UI. Willing to pay for such a theme.
zaroth 9y ago
The real link: http://www.hnclone.win/ http://www.hnclone.win/ Fantastic resource! The key point of this is it provides working example code to start a project from. Everything is MIT Licensed so that means you get to download it and just start hacking. I would love to see some accompanying video tutorials! Of course people are also free to post their own examples using their own favorite technologies. I would love for 'HN Clone' to become a benchmarking standard for comparing stacks. It seems like a bit too much work for such a purpose, but that's the point! :-) I don't think authentication is actually working in the demo, by the way. Don't be tempted to actually log in to your own account! But I tried creating a new account and it failed.
- ythn 9y ago
  > Everything is MIT Licensed Besides GraphQL you mean
  - turdnagel 9y ago
    Facebook switched it over to MIT last week (along with React): https://github.com/graphql/graphql-js/blob/master/LICENSE https://github.com/graphql/graphql-js/blob/master/LICENSE
    - ythn 9y ago
      Ah, well, not the C++ version, it seems (which is the one I use): https://github.com/graphql/libgraphqlparser/blob/master/PATENTS https://github.com/graphql/libgraphqlparser/blob/master/PATE...
ryanmarsh 9y ago
Question: I see that redux is advertised for state management but I don’t see any calls to dispatch or import statements for redux. Is redux actually used in this project?
- mike-cardwell 9y ago
  He is not explicitly using Redux anywhere in this project. Although he is using Apollo, which internally uses Redux. I don't think it should be on the list.
earlybike 9y ago
Regarding SEO: Would the comment pages be indexed? Does anyone has experiences with this? Besides, the comments folding does not work (tested on iOS).
hasenj 9y ago
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.
- clintonwoo 9y ago
  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.
  - hasenj 9y ago
    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.
- 10-6 9y ago
  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-components-at-once-19580acd86f3 https://medium.com/behind-the-screens/dont-load-all-your-web...
  - hellofunk 9y ago
    Are you sure it is not due to the fetching of content form the server rather than the UI synchronicity? I'm quite certain it is just latency for the download. The components might be fetching that data during their mounting if the architecture was set up that way, but the actual mounting shouldn't be the cause; React's UI is much faster than latency caused by that alone. It would be better if the components showed a waiting indicator during the download, if the components are responsible for the download. Alternately, the page itself could show that loader before mounting its sub components. Actually, there are many "alternately"s because frankly this site's approach isn't ideal.
partycoder 9y ago
I think it is not so hard to achieve something similar to HN. I think the added value of HN is: - Algorithm used to rank news - Community and culture
- grey-area 9y ago
  The algorithm is pretty simple - points from votes or flags, but weighted by time, so that new stuff floats to the top for a while. You can use a remarkably simple version of it and it's still very effective. I agree the community (with all its flaws) is far more important than any tech used.
- true_religion 9y ago
  The algorithm used to rank news is openly known, just like Reddit's... anyone can copy it.
md224 9y ago
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?
- velmu 9y ago
  Is like to see this as well, because I like core decisions and the boilerplate side by a framework. I've done some exploration here. Next.js is a framework that does roughly all of this, except it's currently missing (or not making) decisions for you regarding GraphQL as a data layer. More information here: https://malloc.fi/building-decoupled-sites-and-apps-with-graphql-and-next-js https://malloc.fi/building-decoupled-sites-and-apps-with-gra... For a fully integrated GraphQL option I looked into Gatsby.js, which started out as a static site generator. It is still this at it's core, but the move for GraphQL for everything seems like a good move: https://react-etc.net/entry/gatsby-is-a-static-site-generator-using-react-and-graphql https://react-etc.net/entry/gatsby-is-a-static-site-generato...
- sgdesign 9y ago
  We're trying with http://vulcanjs.org http://vulcanjs.org
drej 9y ago
1) npm install added 1226 packages in 52.23s 2) $ ls -l node_modules/ | wc -l 900 3) $ du -h node_modules/ 180M node_modules/ 4) Few people care what your web app is built with. Your differentiating feature should be how it's used, not how its put together. In this case, it works exactly like the original, just with different internals. I don't see the point.
- drej 9y ago
  `npm install` pulls 1.6M SLOC. That's a little bit less than V8 itself. $ loc node_modules/ -------------------------------------------------------------------------------- Language Files Lines Blank Comment Code -------------------------------------------------------------------------------- JavaScript 15594 1681330 215398 283955 1181977 Markdown 1831 246795 70260 0 176535 JSON 1602 167050 936 0 166114 HTML 86 37383 2511 18 34854 TypeScript 289 26943 2895 5929 18119 Jsx 19 11072 1190 587 9295 XML 14 6533 466 4 6063 C/C++ Header 21 7103 1126 403 5574 YAML 280 4697 199 166 4332 Makefile 69 3611 733 844 2034 C 4 2219 271 291 1657 CSS 19 1428 84 34 1310 Plain Text 81 1412 285 0 1127 CoffeeScript 16 1260 181 106 973 Python 6 926 179 56 691 ActionScript 4 904 89 227 588 Autoconf 2 778 70 256 452 C++ 7 423 70 36 317 Handlebars 6 262 30 0 232 Bourne Shell 13 213 27 22 164 OCaml 1 156 23 0 133 D 6 69 0 0 69 Batch 2 18 1 0 17 Lisp 2 12 0 0 12 GLSL 2 11 2 0 9 FORTRAN Legacy 1 0 0 0 0 -------------------------------------------------------------------------------- Total 19977 2202608 297026 292934 1612648 --------------------------------------------------------------------------------
sdfjkl 9y ago
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 handler for retries, or no error handler at all, or moronic timeouts (either far too long or far too short).
- vincnetas 9y ago
  Just tested that :) Clean load 22 requests, 1.1 MB 38sec vs 6 requests 48.8 KB 4sec
  - zingmars 9y ago
    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.
    - emteycz 9y ago
      Nah, it's just poorly done.
- toomanybeersies 9y ago
  I also spend a lot of time on terrible internet connections, it really makes you realise how poorly optimised some websites are. HN is one of the few websites that consistently loads properly for me.
  - sdfjkl 9y ago
    I'm guessing nobody tests for this, because everyone develops on fast, reliable internet connections and it's not super easy to simulate, although there are tools, dummynet probably being one of the oldest: https://gamedev.stackexchange.com/questions/61483/how-can-i-simulate-a-bad-internet-connection-for-testing-purposes https://gamedev.stackexchange.com/questions/61483/how-can-i-...
jbreckmckye 9y ago
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 very small, very simple sites are pulling in solutions entirely unsuited to their scale of problems. They think they are being careful and investing in an insurance against rapid expansion, but what they're actually doing is overspending on the wrong investments, making things expensive that don't need to be expensive, and betting against agility. This seems like a mistake. I encounter too many teams who are building web applications by bunding a cornucopia of technologies they don't understand and allow "best practice" examples on GitHub and Medium to do their decision-making for them. They disengage critically from their technology choices, which has the short term benefit of getting them moving faster, but the long term cost of never developing their research and evaluation skills. This is not your fault, of course. People always want a silver bullet, a framework prefabricated and ready for drop-in domain code. And to be fair, most websites are very like each other. I just wish software developers chose their tech a little more critically.
- techaddict009 9y ago
  This is exactly what I feel. I get heavy request to build projects in React where their use case is pretty simple even wordpress can suffice.
  - SirHound 9y ago
    Unless you're using a pre-made template I don't see how a WordPress installation is any simpler than an SSR React site.
    - Cthulhu_ 9y ago
      Works out of the box, install or get a WP site and you're done. SSR React site implies doing development and hosting yourself.
nikolasburk 9y ago
This technology stack really feels like the future, awesome work! React & GraphQL go so well together, I love Relay's and Apollo's approaches to couple the data requirements of a component with the component itself! This is such an awesome workflow for working with an API. Also, a shameless plug: If you want to get started with GraphQL, check out https://www.howtographql.com https://www.howtographql.com. There's a basic introduction to GraphQL and many hands-on tutorials, e.g. for React with Apollo or Relay (including videos).
crispinb 9y ago
There are some oddly bad tempered responses here. The readme doesn’t suggest it’s necessarily the best way to implement HN. It’s not an opinion piece. It just lists a bunch of commonly used libraries, and documents rather nicely how to put them together. I can see some value in describing alternative or better ways to do what this web app does, or of critiquing the particular way the components are used. But rants about hating the js ecosystem or this HN implementation just makes it seem like you’ve had a horrible day at work. OK if that’s the case, we’re sorry. Go out for a run or a drink.
elnygren 9y ago
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" or framework to just quickly use. You'll also lose a lot of control over your queries which was a big reason for me to move from Django/Rails/etc. style tools to trying out GraphQL. This project seems to avoid databases entirely and it seems to have an N+1 queries problem when fetching comments. Each comment is fetched with a separate API call and a single HN Post can easily have hundreds of comments... even if cached, this is a problem. The SQL "WHERE IN (list of IDs)" query combined with smart caching and batching (see: Dataloader by Facebook, JoinMonster) is a decent solution but requires some amount of good old manual work. tldr; GraphQL is nice but has its own set of problems. Still no magic bullets.
- arianvanp 9y ago
  Can't you translate GraphQL queries to Joinmonster/Dataloader/Haxl calls? It's up to the implementor of the GraphQL <-> backends layer to build these optimisations, and you could reuse those libraries for that. Haxl seems particularly suited for this (I think it's the same thing as Dataloader, both from facebook?) as it can efficiently batch and cache queries to multiple sources at the same time. It seems like a good layer between GraphQL and your N data sources.
  - elnygren 9y ago
    It's certainly doable and has been done. However, it's not as pretty as the rest of GraphQL and there's still a lot of work to be done. And comparing to something like Django/Rails - there's a lot more DIY involved.
- aocvr 9y ago
  > You'll also lose a lot of control over your queries which was a big reason for me to move from Django/Rails/etc. style tools to trying out GraphQL. For restricting queries, an option is using persisted queries (e.g. https://dev-blog.apollodata.com/persisted-graphql-queries-with-apollo-client-119fd7e6bba5 https://dev-blog.apollodata.com/persisted-graphql-queries-wi...). The idea is nice, having full control in development while locking down allowed queries in production. You'd still have to deal with the problems you mentioned in development, some of which are indeed a little ugly (at least currently).
nnd 9y ago
Cool thing about Apollo is that it automatically generates and manages data models based in graphologists schema for you, including caching. Has anyone used their iOS client with production apps?
docteurklein 9y ago
all that for only an additional 1MB, 16 http requests, 1.4sec!
maktouch 9y ago
I really like the Apollo stack, but if you're thinking of using it in production right now, you should wait a little! There's a massive bug where if your graphql outputs 1 small error, the whole component does not get loaded. Imagine a components that lists a bunch of items. If 19 returned correctly but 1 has an error, the "data" prop doesn't get passed, all you receive back is the error prop. It's pretty shitty for that. https://github.com/apollographql/react-apollo/issues/1112 https://github.com/apollographql/react-apollo/issues/1112 Learned this the hard way :(
- jcun4128 9y ago
  Do you know which one is bad? Then requery and exclude the bad one?
  - throwaway2016a 9y ago
    Meanwhile the top comment is saying exactly what I was trying to say and got upvoted... I obviously didn't articulate myself well.
  - maktouch 9y ago
    The kind of query where it fails (and where it especially hurts) is queries like `getLatestNotifications`. It would be a lot of cruft added to prevent this kind of bugs. So, yes, you know which one is bad, but it's not a query that's failing, it's something inside the result.
github-cat 9y ago
Excellent. So we can submit links there as well? Actually here is another one which collects HN data but presented in another manner(It uses AngularJS for quick modelling). http://www.pxlet.com/ http://www.pxlet.com/
akerro 9y ago
For me that live demo website is 40x slower than news.ycombinator... I'll stay here with vanillaJS.
petetnt 9y ago
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).
toddmorey 9y ago
I understand that HN is a popular web property, but these projects humor me because Hacker News is probably the worst example of something to be improved / accelerated by these Javascript technologies. Best examples are pages with complex & persistent state (like a chat window open on Facebook as you navigate around).
room271 9y ago
One of the things that interests me about client-side approaches like this is performance as perceived by the user. Even though I suspect the times taken between real hacker news and the clone to load comments are similar, real HN feels a lot faster because the page only loads once the content is ready, rather than loading the page skeleton and then blinking the actual content when loaded.
tycho01 9y ago
This seems like a great candidate to add to HNPWA. :)
sorenbs 9y ago
Hacker News is a really nice example when learning a new technology. It's simple enough that you spend very little time explaining the domain but complex enough that you can demonstrate how to deal with some of the more thorny issues that the technology is designed to address. https://www.howtographql.com/ https://www.howtographql.com/ is a very comprehensive tutorial demonstrating how to use GraphQL with different frontend (Vue, Ember, React) and backend (js, java, elixir, python, ruby, graphcool) technologies. The end result is not as feature-complete as this entry though as the main focus is on learning the technologies.
rthomas6 9y ago
As someone who is trying to learn modern web development, things like this make me feel overwhelmed. So many tools to learn and integrate! Why these tools over other ones? So many tools to choose from on every level of the stack! What the hell is the "right way" to build a web app nowadays? That's what I want to learn. I've figured out how to put up a static page pretty well, but this is so different. Is this site what is best practice now? Or is it one of many choices?
- btbuildem 9y ago
  OP is a good example of what not to do. Overcomplicated, over-engineered, using tech for the sake of using it. Take what you like, leave the rest, that's probably the "right way" to build a web app.
ericfrederich 9y ago
How did the web get so complicated. Just look at that diagram. Separation of concerns went right out the window didn't it? I'd like to see Hacker News Clone Using 300 lines of server-side Python code that works on browsers without JavaScript
z3t4 9y ago
Reminds me of this commercial? video of a speed suit? on ice, with rocket engine, attached to a turtle? Anyone know what I'm referring to ? Edit: Found this: https://www.youtube.com/watch?v=h16qMJ_LCyg https://www.youtube.com/watch?v=h16qMJ_LCyg
rubyfan 9y ago
I am really not a fan of the delay in loading the comments for a story.
rubyfan 9y ago
I understand this has a certain cool factor but I have to wonder why we need all of this over simpler approaches like server side rendering and templates.

418 points by alana99 9y ago

throwaway2016a 9y ago

While I don't want to belittle this accomplishment. The magic of Hacker News is the community that is on it. As a piece of technology NH isn't all that impressive. This kind of feels a little over-engineered. Edit: To downvoters, care to explain why I am wrong? The project is extremely well done. It is impressive in its documentation and execution. But in the real world done, launched, and with traction is more important than being well engineered. The existing implementations of upvote style sites work just fine. When Digg.com -- one of the first upvote style boards to go mainstream -- launched in 2004 dozens of copy cats came up. Few succeeded. Why? Community. Also, we are moving away from the decentralized web, unfortunately. For instance, few people run their own Wordpress blog now. Most use Blogger or Medium. I don't see how projects like this fit in in that world. Now, if rather than be a HN clone he added the ability for people to create and moderate their own boards. That would get my upvote.

scottmf 9y ago
You’re being downvoted for completely missing the point of the project.

hartror 9y ago

Impressive first load w/ < 1 sec to first render! The 400kb app.js takes ~10 sec to load on my connection but the page is functional during that time which is nice. Is this served from a CDN? Great job putting together a robust example application.

clintonwoo 9y ago
Nothing is being served on a CDN, nor even being cached. It's just a demo running on Google Cloud with Kubernetes/Docker.
- bdcravens 9y ago
  Doesn't it cache the HN API results in memory however? You literally have a function called seedCache() :-)
  - clintonwoo 9y ago
    Yes that's true but the page doesn't get cached so in that regard there's still lots of room for real world performance improvements :)
mike-cardwell 9y ago
That's because it's a NextJS app, so comes with SSR for free and works if you disable JS.

kuschku 9y ago

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.

sillysaurus3 9y ago
significantly faster than the real HN. Proof? :)
dcousens 9y ago
Opposite experience here. Near 4-5x slower than actual HN for me.
- arikr 9y ago
  What browser / internet speed / other diagnostics info?
lucasmullens 9y ago
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.
- deleted 9y ago
  [deleted]
- scottmf 9y ago
  Which makes for a better user experience. What’s your point?
  - sillysaurus3 9y ago
    Not really. Most of the point of HN is to navigate to it and then away from it (to other sites).
    - 9y ago

nodesocket 9y ago

Awesome job. This is not a knock on JavaScript in particular, but the amount of brain bandwidth and dependencies to launch a modern web app is getting a bit absurd. I'm turning into that old grumpy hacker who prefers the simple good ole' days of LAMP. :-) React - (UI Framework) GraphQL - (Web Data API) Apollo - (GraphQL Client) Next - (Routing, SSR, Hot Module Reloading, Code Splitting, Build tool uses Webpack) Redux - (State Management) Node.js - (Web Server) Express - (Web App Server) Passport - (Authentication) Babel - (JS Transpiling) Flow - (Static Types) ESLint - (JS Best Practices/Code Highlighting) Jest - (Tests) Yarn Package Manager - (Better Dependencies) Docker - (Container Deployment)

wishinghand 9y ago
The length of that is the same as doing it in any other language, it's just that the ways to do it aren't built into the language. You could eschew a lot of these things, but you'd just end up building them yourself. Flow? Unfortunate that it's a separate thing but it gets types which will relieve most programmers. Yarn? .NET has Nuget, Ruby has Gem, Go has dep, etc. Passport? I sure as hell don't want to do authentication all on my own. Jest? I mean, you don't have to test but everyone should.
colordrops 9y ago
Definitely a lot of stuff going on. I take that as a sign of maturity rather than a problem. It's not really any different from C++ or Java or Python. You've got to learn all the frameworks and tooling as well. There's an equivalent for many of those packages in other languages.
ng12 9y ago
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.
- Touche 9y ago
  news.ycombinator.com which is faster and has 0 js deps.

Caveman_Coder 9y ago

Duplicate of the following... - https://news.ycombinator.com/item?id=15297922 https://news.ycombinator.com/item?id=15297922 - https://news.ycombinator.com/item?id=15134949 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.

hellofunk 9y ago
> Not sure why my comment is being downvoted Because of the following reasons: 1) There's the subtle implication in comments like yours that this posting is not worthy because it was posted before. 2) It doesn't matter. Stuff is re-posted all the time, sometimes simultaneously. That's just the way the web works. 3) It's not your job to moderate or research this site for others.
- pandler 9y ago
  Tbh I upvote these comments all the time because it's interesting to follow the previous threads. The only differentlce with this comment and others is that they said "duplicate of:" instead of "previous discussion:". I understand the subtle difference between the two deliveries, but I wouldn't be so dismissive.
- rixed 9y ago
  I, for one, appreciate when some link historian goes out of his way to fight online amnesia.
  - et-al 9y ago
    Online amnesia seems to be a problem with the design of karma-based forums. I used frequent a London bike forum where folks were notorious for answering common questions with "UTFS" (use the fucking search). It was refreshing to be among more "responsible" forum folks.
- kreetx 9y ago
  I can't really agree on any of the given reasons. re 1) The assumed unworthiness is reading to much into it. Plenty of people point out previous posts. These are both good to read previous comments, and also to assess the spamminess of the post/poster -- how much this is so is up to the readers themselves to decide. I'm glad if someone has done the research for me already. re 2) Does matter, see previous. re 3) HN is a public forum, not a workplace.

chdsbd 9y ago

I can't seem to collapse comments on the site.

bastijn 9y ago
+1 for ios. In addition, it feels slower than regular HN. No actual benchmarks though. Checking https://github.com/clintonwoo/hackernews-react-graphql/blob/master/src/components/presentational/Comment.js https://github.com/clintonwoo/hackernews-react-graphql/blob/... it might be on purpose though. Toggle code is commented.

arikr 9y ago

Really well done, and thanks for sharing on HN + sharing the source code. Very kind of you!

dsego 9y ago

I don't know, it feels slower than the original, because when you click on comments, it first loads an empty page and the actual content loads 1-2 secs later, which looks very jarring.

nodesocket 9y ago
Agree. A bit dissatisfactory, but totally useable loading comment pages; especially on posts that have > 200 comments. See example: http://www.hnclone.win/item?id=15342486 http://www.hnclone.win/item?id=15342486

reacthate 9y ago

Hey, so, uh... all you need to clone HN is Postgres and some HTML/CSS and a smidgen of JavaScript. Good God, must we pull in the entire JavaScript ecosystem for a simple forum now?

reacthate 9y ago
This is why the JS community is so fucked. They take what should be a simple website and needlessly complicate it by (poorly) reimplementing what web browsers can already do.
- mcgarnagle 9y ago
  I'm on the fence for this one. While I completely agree that the JS community is as you say "fucked." There are so many fast moving framework redesigns that make for huge incompatibilities during these paradigm shifts. Super annoying community. However, I love the advantage of exchanging the most minimal amount of data between a browser and the server for each additional page load (ie: JSON response).
- scottmf 9y ago
  You’ve completely missed the point.
  - reacthate 9y ago
    I would consider that a win, personally.
- deleted 9y ago
  [deleted]
- npolet 9y ago
  This really isn't why the JavaScript community is fucked. It's just a reference project for others to learn from. The spreading of information and ideas through code doesn't mean anyone's fucked. Why fucked? Are you reading into the fact that it's a young ecosystem with a turbulent flow at the moment? JS is just finding its groove. It's an always developing language that has the difficult job of being the language that runs on a fuck load of systems, within the enormities of the internet.

squillful 9y ago

I think this is really nicely done. It's probably a little over-engineered for a project of this size, but it shows the power of using all of these libraries together, and I'm sure it was a great learning experience. Does anyone know what tool was used to generate the system architecture diagram? It's really clean and clear - https://github.com/clintonwoo/hackernews-react-graphql#architecture-overview https://github.com/clintonwoo/hackernews-react-graphql#archi...

clintonwoo 9y ago
It's using the magic of Google Slides if you can believe it. They have a lot of nice information modeling shapes.
mike-cardwell 9y ago
Sentence 2 on the front page: "It is intended to be an example or boilerplate to help you structure your projects using production-ready technologies." He could have used less tech, but then the project wouldn't have served it's purpose.
- dullgiulio 9y ago
  Assuming that boilerplate is indeed necessary. Many comments point out exactly that: this very page shows that the boilerplate for a really fast page is just the opened and closed html tag.

computerex 9y ago

The reply functionality seems to be a bit broken. Currently when I try to reply to someone using the clone it replies to a totally irrelevant post..

sheeshkebab 9y ago

nice, but slow(er) than the original for comments > 50. The original is 2x faster than this clone, for that.

chrisco255 9y ago

The way in which Apollo + GraphQL + React work together is just awesome sauce. I love that you can simply declare your data dependencies with a GraphQL query string and Apollo just fetches, wires up and injects the data into your component. I had the pleasure of using this stack for a project once. The speed at which you can move once you have the stack in place and a full grasp of it is pretty mind blowing.

scottmf 9y ago
Completely agree. People complain about the state of web dev but we’ve honestly never had it so good.
mlsarecmg 9y ago
Do you know a good learning resource that got you there? Esp. Apollo and GraphQl. I feel a little overwhelmed, similar to how i felt when i encountered flux/redux the first time. I figured it was easier than i thought after a while, but the first step was hard.

cdata 9y ago

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 IMO they are not worth the general performance cost weighed by hundreds of kilobytes of JS abstractions.

IncRnd 9y ago
Are you saying that you put your regular hacker news credentials into this system?
- nodesocket 9y ago
  Yah don't put your credentials into this. Tisk tisk. If you did, change your HN password.
- AFNobody 9y ago
  http://www.hnclone.win/login http://www.hnclone.win/login If you try to create an account you get an internal server error. I assume that is what the OP means.
- cdata 9y ago
  No, that's not what I'm saying.
marksomnian 9y ago
Could probably do with some code splitting.
- mike-cardwell 9y ago
  It's a NextJS app. NextJS handles code splitting for you automatically. Or maybe I misunderstood what you meant? [edit] In fact, in the README at the root of the project: "Next - (Routing, SSR, Hot Module Reloading, Code Splitting, Build tool uses Webpack)"

pippy 9y ago

I went down the path of learning Relay instead of Apollo. I'm regretting this decision. Relay is too restrictive, and the relay compiler is far too sensitive for most server side endpoints.

clintonwoo 9y ago
What put the nail in the coffin to Relay for me was watching a talk by the dev team where they said they don't want to create proper documentation because they feel like that's creating a contract with the community to support the API. It's somewhere on YouTube sorry I can't find it now.
Rodeoclash 9y ago
Interesting. I've worked with Relay almost since its release, more recently on the modern branch, and haven't run into anything that's been too restrictive. You have an element of thinking about things in "Relay" terms (in the sense of how to structure them) but once you've figured that it then things just work (TM). I'm curious about the second part of your statement, the compiler being too sensitive for your server side endpoints, can you elaborate on that a bit?
- pippy 9y ago
  Sure. The first issue I came across was that the relay compiler expects a strict specification when mutating data, one that wasn't compatible with the server library I was using. Expect to write your own server side scaffolder to get around this. The second big issue was that relay modern decoupled the networking logic, so having a series of chained queries is something you either have to handle yourself or write your own networking logic for. And because creating dynamic queries can't be done with relay it's a bit annoying that this logic isn't handled automatically for you. My biggest gripe happens to be the lack of flexibility around dynamic queries. You can't define the data you want back at run time, which feels defeats a major point of GraphQL. Apollo supports dynamic queries with higher-order components. It might be a case of the grass looks greener on the other side, but I felt as soon as you try to do something bigger than a todo app with Relay you start to feel the restrictions.

kccqzy 9y ago

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.

leeoniya 9y ago
the hn api could be to blame for the slow i/o: https://github.com/HackerNews/API#design https://github.com/HackerNews/API#design
- weego 9y ago
  Or the enormous over engineering

whalesalad 9y ago

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 on a cache feels like a hack. I really love React but really dislike the way I see it being used these days. I think of it as a polyfill for a UI component that should be stateless and free of side effects. Not an end to end controller/fetcher/renderer.

whitefish 9y ago
So basically you prefer something more along the lines of Model View Controller. Me too. When React was first released it was advertised as “the ‘V’ in MVC”. Unfortunately the developer community took it in a different direction.
- abritinthebay 9y ago
  How so? It still is exactly that. You can add additional layers/groupings/couplings but that isn't React doing that...
altano 9y ago
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 need common data? Relying on a cache feels like a hack. When declaring what data you rely on is as simple as a GraphQL query, it's basically like declaring what data goes in your component. It's NOT like building ORM layers directly into your UI components.
- nevir 9y ago
  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

gustoguy28 9y ago

Is there a wordpress theme which is similar to HN ? Upvote and others out there have pretty bad UI. Willing to pay for such a theme.

zaroth 9y ago

The real link: http://www.hnclone.win/ http://www.hnclone.win/ Fantastic resource! The key point of this is it provides working example code to start a project from. Everything is MIT Licensed so that means you get to download it and just start hacking. I would love to see some accompanying video tutorials! Of course people are also free to post their own examples using their own favorite technologies. I would love for 'HN Clone' to become a benchmarking standard for comparing stacks. It seems like a bit too much work for such a purpose, but that's the point! :-) I don't think authentication is actually working in the demo, by the way. Don't be tempted to actually log in to your own account! But I tried creating a new account and it failed.

ythn 9y ago
> Everything is MIT Licensed Besides GraphQL you mean
- turdnagel 9y ago
  Facebook switched it over to MIT last week (along with React): https://github.com/graphql/graphql-js/blob/master/LICENSE https://github.com/graphql/graphql-js/blob/master/LICENSE
  - ythn 9y ago
    Ah, well, not the C++ version, it seems (which is the one I use): https://github.com/graphql/libgraphqlparser/blob/master/PATENTS https://github.com/graphql/libgraphqlparser/blob/master/PATE...

ryanmarsh 9y ago

Question: I see that redux is advertised for state management but I don’t see any calls to dispatch or import statements for redux. Is redux actually used in this project?

mike-cardwell 9y ago
He is not explicitly using Redux anywhere in this project. Although he is using Apollo, which internally uses Redux. I don't think it should be on the list.

earlybike 9y ago

Regarding SEO: Would the comment pages be indexed? Does anyone has experiences with this? Besides, the comments folding does not work (tested on iOS).

hasenj 9y ago

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.

clintonwoo 9y ago
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.
- hasenj 9y ago
  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.
10-6 9y ago
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-components-at-once-19580acd86f3 https://medium.com/behind-the-screens/dont-load-all-your-web...
- hellofunk 9y ago
  Are you sure it is not due to the fetching of content form the server rather than the UI synchronicity? I'm quite certain it is just latency for the download. The components might be fetching that data during their mounting if the architecture was set up that way, but the actual mounting shouldn't be the cause; React's UI is much faster than latency caused by that alone. It would be better if the components showed a waiting indicator during the download, if the components are responsible for the download. Alternately, the page itself could show that loader before mounting its sub components. Actually, there are many "alternately"s because frankly this site's approach isn't ideal.

partycoder 9y ago

I think it is not so hard to achieve something similar to HN. I think the added value of HN is: - Algorithm used to rank news - Community and culture

grey-area 9y ago
The algorithm is pretty simple - points from votes or flags, but weighted by time, so that new stuff floats to the top for a while. You can use a remarkably simple version of it and it's still very effective. I agree the community (with all its flaws) is far more important than any tech used.
true_religion 9y ago
The algorithm used to rank news is openly known, just like Reddit's... anyone can copy it.

md224 9y ago

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?

velmu 9y ago
Is like to see this as well, because I like core decisions and the boilerplate side by a framework. I've done some exploration here. Next.js is a framework that does roughly all of this, except it's currently missing (or not making) decisions for you regarding GraphQL as a data layer. More information here: https://malloc.fi/building-decoupled-sites-and-apps-with-graphql-and-next-js https://malloc.fi/building-decoupled-sites-and-apps-with-gra... For a fully integrated GraphQL option I looked into Gatsby.js, which started out as a static site generator. It is still this at it's core, but the move for GraphQL for everything seems like a good move: https://react-etc.net/entry/gatsby-is-a-static-site-generator-using-react-and-graphql https://react-etc.net/entry/gatsby-is-a-static-site-generato...
sgdesign 9y ago
We're trying with http://vulcanjs.org http://vulcanjs.org

drej 9y ago

1) npm install added 1226 packages in 52.23s 2) $ ls -l node_modules/ | wc -l 900 3) $ du -h node_modules/ 180M node_modules/ 4) Few people care what your web app is built with. Your differentiating feature should be how it's used, not how its put together. In this case, it works exactly like the original, just with different internals. I don't see the point.

drej 9y ago
`npm install` pulls 1.6M SLOC. That's a little bit less than V8 itself. $ loc node_modules/ -------------------------------------------------------------------------------- Language Files Lines Blank Comment Code -------------------------------------------------------------------------------- JavaScript 15594 1681330 215398 283955 1181977 Markdown 1831 246795 70260 0 176535 JSON 1602 167050 936 0 166114 HTML 86 37383 2511 18 34854 TypeScript 289 26943 2895 5929 18119 Jsx 19 11072 1190 587 9295 XML 14 6533 466 4 6063 C/C++ Header 21 7103 1126 403 5574 YAML 280 4697 199 166 4332 Makefile 69 3611 733 844 2034 C 4 2219 271 291 1657 CSS 19 1428 84 34 1310 Plain Text 81 1412 285 0 1127 CoffeeScript 16 1260 181 106 973 Python 6 926 179 56 691 ActionScript 4 904 89 227 588 Autoconf 2 778 70 256 452 C++ 7 423 70 36 317 Handlebars 6 262 30 0 232 Bourne Shell 13 213 27 22 164 OCaml 1 156 23 0 133 D 6 69 0 0 69 Batch 2 18 1 0 17 Lisp 2 12 0 0 12 GLSL 2 11 2 0 9 FORTRAN Legacy 1 0 0 0 0 -------------------------------------------------------------------------------- Total 19977 2202608 297026 292934 1612648 --------------------------------------------------------------------------------

sdfjkl 9y ago

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 handler for retries, or no error handler at all, or moronic timeouts (either far too long or far too short).

vincnetas 9y ago
Just tested that :) Clean load 22 requests, 1.1 MB 38sec vs 6 requests 48.8 KB 4sec
- zingmars 9y ago
  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.
  - emteycz 9y ago
    Nah, it's just poorly done.
toomanybeersies 9y ago
I also spend a lot of time on terrible internet connections, it really makes you realise how poorly optimised some websites are. HN is one of the few websites that consistently loads properly for me.
- sdfjkl 9y ago
  I'm guessing nobody tests for this, because everyone develops on fast, reliable internet connections and it's not super easy to simulate, although there are tools, dummynet probably being one of the oldest: https://gamedev.stackexchange.com/questions/61483/how-can-i-simulate-a-bad-internet-connection-for-testing-purposes https://gamedev.stackexchange.com/questions/61483/how-can-i-...

jbreckmckye 9y ago

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 very small, very simple sites are pulling in solutions entirely unsuited to their scale of problems. They think they are being careful and investing in an insurance against rapid expansion, but what they're actually doing is overspending on the wrong investments, making things expensive that don't need to be expensive, and betting against agility. This seems like a mistake. I encounter too many teams who are building web applications by bunding a cornucopia of technologies they don't understand and allow "best practice" examples on GitHub and Medium to do their decision-making for them. They disengage critically from their technology choices, which has the short term benefit of getting them moving faster, but the long term cost of never developing their research and evaluation skills. This is not your fault, of course. People always want a silver bullet, a framework prefabricated and ready for drop-in domain code. And to be fair, most websites are very like each other. I just wish software developers chose their tech a little more critically.

techaddict009 9y ago
This is exactly what I feel. I get heavy request to build projects in React where their use case is pretty simple even wordpress can suffice.
- SirHound 9y ago
  Unless you're using a pre-made template I don't see how a WordPress installation is any simpler than an SSR React site.
  - Cthulhu_ 9y ago
    Works out of the box, install or get a WP site and you're done. SSR React site implies doing development and hosting yourself.

nikolasburk 9y ago

This technology stack really feels like the future, awesome work! React & GraphQL go so well together, I love Relay's and Apollo's approaches to couple the data requirements of a component with the component itself! This is such an awesome workflow for working with an API. Also, a shameless plug: If you want to get started with GraphQL, check out https://www.howtographql.com https://www.howtographql.com. There's a basic introduction to GraphQL and many hands-on tutorials, e.g. for React with Apollo or Relay (including videos).

crispinb 9y ago

There are some oddly bad tempered responses here. The readme doesn’t suggest it’s necessarily the best way to implement HN. It’s not an opinion piece. It just lists a bunch of commonly used libraries, and documents rather nicely how to put them together. I can see some value in describing alternative or better ways to do what this web app does, or of critiquing the particular way the components are used. But rants about hating the js ecosystem or this HN implementation just makes it seem like you’ve had a horrible day at work. OK if that’s the case, we’re sorry. Go out for a run or a drink.

elnygren 9y ago

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" or framework to just quickly use. You'll also lose a lot of control over your queries which was a big reason for me to move from Django/Rails/etc. style tools to trying out GraphQL. This project seems to avoid databases entirely and it seems to have an N+1 queries problem when fetching comments. Each comment is fetched with a separate API call and a single HN Post can easily have hundreds of comments... even if cached, this is a problem. The SQL "WHERE IN (list of IDs)" query combined with smart caching and batching (see: Dataloader by Facebook, JoinMonster) is a decent solution but requires some amount of good old manual work. tldr; GraphQL is nice but has its own set of problems. Still no magic bullets.

arianvanp 9y ago
Can't you translate GraphQL queries to Joinmonster/Dataloader/Haxl calls? It's up to the implementor of the GraphQL <-> backends layer to build these optimisations, and you could reuse those libraries for that. Haxl seems particularly suited for this (I think it's the same thing as Dataloader, both from facebook?) as it can efficiently batch and cache queries to multiple sources at the same time. It seems like a good layer between GraphQL and your N data sources.
- elnygren 9y ago
  It's certainly doable and has been done. However, it's not as pretty as the rest of GraphQL and there's still a lot of work to be done. And comparing to something like Django/Rails - there's a lot more DIY involved.
aocvr 9y ago
> You'll also lose a lot of control over your queries which was a big reason for me to move from Django/Rails/etc. style tools to trying out GraphQL. For restricting queries, an option is using persisted queries (e.g. https://dev-blog.apollodata.com/persisted-graphql-queries-with-apollo-client-119fd7e6bba5 https://dev-blog.apollodata.com/persisted-graphql-queries-wi...). The idea is nice, having full control in development while locking down allowed queries in production. You'd still have to deal with the problems you mentioned in development, some of which are indeed a little ugly (at least currently).

nnd 9y ago

Cool thing about Apollo is that it automatically generates and manages data models based in graphologists schema for you, including caching. Has anyone used their iOS client with production apps?

docteurklein 9y ago

all that for only an additional 1MB, 16 http requests, 1.4sec!

maktouch 9y ago

I really like the Apollo stack, but if you're thinking of using it in production right now, you should wait a little! There's a massive bug where if your graphql outputs 1 small error, the whole component does not get loaded. Imagine a components that lists a bunch of items. If 19 returned correctly but 1 has an error, the "data" prop doesn't get passed, all you receive back is the error prop. It's pretty shitty for that. https://github.com/apollographql/react-apollo/issues/1112 https://github.com/apollographql/react-apollo/issues/1112 Learned this the hard way :(

jcun4128 9y ago
Do you know which one is bad? Then requery and exclude the bad one?
- throwaway2016a 9y ago
  Meanwhile the top comment is saying exactly what I was trying to say and got upvoted... I obviously didn't articulate myself well.
- maktouch 9y ago
  The kind of query where it fails (and where it especially hurts) is queries like `getLatestNotifications`. It would be a lot of cruft added to prevent this kind of bugs. So, yes, you know which one is bad, but it's not a query that's failing, it's something inside the result.

github-cat 9y ago

Excellent. So we can submit links there as well? Actually here is another one which collects HN data but presented in another manner(It uses AngularJS for quick modelling). http://www.pxlet.com/ http://www.pxlet.com/

akerro 9y ago

For me that live demo website is 40x slower than news.ycombinator... I'll stay here with vanillaJS.

petetnt 9y ago

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

toddmorey 9y ago

I understand that HN is a popular web property, but these projects humor me because Hacker News is probably the worst example of something to be improved / accelerated by these Javascript technologies. Best examples are pages with complex & persistent state (like a chat window open on Facebook as you navigate around).

room271 9y ago

One of the things that interests me about client-side approaches like this is performance as perceived by the user. Even though I suspect the times taken between real hacker news and the clone to load comments are similar, real HN feels a lot faster because the page only loads once the content is ready, rather than loading the page skeleton and then blinking the actual content when loaded.

tycho01 9y ago

This seems like a great candidate to add to HNPWA. :)

sorenbs 9y ago

Hacker News is a really nice example when learning a new technology. It's simple enough that you spend very little time explaining the domain but complex enough that you can demonstrate how to deal with some of the more thorny issues that the technology is designed to address. https://www.howtographql.com/ https://www.howtographql.com/ is a very comprehensive tutorial demonstrating how to use GraphQL with different frontend (Vue, Ember, React) and backend (js, java, elixir, python, ruby, graphcool) technologies. The end result is not as feature-complete as this entry though as the main focus is on learning the technologies.

rthomas6 9y ago

As someone who is trying to learn modern web development, things like this make me feel overwhelmed. So many tools to learn and integrate! Why these tools over other ones? So many tools to choose from on every level of the stack! What the hell is the "right way" to build a web app nowadays? That's what I want to learn. I've figured out how to put up a static page pretty well, but this is so different. Is this site what is best practice now? Or is it one of many choices?

btbuildem 9y ago
OP is a good example of what not to do. Overcomplicated, over-engineered, using tech for the sake of using it. Take what you like, leave the rest, that's probably the "right way" to build a web app.

ericfrederich 9y ago

How did the web get so complicated. Just look at that diagram. Separation of concerns went right out the window didn't it? I'd like to see Hacker News Clone Using 300 lines of server-side Python code that works on browsers without JavaScript

z3t4 9y ago

Reminds me of this commercial? video of a speed suit? on ice, with rocket engine, attached to a turtle? Anyone know what I'm referring to ? Edit: Found this: https://www.youtube.com/watch?v=h16qMJ_LCyg https://www.youtube.com/watch?v=h16qMJ_LCyg

rubyfan 9y ago

I am really not a fan of the delay in loading the comments for a story.

rubyfan 9y ago

I understand this has a certain cool factor but I have to wonder why we need all of this over simpler approaches like server side rendering and templates.