Swizec Teller - a geek with a hatswizec.com

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Senior Engineer Mindset cover
Learn more

    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:

    • Remix is great
    • Serverless at edge is the future
    • GDPR does not play with 👆

    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:

    • you write a Remix app
    • Remix understands your code
    • runs data access functions on the server
    • renders the initial view on server
    • updates fragments of your page (React components) in the browser as data updates
    • renders can mix server-side and client-side on every page as desired to hit the UX you want

    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:

    • GDPR says all data processing about Europeans has to comply
    • storing and serving data is processing
    • European data cannot be processed outside the EU
    • Serverless at edge tries to process data as close to the consumer as possible

    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 😅

    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

    Published on May 7th, 2022 in Events, React, Lessons

    Did you enjoy this article?

    👎👍

    Continue reading about Learnings about the future of the web from Reactathon

    Semantically similar articles hand-picked by GPT-4

    Senior Engineer Mindset cover

    Senior Mindset Book

    Get promoted, earn a bigger salary, work for top companies

    Learn more

    Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

    Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

    Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

    Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev

    Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization

    Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

    Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

    Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

    By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️

    Created by Swizec with ❤️