all that for only an additional 1MB, 16 http requests, 1.4sec!
Hacker News Clone Using GraphQL and React
121–130 of 187 posts
Re: Hacker News Clone Using GraphQL and React
#1221) 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.
`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…
That includes devDependencies, too. A bit like counting lines of GCC/Clang/whatever build tool…
Re: Hacker News Clone Using GraphQL and React
#123I 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 posted a blog post about this, and the first thing someone pointed out is that you can take the ferry to Calais.
That's what you've done.
Re: Hacker News Clone Using GraphQL and React
#124GraphQL 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…
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.
Re: Hacker News Clone Using GraphQL and React
#125Earlier quoted context omitted.
`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…
That includes devDependencies, too. A bit like counting lines of GCC/Clang/whatever build tool…
Given that this is meant to be boilerplate for building apps, it makes sense to install it with devDependencies. However, let's go along and install it with the `--production` flag. It doesn't get much rosier. Close to 1M SLOC.
$ npm install --production
added 718 packages in 36.292s
$ ls -l node_modules/ | wc -l
518
$ loc node_modules/
--------------------------------------------------------------------------------
Language Files Lines Blank Comment Code
--------------------------------------------------------------------------------
JavaScript 11122 1006887 125608 173965 707314
JSON 907 110272 661 0 109611
Markdown 1017 142126 41008 0 101118
TypeScript 279 23007 2381 4870 15756
C/C++ Header 20 6835 1082 319 5434
YAML 178 3140 137 105 2898
XML 2 2192 233 2 1957
Makefile 46 2431 466 612 1353
HTML 18 1280 40 11 1229
CoffeeScript 7 1133 157 86 890
Plain Text 33 505 118 0 387
C++ 7 423 70 36 317
CSS 8 267 26 6 235
Autoconf 1 389 35 128 226
Jsx 8 228 26 14 188
OCaml 1 156 23 0 133
Bourne Shell 5 100 9 12 79
D 6 69 0 0 69
Handlebars 2 50 8 0 42
Lisp 1 6 0 0 6
Batch 1 2 0 0 2
C 1 0 0 0 0
FORTRAN Legacy 1 0 0 0 0
--------------------------------------------------------------------------------
Total 13671 1301498 172088 180166 949244
--------------------------------------------------------------------------------Re: Hacker News Clone Using GraphQL and React
#126GraphQL 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…
> 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-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).
Re: Hacker News Clone Using GraphQL and React
#127I 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
Learned this the hard way :(
Re: Hacker News Clone Using GraphQL and React
#128Excellent. 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/
Re: Hacker News Clone Using GraphQL and React
#129I 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…
Do you know which one is bad? Then requery and exclude the bad one?
Re: Hacker News Clone Using GraphQL and React
#130The 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