Swizec Teller - a geek with a hatswizec.com

    What I loved about Reactathon 2019

    Reactathon was wonderful ❤️ Thanks to all the wonderful speakers. They did a phenomenal job 👌

    Here's a recap of stuff I learned 👇

    My experience lasted the full 4 days.

    My contribution 👉 workshops

    React and D3 workshop
    React and D3 workshop

    React for Data Visualization workshop on Thursday. 7 hours of presenting. Went great, a little rusty coz I haven't done it in a while.

    Modern Web App with Gatsby, GraphQL, Serverless, and Hooks on Friday. Woke up at 2am to "finish" preparing by 10am, then right into 7 hours of presenting. I was … tired? Dead? Thank god I run marathons otherwise there's no way I'd survive that 😅

    Fullstack app workshop
    Fullstack app workshop

    That one suffered from the First Iteration problem. You could tell the content wasn't polished yet, the flow wasn't quite there. I made some questionable technical decisions in the example project, we spent too long on some sections, too little on some others.

    But I think people still learned a lot, asked great questions, and we covered a lot of ground. Too much ground. Could easily turn it into a 3 or 4 day workshop.

    A few more iterations and I think it's gonna be magnificent.

    Lesson learned: Don't have 2 workshops on different topics in the same week. So tired 😴

    This was followed right away by the speaker dinner.

    Speaker dinner

    Speaker dinners are amazing. Best part of any conference. It's like getting peer level access to the top minds in your industry.

    Unless of course you're so tired from being up since 2am and presenting all day that you can barely say Hi.

    But I chatted dirt bikes with Ken Wheeler and forgot to take a selfie. It was like meeting a down-to-earth celebrity 🤩

    And I learned an important phrase from Mark Erikson (@acemarke): "My social battery is now running low. Good night"


    Reactathon Day 1 – the lightning talks

    I love lightning talks.

    Each of these is a twitter thread with my live notes. Click through. I'm writing here from memory :)

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    Woohoo @ken_wheeler’s first talk at Microsoft is about music and shit
    Tweet media

    Ken Wheeler talked about the renderless component pattern and how it applies to hooks. There was some talk about inverting control of children to their parent, which was hard to grasp in a short talk like this.

    Then he showed us an app he built with react-music and hooks. Gives you a UI to create sick beats and play music. Wonderful.

    His render-html-to-canvas demo was amazing too. He says he's not ready to share that one until it can be accessible.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    “I don’t need accessibility coz this app is internal”

    Damn it’s like @knitcodemonkey read my mind :O

    Jen Luker gave us a great way to introduce accessibility into our existing apps 👉 create a lint rule, set everything to warning. Change one rule to error.

    Everyone complains, everyone grumbles, everyone fixes it.

    Then you set the next rule to error. Repeat until your app is accessible.

    Did you know 25% of Americans have some form of disability that requires accessible webapps? Imagine how amazing your business could be with 25% higher conversion rates. 😉

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    I’ve been hearing about WebAssembly for years and @_jayphelps’s talk basically says: No not quite yet, almost there

    Maybe I just don’t have the right problems 🤔

    Jay Phelps talked about Wasm. The main message I got from his talk is that Web Assembly is amazing and getting amazinger with each passing day.

    It's never going to replace JavaScript and it isn't meant to. It's meant to bring C, Rust, etc. to the frontend for those high-CPU tasks you have to do sometimes.

    Gives me interesting ideas for data visualization. You know those times when you're processing a dataset with 100,000+ entries and it slows down your whole app? Might be wasm-able.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    “You can tell you’re using an Electron app when your fans come on” @jaredforsyth


    Jared Forsyth hyped us up about ReasonML and using it for Native React on the desktop. Write your app in Reason instead of Electron and you can compile straight to native code.

    No more WebKit, no more spinning fans, just smooth performance at a fraction of CPU and memory usage. His demo looked amazing.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    Ahh yes @swyx reminding us all that the time spent learning closures in 2009 wasn’t wasted after all 😌

    Hooks ❤️
    Tweet mediaTweet media

    Then @swyx showed us how to re-implement hooks in some 23 lines of code. No magic, just JavaScript like we used to write many years ago.

    Closures of closures within closures. Gives you modules and curried values and all sorts of things.

    It's too technical to recap here and I'm sure he's going to post slides soon. He always does.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    “The ML & The AI, which is regex” great comment from @tanmaigo
    Tweet media

    Tanmai Gopal had the best jokes of any lightning talk. So on point, it was beautiful to watch.

    Amazing demo too. Using GraphQL subscriptions, Hasura backend, and some serverless stuff, he's able to live stream data into and out of webapp and stay resilient to network failures. The stream just waits and resumes when you come back online. Love it.

    Reactathon Day 2 – the full conf

    I drank my morning tea scrolling through imgur sitting in my comfy chair at home. So I missed the first keynote.

    Ben Ilegbodu talked about the state of the React ecosystem.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    That guy with Simpsons avatar @acemarke gonna talk us through the state of redux.

    Step 1: no it’s not dead. Half of all React apps use it
    Tweet media

    Followed by Mark Erikson's great talk on the state of Redux. But I missed most of that one because mum wanted to facetime and mums are important.

    I did stay long enough to learn that 50% of all React apps out there use Redux. That blew my mind. 🤯

    After fulfilling my Good Son duties I was ready to buckle down, sit through the conference, and not take my laptop out even once. Not once.

    Sit in front row and be the audience you always wish you had. Take pictures, live tweet, and pay attention. Speakers appreciate that.

    Eric Vicenti told us about a new architecture for webapps that he's working on. No more database talking to many servers, talking to many clients, having errors and wondering about transactions and correctness, oh no.

    He proposes an architecture based on web sockets, immutable data, and live streaming connections.

    You use a chain of blocks to ensure your data is correct. You store actions instead of state. You keep the reducer on the backend so it always knows the final state. You make changes with a pair of (state, action) so the server can error you out if your state is wrong.

    Great idea. Seems to work. He's waiting to finish docs before releasing.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    The amazing @emplums teaching us about design systems with React.

    It’s an ecosystem of tools that help you ship consistent designs btw, not just a component library
    Tweet mediaTweet media

    Emily Plummer told us all about design systems and how they're used at GitHub.

    A design system isn't just a set of React components. It's an entire toolset of components, documentation, css, etc that helps engineers ship good looking apps from mockups.

    Get mockups, refer to the system, produce beautiful UI. Streamlines communication between designers and engineers because you're talking a common language. Means designers don't have to give you time consuming pixel-perfect designs, and you don't have to waste your time building pixel-perfect CSS.

    Your design system does it for you. ❤️

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    Learning about babel macros from @jtomchak

    Haven’t found a good excuse to use macros yet so I’m excited to find the possibilities they unlock
    Tweet media

    Jesse Tomchak got everyone excited about Babel macros. It's like writing code that writes your code and it's really powerful.

    For example, you can write a language extension that replaces something like ?. into a series of null-safety checks. Means you don't have to worry about writing your own checks which are almost always wrong. 👌

    Oh and you can speed up your code by doing things at compile time instead of run time. That's what macros are for. Want to statically insert some code in a bunch of places? Write a macro.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    Ok so @codeathena is telling us about type-safe forms in React and forms are really hard so much state to think about
    Tweet media

    Zach Gotsch showed us a great new form library he's been building, called formula-one.

    Formula-one is all about writing type-safe forms. This is important because with React you build custom form elements. Those go way beyond text and textarea so it's time to think about proper typing.

    Wouldn't want your server to get a string when it expects an array of objects would you? Of course not.

    Since typing isn't be all and end all, you still nee validation, formula-one makes that easier too. Looked neat, gonna have to try it.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    After the ice cream and apple pie break @gurlcode telling us about learning React from Twitter.

    She’s a react detective. Love it
    Tweet media

    Jenn Creighton called herself a React detective and taught us something important about React that we all managed to forget or not realize. She learned it through investigating tweets from the core team.

    Did you know React Fiber, the reconciler React's been using since 2016 or so, isn't even a Virtual DOM anymore?

    That's right. React does not in fact use a virtual dom. It uses a virtual call stack. Mind, blown. 🤯

    Most of her talk went right over my head. I'd have to sit down and study what she said for a few hours to understand how Fiber works. It's mindbendy and computer sciencey and exercises brain muscles I haven't used in years.

    Bottom line is this: No more VDOM. Virtual Stack instead. This enables asynchronous updates and eventually is going to give us React Suspense.

    Can't wait

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    You can tell @leeb has done this many time. That was a great way to pump the crowd up for his talk about this “vague but exciting” thing called The Web
    Tweet media

    Lee Byron then traveled us through time. It was 1999 and /cgi-bin/ is all the rage. You can build dynamic websites. Wow.

    His talk was amazing, beautiful, and a great performance. Such a great summary of itself that I can't even give you a summary. 😅

    Lee basically talked about how React grew out of a PHP-based component framework for server-side dynamic web applications and how the modern React Hooks approach is like going back full circle.

    You have a component with a bit of markup and a few function calls to other stuff. Just like PHP templates 20 years ago.


    Just the insight of how React came to be was worth it. Guess that's what happens when you work at Facebook for 10 years and see the evolution first hand.

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    Next up we have @wesbos and @stolinski making an episode of @syntaxfm. That’s gonna be fun
    Tweet media

    Wes Bos and Scott Tolinski closed up Reactathon with a live recording of SyntaxFm.

    Very fun to watch, super entertaining. We learned a bit about hooks, we watched them tag team a small app in 5 minutes.


    Enjoy your Monday


    PS: there's no better way to relax before a conference than riding too fast on a curvy road, farting proudly, and cowboy poetry

    Did you enjoy this article?

    Published on April 1st, 2019 in Learning, Personal, Travel + Events

    Learned something new?
    Want to become an expert?

    Here's how it works 👇

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters 💌 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 over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

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

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

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