Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
21–30 of 52 posts
Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#22> 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...
https://docs.fauna.com/fauna/current/concepts/isolation_leve...
Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#23I 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…
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 is the re-render necessary in React, since the data comes in async, but this is hugely beneficial since 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.
Edit: realizing that there are ways to do this in PHP that aren’t blocking, like if you use an image tag that resolves to the right image, but honestly that way seems wayyy more complex to me, especially when factoring in accessibility / screen-reader-friendliness.
Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#24I 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.
Up next, the Angular-powered guestbook in just 10k lines of code.
Then stay tuned for the Go-powered e-card sender in just 50k lines of code.
And then, the Typescript web ring... the cloud... using BespokeDB... and service workers... in WebASM!
Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#25I 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.
Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#26Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#27I 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 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…
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.Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#28Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#29I 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…
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 an authority
4. Installing php, enabling it in apache
5. Installing mysql
At this point you'll have to write your php from scratch or use something like wordpress. Assuming we want to keep it as simple as possible and write php from scratch, you'll want to consider file permissions so your database credentials aren't accidentally leaked.
6. Creating the schema and tables on your database
7. Distributing your site's static content through a CDN
And this doesn't even involve automated deployments, which these services give out of the box.
My point is that a "traditional" approach can appear just as overengineered and convoluted if we want to replicate the scalability, stability and security of solid PaaS services like Vercel and Fauna.
I get that a hit counter is very simple, but I assume the point of this article is to provide a simple "hello world" example that uses these PaaS services, which again, provide a lot of benefits over manually configuring infrastructure.
Re: Build a hit counter for Gatsby with React, AWS Lambda, and FaunaDB
#30Earlier 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.
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.