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 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 ๐
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 :)
Woohoo @ken_wheelerโs first talk at Microsoft is about music and shit pic.twitter.com/VxXIqxxnHh
โ Swizec Teller (@Swizec) March 31, 2019
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.
โI donโt need accessibility coz this app is internalโ
โ Swizec Teller (@Swizec) March 31, 2019
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. ๐
Iโve been hearing about WebAssembly for years and @_jayphelpsโs talk basically says: No not quite yet, almost there
โ Swizec Teller (@Swizec) March 31, 2019
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.
โYou can tell youโre using an Electron app when your fans come onโ @jaredforsyth
โ Swizec Teller (@Swizec) March 31, 2019
๐
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.
Ahh yes @swyx reminding us all that the time spent learning closures in 2009 wasnโt wasted after all ๐
โ Swizec Teller (@Swizec) March 31, 2019
Hooks โค๏ธ pic.twitter.com/Onsa3o30N9
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.
โThe ML & The AI, which is regexโ great comment from @tanmaigo pic.twitter.com/OuAyRrgqn9
โ Swizec Teller (@Swizec) March 31, 2019
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.
That guy with Simpsons avatar @acemarke gonna talk us through the state of redux.
โ Swizec Teller (@Swizec) March 31, 2019
Step 1: no itโs not dead. Half of all React apps use it pic.twitter.com/Cjk7M44AwQ
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.
Apps should be easier to build
โ Swizec Teller (@Swizec) March 31, 2019
Reactive data can help@EricVicenti pic.twitter.com/bPFIYjJMsi
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.
The amazing @emplums teaching us about design systems with React.
โ Swizec Teller (@Swizec) March 31, 2019
Itโs an ecosystem of tools that help you ship consistent designs btw, not just a component library pic.twitter.com/gdwsZh5zke
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. โค๏ธ
Learning about babel macros from @jtomchak
โ Swizec Teller (@Swizec) March 31, 2019
Havenโt found a good excuse to use macros yet so Iโm excited to find the possibilities they unlock pic.twitter.com/39UDA0pJXa
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.
Ok so @codeathena is telling us about type-safe forms in React and forms are really hard so much state to think about pic.twitter.com/6JIdOmLWQF
โ Swizec Teller (@Swizec) March 31, 2019
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.
After the ice cream and apple pie break @gurlcode telling us about learning React from Twitter.
โ Swizec Teller (@Swizec) March 31, 2019
Sheโs a react detective. Love it pic.twitter.com/25v8NUARSL
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
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 pic.twitter.com/ltuiJRAWXQ
โ Swizec Teller (@Swizec) March 31, 2019
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.
Next up we have @wesbos and @stolinski making an episode of @syntaxfm. Thatโs gonna be fun pic.twitter.com/ihc4NUvEVv
โ Swizec Teller (@Swizec) March 31, 2019
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
Continue reading about What I loved about Reactathon 2019
Semantically similar articles hand-picked by GPT-4
- Reactathon 2018 was a hoot โค๏ธ
- Learnings about the future of the web from Reactathon
- Imagine you could chat with the core of your industry for 5min
- Come hang out in Barcelona and learn GraphQL, Serverless, Gatsby, ...
- Online workshops are MORE interactive than in-person workshops
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. ๐"
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 โค๏ธ