Swizec Teller - a geek with a hatswizec.com

    Learnings about the future of the web from Reactathon

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

    Swizec Teller writing a secret book avatarSwizec Teller writing a secret book@Swizec
    Fetch on render is a lie
    @DavidKPiano
    Tweet media

    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 👆
    Swizec Teller writing a secret book avatarSwizec Teller writing a secret book@Swizec
    "I don't know what is Remix, I don't care, and why is everyone telling me to learn this? Where are all the NextJS talks"

    🌶 quote from a #reactathon attendee

    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.

    Swizec Teller writing a secret book avatarSwizec Teller writing a secret book@Swizec
    “If you’re in a meeting and you need to impress someone just say Decouple”
    @ryanflorence
    Tweet media

    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.

    Swizec Teller writing a secret book avatarSwizec Teller writing a secret book@Swizec
    “This looks really complicated but it’s not”

    What @erikras means to say is that visualizing your state machine exposes the complexity you didn’t even know you had

    plus he can do live visual coding in @statelyai’s editor 😍
    #reactathon
    Tweet media

    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 😍

    Swizec Teller writing a secret book avatarSwizec Teller writing a secret book@Swizec
    @ryanflorence Fuck me Ryan made Remix sounds so cool at @reactathon

    Literally solves all the annoying things I don’t wanna think about

    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.

    Swizec Teller writing a secret book avatarSwizec Teller writing a secret book@Swizec
    Can’t stop thinkint about that graph @swyx shared in his talk ..

    84% of production #javascript is jQuery

    84% of the JavaScript out there is jQuery 🤯

    Ü ï L ï ä ñ ⚙ avatarÜ ï L ï ä ñ ⚙@uilian
    @Swizec @swyx I had to watch the video to find this, here's the frame:
    Tweet media

    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

    Swizec Teller writing a secret book avatarSwizec Teller writing a secret book@Swizec
    Even if it’s cold, the sun is strong.

    The most important lesson from Reactathon day 2
    Tweet media

    Did you enjoy this article?

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

    Learned something new?
    Read more Software Engineering Lessons from Production

    I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.

    Subscribe below 👇

    Software Engineering Lessons from Production

    Join Swizec's Newsletter and get insightful emails 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"

    ~ Ashish Kumar

    Join 15,883+ engineers learning lessons from my "raw and honest from the heart" emails.

    ⭐️⭐️⭐️⭐️✨
    4.5 stars average rating

    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

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

    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 ❤️