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

    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 :)

    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.

    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. ๐Ÿ˜‰

    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.

    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.

    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.

    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.

    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.

    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. โค๏ธ

    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.

    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.

    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

    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.

    Brilliant.

    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.

    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

    โค๏ธ,
    ~Swizec

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

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

    Did you enjoy this article?

    Continue reading about What I loved about Reactathon 2019

    Semantically similar articles hand-picked by GPT-4

    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 โค๏ธ