Frontend Hype #5 - ChatGPT FE & BE, RSC Drama, From Signals to Hooks, Hono Edge Framework, A Life Engineered
Full Context hype / value analysis for Week 10 - 2023
Hey Full Context Developer,
I love all the cool stuff that I managed to dig up this week and I’m pretty sure you will like it too. 🤞 The most interesting topics bring up serious questions about the value provided by cutting edge tech and I will get to the bottom of some real drama that’s going on on Twitter. As always, from the Full Context Perspective.
Couple of Side Notes
I’m not sure at this point about its worth but the last issue raked in some high profile likes, like from Malte Ubl CTO of Vercel, the same YouTuber Jack Harrington of previous issues, and developers from a couple of big tech companies signed up to the newsletter . THIS IS CRAZY for me! 😵🤩😱
Sorry for messing around with the email sender, newsletter name, etc… It’s early days and I’m trying to figure out the best way to present what I do here. If you have some preference let me know though.
Overview
➡️ ChatGPT got a foothold in writing frontend code, that’s old news by now. I will take a look at the value provided by the current tools built around it. We will explore an even more interesting development, an attempt to replace the whole role of the backend with an LLM like ChatGPT.
➡️ Tech Twitter is as active as ever, churning out interesting discussions. A lot has been going on about RSCs (React Server Components) and SCs in general as other frameworks have already started to adopt the concept. Lots of people voiced a critical opinion. Dan Abramov struggles to clearly explain them. Turns out, there’s a surprising way they can improve the productivity of developers. What are the implications of all of this?
➡️ The article “Were React Hooks a Mistake?“ is making strides and I found it a really valuable read. It sums up the recent discussions of framework authors about signals and then it quickly transitions to the mental models of component types in React. Specifically how class components and function components with hooks differ in fundamental yet often not-understood ways and why that makes Signals all the more attractive for developers.
As a developer using React day to day I took away some very valuable learnings from here!
➡️ A new edge-native router/framework appeared on the radar called Hono (means flame🔥 in Japanese). It entered the same category as tRPC. The best part of it is Hono Stack helping you to build type-safe server-client communication embedded into your favorite frontend framework. (FFF?) But who needs it to begin with?
➡️ I will introduce the A Life Engineered YouTube channel. I don’t want to only talk about the drama and the hot stuff (see what I did there Hono? 😆) so I will show a really good example of something ranking high on the hype & value scale because its value focus. I learned an awful lot from it and so will you if you are not watching it already.
➡️ I’ve found a real hype destroyer💥. The Great Gaslighting of the JS Age is an article that hit too close to home with me. I had very similar thoughts for a while. Give it a read if you want to get deeper insight into how all the fuzz, marketing, and hype around JS frameworks starting around 2010 hurt the wider web ecosystem and to uncover some of its hypocrisies.
➡️ And there’s a bunch of smaller, interesting news at the end.
Let’s jump right into it.
If you are new or just wonder what this “Full Context“ stuff really means, you can read about it in a dedicated post. It takes around 10 minutes to go through so I recommend doing that afterwards.
🔗 The headings below are links to the covered topic 🔗
#1 🤖 ChatGPT for the BE & FE
In short: No, ChatGPT is not going to replace any of our jobs, at least not in the foreseeable future. I will give you some tips on how to beat it!
There are a lot of intriguing tools and videos showing the capabilities of Open AI to “replace“ frontend developers. I honestly laughed at most of them. There are some impressive ones though. But the current level of sophistication doesn’t go far beyond generating boilerplate code, … if you get the prompts right. Or to recreate the examples from StackOverflow and all the tutorials and introduction books on the net with slight tweaks.
You can get that much easier and faster if you:
Use a purpose made library. Who needs to generate those algorithms when there are much more optimized ones an import away?
Download a proper boilerplate repo where stuff is not in a single file but you have proper folder structure, actual dependencies are set up for you and so on. No fuss with prompting for much less.
Download a website template/theme from Themeforest or any other marketplace. You get premade, better quality and incomparably more extensive websites, sometimes even for free.
Download a proper UI Kit or Component Library. You get a 1000x higher quality code, that’s actually maintained, gets security fixes, and you can ask other people about your issues as they face the same things as you! Unlike what ChatGPT custom generates for you.
The examples of it explaining and commenting code all seem to lack the complexity of a real product. ChatGPT doesn’t have the domain knowledge or the understanding about how the subsystems and modules come together. And I think you can’t really feed your production codebase into it and even if you could, I have my doubts of it being able to handle it. In the end, its knowledge of tech lags behind years and frankly, only real-time knowledge would suffice to hand over generating production code to any AI.
Don’t get me wrong I can totally see a future where AI tools are much more useful, but we are not living in that future yet. However following the progress is amazing in itself.
What about the Back End?
That story I linked in the section header is really fascinating. People put together a system that kind of auto generates a CRUD API using the LLM as the BE and the DB. That’s nice but I still believe there’s an endless number of CRUD SaaS products offering the same features with a much larger set of additional functionalities for less effort. I can’t see an LLM do distributed systems, datalake/warehouse, NoSQL, instrumentation or any of the more intricate types of BE/DB work. What does the future hold? I’m eager to see, but a bit skeptical.
Sorry, if I don’t sound enthusiastic about this AI topic, now I’m really doing what I advertise: “fighting the hype“.
More interesting stuff built over ChatGPT that you might actually use:
From the Full Context Perspective
ChatGPT is the perfect example of Level 5 Hype not paired with equal Value. It already has some use for pre-generating repetitive, basic code or doing refactoring, but I didn’t see any mature use case yet. Let me know if I missed some!
In its current form ChatGPT already enabled the creation of new businesses that otherwise couldn’t exist. This is the staple of a 1000 Impact Points of Business Opportunity. If it matures it has the potential to multiply this effect and this score further.
However until it can be made more context aware (like a specific codebase) and be retrained in real time on new data I think it will only be around Level 3 Value or Level 4 in rare cases for software engineers.
#2 🥱 Twitter Drama around RSCs
I wanted to be shorter this week, but writing less is my worst enemy. So I will try to put up a battle now. Here’s a bunch of links where Twitter Tech people discuss React Server Components (scroll down just a bit on that page).
Some are doubtful of its usefulness. I call them the “It’s PHP“ group. Some think RSC is the obvious next step in framework evolution. Let’s call them members of “the Dan cult”. Sorry both camps, the truth is in the middle, RSCs are useful but they are no silver bullet either.
The practical value of server components lies in a couple of factors best described in the Next.js docs. Here’s the gist of it:
✅ You can fetch data directly inside the components with support for async/await syntax. The buzzword here is colocation of data and UI. Like what Remix or the new Next.js router does.
✅ Directly access server resources including API keys, security tokens etc. It makes writing UI that directly depends on those resources more streamlined,
✅ Keep large dependencies on the server, shrinking client bundle size => increased web performance. Which is always nice, but the kinds of components that can be defined as an RSC are limited.
What are its benefits and who can take advantage of them?
RSCs can have a visible impact on a projects’ business outcomes only if the generated revenue is directly correlated with the web performance. Its effect on bundle size can make some difference and the rendered components don’t need rehydration to further improving web performance.
Regardless of that, RSCs have the potential to make your life as a developer easier in a mind bending way.
Assuming you are working on a React application that has a Node.js backend to execute those RSCs.
So what’s that way? You might not need APIs anymore! You can fetch and await data directly in the RSC that needs it. That means writing DB queries or calling 3rd party APIs without holding back! Once they are resolved the component will render static html and send it to the client but!!! you can pass that data down through props to client only components. No need for manual serialization, no need to do anything. It will just magically be available to be used in the browser. Well, that can make a real difference in architecting BE APIs and systems. Watch Theo’s full video on this topic for examples.
For the right project RSC can be influential and the hype is definitely strong so it gets a solid 4 X 4 score.
#3 📡 From Signals to Hooks
The article still rides the waves of signals hype. But it takes a plot twist. Btw, I really love the somewhat clickbaity title of the post: Were React Hooks a Mistake?
No they were not!
But the premise of the article is that developers are subconsciously attracted to Signals because their mental model is much closer to how React Class Components work than to how Function Components do in combination with hooks. Give it a read to explore the details.
Nothing it talks about will bring a directly measurable difference in business outcomes but it will help you to understand how React works on a deeper level. Especially useful if you just started to use the framework.
It scores a nice 3 x 3. Which is the ideal balance every tech news should have.
#4 🔥 Hono Edge + Hono Stack
Are you familiar with tRPC? Then you already know what this is all about. If not, here’s a short summary:
Hono is a small, simple, and ultrafast web framework for the Edge for full stack TypeScript developers. It runs in all common Edge runtimes + Node.js. Comes with the fastest router out there and its secret weapon is guaranteed type safety between server APIs and client code, using Zod and static typing to create exportable type definitions for each endpoint that the official hono client can reuse.
So what are the benefits?
We need to talk about the Edge ⚔️ here. I really like Gergely Orosz’s (my fellow Hungarian) recent summary about what it is. (There’s no direct link to that section so please just scroll down a bit from there.)
Now that we all are on the same page, I can just say that only those projects need Edge infrastructure which operates in a large enough geographical region to include multiple edge endpoints and have low latency needs like online games, or any website which wants to maximize perceived web performance to increase customer engagement. In this case Hono has the potential to improve that metric. By how much, depends on the starting situation.
If there’s a need for very high network throughput it might make a visible difference based on their own benchmarks. But we all know how benchmarks work, we need to do our own.
All these can improve Customer Experience in the range of 10s to 100s of Impact Points.
You get improved DX and productivity thanks to the type safety guaranties. But keep in mind, to get that you need to have a monorepo for the BE and FE or export the types as an internal npm module.
This would bring Productivity benefits in the 100 Impact Points range.
Who should consider adoption: Your run-of-the-mill website/app likely won’t benefit from Edge infra, and for the ones who do, betting on early tech is probably too risky of a move, as there are more mature alternatives with lower but not orders-of-magnitude lower performance. Any less critical project, operating on global or continental scale can consider Hono in my opinion.
I give it a well balanced 3 x 3 score.
#5 👨🔬 A Life Engineered
It’s a YouTube channel I follow, run by Steve Huynh an L7 Principal Engineer (top 1%) at Amazon with 17 years spent at that company. His views, advice, the topics he covers (for some reason I even feel like the way he speaks) all show distilled wisdom, wide experience and delivers constant value. (I’m not sponsored believe me)
I just wanted to share something with you that can bring immense benefits for any software engineer regardless of specialization.
How much impact can it make? The Full Context System has a part about the motivation of engineers. While that’s focused on the effects of technical decisions, it’s very much directly translatable to how the message of these videos can influence us in positive ways. What you learn here can help us to become at least a 100 Productivity IPs more efficient at our work, career growth and through helping us to help other engineers.
Check it out if you want to learn from all his experience and growth at Amazon.
On the hype value scale it “sadly” gets a 3 x 5, it could really do with more visibility.
#6 📣 The Great Gaslighting of the JS Age
I assume you read the short introduction to this article at the beginning. I don’t want to spoil anything. Thinking about it again, I even wonder why did I include it in the newsletter? Obviously it doesn’t offer much evaluate-able business value even though it has a positive message that would be a nice takeaway for all of us. I think the main reason is that it takes such an objective and big picture view of the last decade of the JS/web world it resonated with the approach I’m trying to use. Give it a read if you are interested.
There’s no score for this one.
Short news
Tech news that I found interesting or funny this week
Jack Harrington invited Jason Lengstrof for a React Will it re-render? challenge.
Declarative Setup, Imperative Update: The Key to High-Performance UI Components in React
Header Overrides feature in Chrome DevTools: You can specify response headers locally without access to the server.
Speculative module fetching in Qwik
Outro
I’m super happy that you read (or scrolled ) till the end! I feel speechless that people actually do that! If you enjoyed the article and/or found it valuable please consider sharing it with your friends and colleagues.
I’m at a very early stage of building this Substack publication so even the smallest extra visibility can make a huge difference. My wholehearted thanks if you help with that!
See you in the next one!
Joe @fullctxdev