React Day 2024

What we liked at React Day Berlin 2024

Once again, our team found it’s way to Berlin. This time, to join hundreds of React developers at React Day Berlin. Our train left at 5:30 in the morning from Dresden, but that gave us ample time to get a team breakfast and discuss the upcoming talks. In this article, we want to present the talks that we liked best to showcase various aspects that excited us as participants of a large conference.

The Key note: React Server Components in AI Applications

In his talk React Server Components in AI Applications, Tejas Kumar demonstrated how AI and React Server Components can revolutionize search. Using a movie example, he showed how descriptive inputs are converted into AI-generated keywords to query relevant databases and render dynamic pages.

I find this approach particularly interesting in the commercial sector: Often, we don’t know the right terms or translations to find a product. With AI-powered search, language barriers and keyword limitations can be overcome.

One possible criticism is that AI-generated results may vary. However, in my opinion, this is not a problem: Users are generally not looking for a specific result but want to see a selection from which they can find and what they need. As long as the generated results help users, this feature is a success.

Link to the talk: https://gitnation.com/contents/react-server-components-in-ai-applications

Signals all over the place

I am our office’s Signals fan, the something-old-made-new reactivity primitive popularised by SolidJS and potentially coming soon to a browser near you. So I don’t think anyone was surprised when I went to a React conference and started seeing signals everywhere. Nicolas Dubien talked about fine-grained reactivity without the React compiler, and showed us how and why his team had built essentially their own custom Signals implementation. Meanwhile, Giulio Zausa explained his company’s journey through different state management solutions, finally landing on something that, again, looked suspiciously like Signals. And that was without even going to the talk that explicitly mentioned Signals in the title!

Both talks were about more than just signals, and I was glad I went to both of them, but I find it interesting to see how signals and signal-like reactivity tools feel like a form of convergent evolution, where we keep on coming back to the same ideas over and over again. And even as React takes a different approach to reactivity, it’s clear that the performance benefits of finely grained updates and re-renders are not to be overlooked.

That said, my real Signals highlight came after all the talks were over, and we were on our way home. We sat in the cabin of our train and talked, breaking down how signals allow for this infamous “fine-grained reactivity”, and how they’re used in frameworks like SolidJS. I love working on a team that’s inquisitive, ready to ask great questions, and willing to explore topics like this beyond just the basics.

Why not: Making an Emulator in JavaScript

Sara Vieira’s talk was something truly special. It wasn’t your typical conference presentation packed with 100 slides and buzzwords. Instead, Sara brought an energy that felt more like a friend showing you their quirky weekend projects than a formal keynote.

And quirky it was! She showcased a CHIP-8 emulator she built entirely in JavaScript. Even cooler, because her slides were web-based, she embedded the resulting game directly into them, creating a seamless and interactive experience for the audience.

What stood out most was how inspiring the talk felt. It wasn’t just about technical brilliance—it reminded us why we attend conferences in the first place: to find inspiration and fresh ideas outside of our day-to-day work.

Link to the talk: https://gitnation.com/contents/building-a-game-boy-emulator-in-javascript

Happy accident: Make Real: Tldraw’s Accidental AI Play

Steve Ruiz talk was definitely an entertaining one.

In a very playful way, he introduced tldraw as a canvas web app that could be Miro's ascetic little brother. After showing some very useful features (like arrows that adapt their length to any rotating target's surface), he showed a feature called make real.

There, he drew two boxes. The left one was the input box, the right one the output, or the make real box. Everything dragged or drawn in the input was immediately translated into something looking real using generative AI (e.g., a dolphin swimming in the sea with a tiny island in the background). To have some more fun, he changed the output box to be text and linked it via an arrow, and voilà, there was a description of that picture. After some minutes, there was a sequence of tldraw elements taking information, evaluating it via AI, and outputting it to the next element in order to make the input picture real and magnify its coolness (which in our case resulted in a real-looking dolphin wearing sunglasses).

There was also a make real feature delivering React components as a function of the input picture or sketch. It was impressive to see a rough drawing of a basic timer with a display and three buttons be translated into an actionable React component that indeed worked as expected.

