Superglue and Stockholm Syndrome
Today’s issue: False web dichotomies, 14 years of Go, and learning that htmx is not just a recycled memes account.
Welcome to #253.
The Main Thing
Rails developers finally using Redux for the first time
Superglue and Stockholm Syndrome
Imagine you’re a Rails developer.
Every morning, you wake up, kiss the signed DHH poster on your wall, and get to work building server-side apps with all that Model-View-Controller goodness.
But today is different. You’re building a more complex fullstack app and you want to be able to add some modern client-side interactivity.
You immediately reach for your trusty set of Rails-approved Hotwire libraries, but then you feel it again — that yearning for something new.
Suddenly, you can’t stop thinking about how much better life would be if you could just build some declarative UI components. And sure, you love how Hotwire lets you directly manipulate the DOM — but for more complex projects, you wish you could just manipulate state as a simple data structure instead.
OK, you really wish you could use React (the good parts™).
It’s first-degree heresy for a Rails dev to say that out loud, but thankfully you’re not alone. That’s why Johny Ho and his team at thoughtbot created Superglue — an experimental new library that lets you use classic Rails to build rich React Redux apps.
Johny describes Superglue as a fork of the Turbolinks 3 library, “but instead of sending your foobar.html.erb over the wire and swapping the <body>, it sends foobar.json.props over the wire to your React and Redux app and swaps the page component.”
And instead of using APIs, Superglue utilizes Rails’ ability to respond to different mime types on the same route. It also gives you Rails form helpers, tag helpers, cookie auth, and other Rails features.
Bottom Line: Superglue aims to give you the benefits of using React components and Redux state management for building modern sites with rich interactivity, while still leaning heavily on Rails for your application logic. Some might call this Stockholm Syndrome, but Rails devs call it home ❤️.
    |
Our Friends
(With Benefits)
Me looking at my next AI project
Want to quickly spin up an AI app? Try Convex
Their fullstack TypeScript dev platform is the fastest way to get any web app to market, but it comes with some uniquely powerful features for AI applications:
-
Scheduled functions let you easily compose chains of LLMs, embeddings, and vector searches.
-
Realtime queries that automatically update your UI as the data changes with built-in caching, which makes your GPT-powered apps feel snappier.
-
A real transactional database lets you capture inputs and outputs of each step of your pipeline in a way that’s durable, fast, and immediately-consistent.
If you’re a founder looking to build something fast in order to get the bag from VC’s change the world, you should definitely start with Convex.
Try it for free — and see why so many developers call it “the 2024 version of Firebase.”
Spot the Bug
Sponsored by Clerk
Their Next.js Quickstart Guide allows you to add authentication & user management in just 7 minutes, with prebuilt components, hooks, and helpers.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" onsubmit="submitHandler(event)">
<label for="inputField">Input:</label>
<input type="text" id="inputField" name="inputField" />
<button
id="myButton"
class="btn"
name="actionButton"
value="clickValue"
type="button"
title="Click this button"
style="background-color: blue; color: white"
>
Click Me
</button>
</form>
<script>
function submitHandler(e) {
e.preventDefault();
const formData = new FormData(e.currentTarget);
alert(formData.get("inputField"));
}
</script>
</body>
</html>
Cool Bits
-
Jake Lazaroff wrote an insightful article about how The Website vs. Web App Dichotomy Doesn’t Exist. Do any of us really exist?
-
In honor of Go’s 14th anniversary, Rob Pike (one of the creators) wrote and spoke about What We Got Right, What We Got Wrong about Go. Long live the gopher.
-
Next week, Sentry is hosting a free workshop on How to debug your Next.js project. Your users, your team, and your future self will all be glad you signed up for this one - trust me. RSVP here. [sponsored]
-
Remix just released a new section in their docs on Client Data.
-
One of the htmx maintainers, Alexander Petros, wrote Is htmx Just Another JavaScript Framework? Tbh, this whole time I thought they were just a recycled meme account.
-
James Long gave a deep, detailed answer to the age-old question, Why does the chromaticity diagram look like that?
-
Next.js can now run with HTTPS locally.
-
What are the top areas of interest for web devs? Are you using the same platforms and apps as last year? How well-paid do you feel? Take part in the most complete survey Developer Nation has ever created, and get entered to win laptops, courses, gifts cards. Upon completion, you’ll also get access to their free virtual goody bag. [sponsored]
-
Mutative just launched v1.0 of their JavaScript library for efficient immutable updates, which claims to be 10x faster than Immer.
-
Evan Bacon created this list of apps that use Expo, which includes the Olive Garden app, the Sherwin Williams app, the Chuck E Cheese app, and the TVG Horse Race Betting app — aka the four apps on the home dock of my iPhone.
A button with a type of “button” will not submit the form. It will only submit the form if the type is “submit”.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" onsubmit="submitHandler(event)">
<label for="inputField">Input:</label>
<input type="text" id="inputField" name="inputField" />
<button
id="myButton"
class="btn"
name="actionButton"
value="clickValue"
type="submit"
title="Click this button"
style="background-color: blue; color: white"
>
Click Me
</button>
</form>
<script>
function submitHandler(e) {
e.preventDefault();
const formData = new FormData(e.currentTarget);
alert(formData.get("inputField"));
}
</script>
</body>
</html>
Bonus: There is an additional button type of “reset” which does exactly what you think it does and resets the form to its initial state.