Learnings about the future of the web from Reactathon

The first in-person conference in years! It was wonderful 🤩

Beautiful outdoor venue, great talks, wonderful conversations. And a surprising realization how small this industry is. Everyone knows everyone.

At one point I found myself in a conversation between a React core maintainer, the inventor of XState, creator of React Router and Remix, a Chrome engine person, and the dude who built Firefox devtools and founded Replay 😳

The group agreed that animation is hard, React may or may not be working on it, and useEffect leads to bugs.

My key takeaways from Reactathon are:

You can see all talks on Youtube – Day 1, Day 2, Day 3

Remix

You don't have to learn Remix. The ideas it brings to building React apps are cool though. Everyone's excited.

Several talks mentioned Remix as an exciting step into the adjacent possible of React, Serverless, and modern web standards. Like this:

All of this happens by magic. Ryan explained it as a lever you can pull between different web vitals metrics like time-to-first-byte and largest-paint.

Suspense is the key

As David said in his talk – fetch on render is a lie.

You need to fetch while you render. Side-effects go in state transitions, not when you land on the new state in your state machine.

Everyone loves a good state machine

And yes you are building state machines even if you don't realize it. We had lots of debates about how nice it would be if engineers started new projects by drawing out a state machine in their notebook.

No need to use XState or any library at all, but please draw out and enumerate your states before you start banging on your keyboard.

The nice thing about Remix is that it handles the most typical state machine – data fetching – and bakes it right into the router. And they're backporting a lot of this to React Router 😍

Serverless at edge

Serverless at edge is all the rage and definitely the future. Lots of platforms are adding this, lots of new ones are making it better.

You combine the power of a CDN with the power of serverless functions. Making your code run as close as possible to the user who's running it 😍

Right now this is used for various flavors of server-side rendering, smart caching, and light personalization. The data portion isn't quite there yet. You get a large latency hit as soon as a database is involved because that remains central.

Companies like Xata and Cloudflare are starting to work on that by offering serverless databases at edge.

Erikras showed an interesting approach – running an XState state machine on the server and persisting its state in the cookie. You get complex stateful logic without slowing down to talk to a central database 😍

GDPR

This was a side-conversation. What happens to serverless at edge when you have European data in the mix? 🤨

Here's the problem:

If an American looks at, say, a European user's profile, you cannot process that on a server in America. But that's exactly what automatic global serverless at edge wants to do.

Not a problem at all 😅

This Is Fine GIF

You are the bleeding edge

Swyx gave an update on his Third Age of JavaScript talk. React won the framework wars. Now we're figuring out what to do with it.

And even then, React is only 8% of production JavaScript. Everything at this conference was the bleeding edge of the bleeding edge.

84% of the JavaScript out there is jQuery 🤯

I don't know what to do with this information, but the future's exciting. We're going beyond infrastructure as code and towards infrastructure from code.

The future is even less work

Self-configuring platforms that look at your code and create the right deployment environment, set up your lambdas, make the queues, figure out your database, ... you write the business logic, platform does the rest 😍

Jeremy Daly in his talk on the history and future of Serverless said: "Swyx was right. Except that future is here. Just very fresh."

Exciting!

Cheers,
~Swizec

PS: the sun is strong