We have quite a history with real-time technologies here at CodePen. We’ve had all sorts of things in production from hand-rolled and self-hosted ideas, to services that don’t even exist anymore, to well-known products like Google Firebase’s Realtime Database. Sometimes our real-time needs are fairly complex, like our Collab Mode PRO feature that allows people to code within the same code editors at the same time, which is capable of conflict resolution and that kind of exotic science. Sometimes our real-time needs are more basic. Our real-time Live View is closer to the basic side. It has just a few jobs:
- As a PRO user is editing a Pen they own, when the preview updates, update Live View as well.
- If the Pen update is only CSS, inject the new CSS without refreshing the preview entirely.
That this is mostly single-directional real-time-ness. The only thing Live View needs to do is authenticate to ensure the user is PRO (and looking at a Pen they own), but there are otherwise no events it needs to send back.
We have been keeping our eye on Cloudflare’s Durable Objects technology to use for future real-time needs of CodePen. We’re already heavy users of Cloudflare Workers, K/V storage, and HTMLRewriter — and Durable Objects fit into that same ballpark. The fairly basic nature of Live View made it a perfect testing ground to try out Durable Objects. Nothing like getting a new technology to production to really kick the tires! It’s not that Durable Objects isn’t capable of complex situations (in fact, it’s quite good at it), we just wanted to keep complexity low for our first rodeo.
The one-nickel version of how Live View Works:
If a Pen is owned by a PRO user, it’ll kick off a connection to a Cloudflare Worker which establishes a connection to a Durable Object. Then if Live View is opened, that web page does the same thing, ultimately connecting to the same Durable Object. Now messages can be passed from the Pen Editor to Live View (“Hey! A new preview is ready!”).
Live View was using Firebase Realtime Database before and now we’ve converted it to using Durable Objects. Here’s why we started down this road:
- We’re vetting the Durable Objects for more complex and higher-scale real-time needs. If this goes well, we know we’ve found a good path for future projects.
- We already use Cloudflare products for a variety of things and like the fit. If we can keep investing in that, we’re taking advantage of existing knowledge and consolidating expertise. We’ll need to keep an eye on the price of course!
- In particular, we use Cloudflare Workers a bunch. A Cloudflare Worker is needed to talk to a Durable Object, so we already have a bit of infrastructure for that (testing, deployment, local dev, etc.).
- Firebase Realtime Database does a decent job of shooting data between connected clients, but it’s arguably not a “real” messaging service. You can’t run code using just it, for example, so all the logic and whatnot is done by clients receiving the data. Using this new setup, we have the opportunity to run code at the Worker level (in our case, auth) and the Durable Object level (in our case, send messages to Live View(s)).
- We
would likeneed it to be fast.
What did we find? Drumroll, I suppose…
So far so good! Over the course of a few days, we slowly rolled it out to 100% of PRO users and experienced no issues.
- The tech slotted nicely into things we were already doing, so that’s a win. It feels so far like we’ve found a good solution for all future real-time needs.
- The removal of Firebase from Live View means a fairly dramatic reduction in client-side code. No library is needed at all. The Live View-specific code is now a hand-rolled bit of JavaScript that uses Web Workers natively to connect/re-connect to the Cloudflare Worker. It’s 1.5 KB gzipped. That’s a form of speed improvement for users right there.
- Pitted against Live View using Firebase Realtime Database, not only is the page load faster, the messages are faster too. Live View now (almost weirdly) refreshes faster than the on-page editor does. We’ve found about an 80-250 millisecond message ping speed, with 80 being coast-to-coast in the U.S. and 250 being U.S. to Australia.
The post Real-Time Live View Now Powered By Cloudflare Durable Objects appeared first on CodePen Blog.