5 ms·

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

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

oefrha 6y ago
> ... 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 <script>$("#hit-count").load("/path/to/hit/count");</script> Edit: Not saying old hit counters are implemented using XHR.
- joshwcomeau 6y ago
  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.
  - oefrha 6y ago
    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.
    - evan_ 6y ago
      it's jquery[0], so this is only the "old days" if 2006 was the "old days" for you (which obviously for many it was). Before 2006 you'd probably use XMLHttpRequest directly- but of course that was only widely available in 2004 or 2005. Before that you would have used a hidden frame- or more likely you would use CGI to either replace a directive with the counter, or generate an image with the correct numbers. That's what I would call the "Old days": a dynamically generated gif with bold white-on-black numbers displaying the visit count. [0]: https://api.jquery.com/load/ https://api.jquery.com/load/
      - cxr 6y ago
        > it's jquery[0], so this is only the "old days" if 2006 was the "old days" for you People don't remember so well. Even backdating it that far is too generous. Just as a reference point, on New Year's Day 2006, jQuery didn't even exist yet. There was a time post-2010 when the scourge of jQuery showing up for trivial use cases was considered a real problem and a huge source of bloat on the web. (Side note: it's more than a little annoying, for this reason, to see people when trying to talk about changes in Web developer trends to lump jQuery and vanilla JS together.) To give another reference point, Firefox's then-new Tab Groups feature demanded the creation of a jQuery-like library for handling the tab canvas. John Resig was a longtime friend of the project and one-time Mozilla Corporation employee, but jQuery itself was out of the question because of bloat/performance. That was for Firefox 4, which would have been 2011, since it was released at the end of Q1 that year... There's a lot more concentrated change in the 2010―2015 timeframe than is often accounted for when people think or talk about the Web.
    - joshwcomeau 6y ago
      Ah, I thought “load” was a jQuery plug-in. In that case it’s real code, but it’s only handling the data-fetching; I don’t need React to do that either, but I’d need to generate the hit counter itself (for it to be exactly equivalent, it would need to generate the numbers with SVG as well as add aria labels for screen readers). The only React-specific thing is the useEffect call, which is essentially comparable to window.onLoad.
    - 6y ago
- jrwr 6y ago
  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
  - oefrha 6y ago
    I meant the old way to achieve exactly what the React version does.

oefrha 6y ago

> ... 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 <script>$("#hit-count").load("/path/to/hit/count");</script> Edit: Not saying old hit counters are implemented using XHR.

joshwcomeau 6y ago
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.
- oefrha 6y ago
  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.
  - evan_ 6y ago
    it's jquery[0], so this is only the "old days" if 2006 was the "old days" for you (which obviously for many it was). Before 2006 you'd probably use XMLHttpRequest directly- but of course that was only widely available in 2004 or 2005. Before that you would have used a hidden frame- or more likely you would use CGI to either replace a directive with the counter, or generate an image with the correct numbers. That's what I would call the "Old days": a dynamically generated gif with bold white-on-black numbers displaying the visit count. [0]: https://api.jquery.com/load/ https://api.jquery.com/load/
    - cxr 6y ago
      > it's jquery[0], so this is only the "old days" if 2006 was the "old days" for you People don't remember so well. Even backdating it that far is too generous. Just as a reference point, on New Year's Day 2006, jQuery didn't even exist yet. There was a time post-2010 when the scourge of jQuery showing up for trivial use cases was considered a real problem and a huge source of bloat on the web. (Side note: it's more than a little annoying, for this reason, to see people when trying to talk about changes in Web developer trends to lump jQuery and vanilla JS together.) To give another reference point, Firefox's then-new Tab Groups feature demanded the creation of a jQuery-like library for handling the tab canvas. John Resig was a longtime friend of the project and one-time Mozilla Corporation employee, but jQuery itself was out of the question because of bloat/performance. That was for Firefox 4, which would have been 2011, since it was released at the end of Q1 that year... There's a lot more concentrated change in the 2010―2015 timeframe than is often accounted for when people think or talk about the Web.
  - joshwcomeau 6y ago
    Ah, I thought “load” was a jQuery plug-in. In that case it’s real code, but it’s only handling the data-fetching; I don’t need React to do that either, but I’d need to generate the hit counter itself (for it to be exactly equivalent, it would need to generate the numbers with SVG as well as add aria labels for screen readers). The only React-specific thing is the useEffect call, which is essentially comparable to window.onLoad.
  - 6y ago
jrwr 6y ago
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
- oefrha 6y ago
  I meant the old way to achieve exactly what the React version does.