Looking Back at the JSNation and React Summit Conferences
Just before summer break, I traveled to Amsterdam to soak up new industry knowledge and get to know the "Venice of the North," as the city is also known.
July 12, 2024|7 minutes read
Just like in previous years, Amsterdam once again hosted two hybrid conferences in one place under the GitNation umbrella this year. Two days offline and two days online. I took advantage of this unique opportunity and attended the JSNation and React Summit conferences in person. Over a thousand attendees, dozens of talks, and a great atmosphere. With this article, I'd like to share at least a bit of my experience with you.
The center of Amsterdam is crisscrossed with canals, so you can enjoy a romantic boat ride there. But the capital of the Netherlands is above all a cyclists' paradise. Most of them, though, lack decent manners, so pedestrians have to stay on their toes around them. The second essential mode of transport here is the ferry, which lets you cross the Ij waterway on your way from the city center to the northern part of town.
I took the ferry both days to get to the conference venue, Kromhouthal, where a stage was set up for the main program. A separate room held a second stage, though it was usually hard to get into because of the high attendee interest. The organizers had everything perfectly prepared except for one thing. Where else but at an IT conference would you find a long line for the men's restroom?
And now, on to the talks themselves…
10 Years of Independent OSS:
A Retrospective
The first talk at the JSNation conference gave us a look into the life and work of an open source developer. Evan You, the creator of the JS framework Vue.js, shared his experiences, both the positives and negatives. How hard it can be to get your project noticed by other developers, open up your code to other contributors, find sponsors, and avoid burning out through it all. Using commit diagrams from GitHub, he showed how their volume shifted depending on what was going on in his life at the time (for example, no commits after his daughter was born) or ahead of big releases. GitHub issues can be a great place to collect ideas and feedback, but a developer can't try to solve them all – or they need to let others help improve the project, because open source is, above all, about community.
From Friction to Flow:
Debugging With Chrome DevTools
Jecelyn Yeen, who works on Chrome DevTools, showed off features that have been in DevTools for years but are so well hidden that you'd never find them. In her words: "You don't know what you don't know." She showed where to find the option to emulate a focused page, so you can inspect an element without it closing the moment you click into DevTools. Another great feature is the ability to override responses or headers from the server. Some features were barely used by developers until the DevTools team moved them somewhere more visible, after which usage shot up massively. In one of the upcoming Chrome versions, we can look forward to an AI assistant that helps explain the meaning of errors in the console and even suggests ways to fix them.
Install Nothing:
App UIs With Native Browser APIs
Modals, menus, or carousels – these are elements on a page that, until recently, we had to handle with piles of JavaScript or even plugins. But as Scott Tolinski reminded us, browsers keep evolving, so you can now implement these elements using native browser APIs instead. Like me, you might not yet be familiar with WAAPI (Web Animation API). But according to the talk, you can build some really great things with it. And if you haven't tried View Transitions for page transitions yet, definitely give them a shot – they're a game changer. The same goes for animating "display: none;" using the "allow-discrete" keyword in CSS.
Dive Into Advanced TypeScript
Luca Del Puppo quickly discovered during his talk that live coding in front of an audience doesn't always go the way you imagine. Even so, using code examples, he still managed to walk us through some more advanced TypeScript concepts. In his twenty-minute talk, he found time to demonstrate type guards, assertion functions, and branded types. At the end, he also touched on using the Zod library for runtime type checking.
The Suspense Quest:
Inside React's Magic
If you like looking under the hood at how React works, I recommend watching the talk by Charlotte Isambert. She explains, in an easy-to-follow way, how Suspense works, which you use to show fallback content while child components are loading. How does the Suspense component actually know about the requests happening inside its child components? What does "work in progress target" or "offscreen fiber" mean? You can learn all of this from this great talk.
Invisible Hand of React Performance
Ivan Akulov presented three concepts that affect performance in React. React 17 introduced the "useEffect" hook, which replaced the class methods "componentDidMount" and "componentDidUpdate." However, it's not a 1:1 replacement, so it's good to know the differences in how they're evaluated or how they trigger a forced layout. Another topic covered was so-called "batching," meaning that if you have several "setState" calls in a row in your code, they get grouped into one, avoiding multiple repaints. The last major point of the talk was Suspense, where Ivan explained, among other things, what happens if a user takes an action while a page is hydrating.
Interested in frontend news?
Sign up for our newsletter or
follow us on social media.
Talks about AI
One theme shared by many of the talks was artificial intelligence. In his talk AI First: Applications of the Future (JSNation) Evan Seaward made the case for why, in his view, it's better to start building an app with AI in mind from the outset, rather than bolting AI on partway through the project.
In his talk on Web Apps of the Future With Web AI (JSNation) Jason Mayes presented his vision for the future of AI in web development. According to him, machine learning models will increasingly live directly on the client side, bringing benefits like better security and the ability to work offline.
A more lighthearted talk was the one titled Come On Barbie, Let's Go Party: Using AI for Music Mixing (JSNation). Ziv Levy is not only a developer but also a passionate DJ, so he shared his experience using AI specifically for mixing music and extracting vocals and other sounds from tracks.
Alexandra Spalato spoke at both conferences, specifically giving the talks AI in Front-End Dev? Your Creative Partner or Job Snatcher? (JSNation) and AI for React Developers: Opportunities, Learning, and Innovation (React Summit). Both talks followed roughly the same arc, opening with concerns about whether AI might take developers' jobs. In the end, though, she concluded that the human factor still has an irreplaceable role, and as long as we don't miss the boat, we have nothing to worry about.
The ethical side of using AI was raised in the talk Ethical AI for the Rest of Us (React Summit) Kathryn Grayson Nanz. She's thrilled to be able to use this cutting-edge technology, while also being well aware that AI can be a good servant but also a bad master. If developers use a third-party generative AI in their application, they can't be certain about its outputs. And those AI-generated results can land a website owner in serious trouble.
Talks about React Server Components
This topic came up in three talks in a row. First, Kent C. Dodds in his talk And Now You Understand React Server Components (React Summit) used a simple project to show how to incorporate RSCs into your code.
Next came a talk called RSCs In Production: 1 Year Later (React Summit), in which Theo Browne shared what he'd learned over the past year building his project UploadThing on RSCs together with the App Router.
The topic came up a third time in the talk Solving i18n for React Server Components (React Summit) by Lorise Sigrist, who walked us through his approach to solving translations for multilingual websites using server components.
Talks about accessibility
The important role accessibility plays on the web was covered, for example, in the talk Case Study: Building Accessible Reusable React Components at GitHub (React Summit), in which Siddharth Kshetrapal reminded us that using semantic HTML elements is an important foundation, but you can't conjure up an accessible website without adding JavaScript and ARIA attributes on top.
If, like me, you'd never heard the term "accessibility tree" before, check out the talk by Mathilde Buenerd titled What Is the Accessibility Tree, Really? (JSNation). She explains how every browser builds its own version of this tree, or which HTML attribute takes the highest priority when screen readers evaluate it.
Have you ever seen, or even used yourself, a link inside a button? Even if the design tries to convince you there's no other way to implement it, there's always a better solution out there. Cat Johnson in her short talk Nested Interactive Elements: A Nightmare in Accessibility (React Summit) covers the impact on accessibility and approaches for handling these situations, for example by using CSS to overlay elements.
On the topic of what accessibility actually is, and that blind screen-reader users aren't the only disadvantaged group of website users, Chandra Carney spoke in her talk Accessibility in 2024 (React Summit). She also pointed out that under the European Accessibility Act (EAA), many websites will need to improve their accessibility by June of next year.
If the topic of accessibility caught your interest, or you need to brush up on it, be sure to read the posts by my colleague Kristýna Marková, our web accessibility specialist.
In closing
The program was truly packed, and everyone found something for themselves. I'm really grateful for this experience, because attending a conference like this in person was absolutely worth it. I'm already looking forward to the next one.
If you want to learn more about what the JS and React community is currently focused on, you can check out the talk recordings from the conferences:
JSNation
React Summit