Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB • Hacker News Board

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#31

Post by cj » Mon, Sep 28, 2020, 4:53 PM UTC

desmondl wrote: post #29

grawprog wrote: post #11

I can't help but feel like this article is a good summary of what's wrong with the modern internet. It's not a bad article, it just feels like a parody. 'Ok guys, now here's the modern way to make one of the more simple things from yesteryear. First, lets bust out react.... A few hundred loc later... Ok guys the database... Sign up for account Several more hundred loc later... 'Now to actually write our functions' Do…

I understand where you're coming from, but I'm going to play devil's advocate and think through everything that needs to be considered for a simple, "back in the day" solution that involves apache, php, and a mysql database: 1. Provisioning the server, either via VPS or setting it up on your local machine and exposing port 443. 2. Installing Apache on your operating system 3. Installing a cert, getting it signed by a…

Your point is valid, but only in cases where you don’t already have everything you listed set up.

I think the OP’s comment was coming from a perspective of someone adding a hit counter to an app that already has app servers, etc, already in place.

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#32

Post by oefrha » Mon, Sep 28, 2020, 4:58 PM UTC

joshwcomeau wrote: post #30

oefrha wrote: post #27

Earlier quoted context omitted.

> ... it means the page doesn’t need to be server-rendered / the user isn’t staring at a white page waiting for the RPC to the database. React-based frontend didn't invent XHR. In the old days you just do $("#hit-count").load("/path/to/hit/count"); Edit: Not saying old hit counters are implemented using XHR.

Really??? Who knew My point is that my example is complex because some client-side code is necessary. The snippet you shared is nice pseudo-code but a real implementation would be comparable in complexity. Either way you need to learn some stuff, and then it’s a few lines of code.

The code snippet is working code (as long as you substitute the correct endpoint), not pseudo code. Unless you meant I didn't add a trivial error handling callback.

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#33

Post by klysm » Mon, Sep 28, 2020, 4:59 PM UTC

Taking a step back, it’s truly insane that it is standard practice to apply this level of complexity to the storage, incrementing, and rendering of a single integer. The number of dependencies involved is surely enormous. Perhaps I am underestimating the complexity of the task at hand, but how is this not like a 2 line flask app or something comparable.

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#34

Post by ticmasta » Mon, Sep 28, 2020, 5:00 PM UTC

Pretty funny that the push towards static serverless has made something you used to get essentially for free on your dynamic client-server app into quite a complex undertaking.

Static compile-time sites are fantastic for a huge swath of applications, but this is a good reminder that you can shift the work around and even come up with better isolated, decoupled approaches but somewhere it still has to get done. Introducing functionality that is dynamic outside the browser and requires state (i.e. persistence) is definitely an area that seems to "fight" the natural inclinations of frameworks like Gatsby et al.

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#35

Post by coffeemaniac » Mon, Sep 28, 2020, 5:09 PM UTC

grawprog wrote: post #11

I can't help but feel like this article is a good summary of what's wrong with the modern internet. It's not a bad article, it just feels like a parody. 'Ok guys, now here's the modern way to make one of the more simple things from yesteryear. First, lets bust out react.... A few hundred loc later... Ok guys the database... Sign up for account Several more hundred loc later... 'Now to actually write our functions' Do…

This is a blog about building static sites with Gatsby. Doesn't feel like the author was endeavoring to do this in the "simplest" way possible, but rather to demonstrate some of the tooling to put dynamic content into an otherwise static site.

Does every other article about serverless technology provoke this kind of ire on HN?

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#36

Post by jrwr » Mon, Sep 28, 2020, 5:12 PM UTC

oefrha wrote: post #27

joshwcomeau wrote: post #23

Earlier quoted context omitted.

This article is meant for folks who already have a static React site, and want to dip their toes into doing some backend stuff. It isn’t really meant to be the simplest way to build a hit counter. That said, I challenge the assumption that this way is _that_ much more complicated. I’ve built similar things with PHP, a long long time ago, and it was a lot of the same pieces. The only part that feels truly more complex…

> ... it means the page doesn’t need to be server-rendered / the user isn’t staring at a white page waiting for the RPC to the database. React-based frontend didn't invent XHR. In the old days you just do $("#hit-count").load("/path/to/hit/count"); Edit: Not saying old hit counters are implemented using XHR.

The old way was really just a image or iframe. It would update on the fly since it was just some perl code in a CGI-BIN writing to a text file

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#37

Post by coffeemaniac » Mon, Sep 28, 2020, 5:15 PM UTC

klysm wrote: post #33

Taking a step back, it’s truly insane that it is standard practice to apply this level of complexity to the storage, incrementing, and rendering of a single integer . The number of dependencies involved is surely enormous. Perhaps I am underestimating the complexity of the task at hand, but how is this not like a 2 line flask app or something comparable.

It could be done in a 2-line flask app. Josh's blog is about building things using Gatsby and the tooling built around the React ecosystem. So he wrote about how to build it with that.

I don't know that I'd call it "standard practice" but it's a programming tradition to demonstrate how to use a set of tools by building something simple with them.

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#38

Post by tyingq » Mon, Sep 28, 2020, 5:20 PM UTC

quotemstr wrote: post #22

schemescape wrote: post #9

> q.Update(document.ref, { data: { hits: document.data.hits + 1, ... Does FaunaDB have an "atomic increment" a la Firestore? Knowing nothing about FaunaDB, I suspect this code in the blog post has the potential to "lose" hits that come in at roughly the same time...

FaunaDB appears to have some kind of transaction support[1], so atomic updates of the sort you mention seem feasible. That said, I'm a huge SQL partisan, and I'd much rather talk to a SQL database than this custom thing. https://docs.fauna.com/fauna/current/concepts/isolation_leve...

I did find an example of an atomic increment in Faunadb. Sometimes SQL is easier :) :

  Update(
    Ref(
        Collection('topics'),
        '254119747652682260'
    ),
    { 
        data: { 
            clickCount: Add(
                Select(
                    ['data','clickCount'],
                    Get(
                        Ref(
                            Collection('topics'),
                            '254119747652682260'
                        )
                    )
                ),
                1
            )
        }
    }
  )

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#39

Post by Royalaid » Mon, Sep 28, 2020, 5:20 PM UTC

prezjordan wrote: post #7

sntran wrote: post #2

I may be missing something here, but... all that for a hit counter? Even using React for the front-end seems overkill for a little widget.

The hit counter is merely an example! I see this blog post as an intro to how-to-connect React up to a hosted database over this fancy serverless paradigm thingy.

And more importantly this is what a lot of people are doing in industry, for better or worse, and so seeing this all laid out together is important IMO.

Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB

#40

Post by oefrha » Mon, Sep 28, 2020, 5:21 PM UTC

jrwr wrote: post #36

oefrha wrote: post #27

Earlier quoted context omitted.

> ... it means the page doesn’t need to be server-rendered / the user isn’t staring at a white page waiting for the RPC to the database. React-based frontend didn't invent XHR. In the old days you just do $("#hit-count").load("/path/to/hit/count"); Edit: Not saying old hit counters are implemented using XHR.

The old way was really just a image or iframe. It would update on the fly since it was just some perl code in a CGI-BIN writing to a text file

I meant the old way to achieve exactly what the React version does.