And then things became weird. He told us that it was a big surprise that it was actually possible to build an algorithm out of tldraw elements. He used text boxes to describe how the element should evaluate its input using AI. Then the boxes were logically arranged using arrow sketches. Also, notes were positioned to further describe the algorithm's logic (e.g., making a for loop). The result was an algorithm that would create a list of random pop songs and then sort the result into three text buckets: love songs, no love songs, maybe a love song.

At this point, I began to understand that very different domains of structuring and evaluating information like visual sketches, written code, or a verbose prompt can actually work together seamlessly in a symbiotic way and we can leverage each strengths at the same time.

Link to the talk: https://gitnation.com/contents/make-real-tldraws-accidental-ai-play

Build Things That Don’t Scale at All

In this talk Michele confronted us with an everyday issue of a software engineer:

You really need an app for something, but all the other solutions on the market are either not good enough or bloated with logins, pay-walls, permission requests or cookie banners.

So what is the obvious reaction? You build it yourself. But there’s a well-known issue with building your own solution:

We always tend to over-engineer our own solutions. We start thinking about multi-platform, optimizations, authentication and many more aspects even though ultimately, we are the only user the app will ever have.

He then proceeds to show us apps he built, that don’t scale at all. But, of course, they fulfil their purpose and are very well suited solutions to the problems. He did so in a very humorous way, which is why it remained in memory.

The key takeaway here is that most of the times, we don’t need a scaling solution. Overthinking our app is demotivating and time-consuming. Often times, it’s better to first think of what you really want to achieve and introduce complexities one at a time, when they’re actually needed.

Link to the talk: https://gitnation.com/contents/build-things-that-dont-scale-at-all

The State of the Web: Key Insights From the HTTP Almanac 2024

Last week, I attended a talk by Burak Güneli on “The State of the Web: Key Insights From the HTTP Almanac 2024.” Although I found the speaker’s delivery somewhat underwhelming, the information he presented genuinely surprised me. He highlighted just how much carbon each website visit emits and emphasized that every page load contributes to this footprint. I was surprised to discover that even such a commonplace activity as browsing the web can still leave a measurable environmental footprint.

What truly stood out to me were the relatively simple steps one can take to reduce a site’s environmental impact. Güneli discussed straightforward optimizations like setting proper caching headers, using the srcset attribute for images, employing lazy loading, identifying and removing unused CSS or other files, and compressing large data with gzip. It was encouraging to see that with minimal adjustments—often as simple as adding a few attributes or tweaking configurations—developers can significantly improve performance and decrease their sites’ carbon emissions.

Overall, while the presentation style didn’t leave a strong impression, the content certainly did. I walked away more aware of the hidden environmental cost of everyday web usage and more motivated to implement sustainable best practices in my own work.

Link to the talk: https://almanac.httparchive.org/en/2024/markup#conclusion

React Day @home

Unfortunately, I wasn't able to attend React day in person this year. So all I could do was sit on the sofa with a cup of tea and a warm blanket and follow the exciting talks. “My conference” started at 13:50 with a short opening and then directly with the very entertaining talk by Sara Veira. In general, the UI and the timeline of the “remote conference” were always very clear and intuitive. I could easily jump back and forth between the 2 tracks. It was also possible to ask questions remotely, but unfortunately only for half of the presentations. The remote conference started in the afternoon to make it more convenient for the international participants. However, this also meant that after the last live presentation, the presentations from the morning were repeated. This of course meant that the opportunity to ask questions was lost. My conference day came to an end at around 8pm with Nicolas Dubien's presentation on his solution for Reactivity without a compiler. Apart from 2 minor stream interruptions, which were fixed after reloading the page, everything went technically great. I thought it was good to still be able to attend the conference and follow the exciting talks. I hope to be able to attend live again next year.

Final Words

We really enjoyed the React Day in Berlin, which made getting up early and the long working day more than worthwhile.

One of the best parts of going to conferences and events like this as a team is seeing how it inspires discussion and ideas. Vitali enthused about AI and the Tldraw talk, Jonathan talked at length about Signals, and we all discussed how we might improve the environmental impact of the Esveo website. Plus at various points during the day, there was time for the yearly Advent of Code, as well as some Typescript brain teasers that put our knowledge to the test.

In total, this was a great chance to learn from some leading React and frontend experts, as well as from each other.