Top lecture picks from React Conference in Amsterdam

According to the organizers of React Conference, this year’s React Conference Live was a “must attend conference for React developers”, and in my opinion, they were right, for sure.

The conference gathered well-known speakers from the community. Most of them work for famous companies and have built some of the best tools in the industry like Miro, Postman, Github, Storybook, Bit.dev, Codesandbox, etc.

The conference was held on April the 1st in Amsterdam Theater with 800+ attendees, and a lot of amazing talks. It was really hard to pick the best ones, but here are the top 4 that caught my attention the most.

Maggie Appleton - A Picture worth a Thousand Programmes

The conference started with Maggie Appleton’s talk A Picture worth a Thousand Programmes. She talked about the importance of visuals as part of the learning process in programming, and how they make programming concepts less abstract, easier to understand, and more accessible to more people.

The biggest takeaway from this talk was that currently most of our learning resources are “text-centric”, meaning that in most of our documentations or blogs, text to visuals proportion is 98% to 2% and that we need more visual media and tools to introduce when learning about programming languages.

Visuals are like a bridge between the disembodied abstract world and embodied world that we as humans could see, hear or feel.

Maggie explained that when we are learning abstract concepts for the first time, the way we could understand them is to “map” something we know from the real world and apply the same qualities to the concept that we don’t understand.

Maggie highlighted 3 main things that visuals can reveal:

1. Fundamental metaphors embedded in our programming languages. For instance, we write our React application as a hierarchical tree of components because in that way we can easier comprehend how that structure would look and how it would behave.

2. Spatial mapping. We use it to reason about our program structure and data is moved through it. For example, in React, components can pass props down the tree vertically or have terms like “prop drilling”.

3. Reveal how our programs behave over time. Maggie showed us an example of how React’s useEffect hook behaves based on what we pass as a dependency array and how many times the component will re-render over time.

One more fun fact about Maggie is that she created the Just JavaScript course along with Dan Abramov. This course tends to rebuild the mental model of JavaScript by applying these visual techniques.

Yan Braga - Storybook and Testing

Yan is a member of the Chromatic team and an open-source contributor for Storybook. Storybook is an amazing tool that helps us develop and test components in isolation. Since it supports many different types of tests (HTML snapshots, visual regression, etc.), in this talk, Yan focused on Interaction tests.

Since UI issues are inevitable, Yan introduced us to the AAA testing pattern which, in the anatomy of a test, stands for:

1. Arrange - Isolate components and setup test case is hard, we need to mock the router, provide a theme, mock redux store, etc.
2. Act - simulate interactions with Testing LIbrary
3. Assert - run assertions with Jest

One of the Storybook goals is to arrange testing with visual feedback, not only for great experience writing tests but also for debugging tests, which was not great so far in the industry with most of the CLI tools provided.

Yan showed us how we can move Storybook stories inside of a test and assert the interactions by running that test in a browser environment with a great set of visual feedback and steps we took during that test. Now we can inspect our failing test with ease, because in cases when some error occurs, visual feedback would take us to that exact step where something went wrong, so the whole experience is like writing E2E tests for Storybook components.

In that way, Storybook would allow us to test more complex components which are fetching the data, managing state, doing some page navigations, etc. I found that amazing and really useful addition to my Storybook skillset. After this talk, I definitely plan to integrate Interaction tests along with Visual tests which we use on our project currently.

Michael Jackson - Supporting many JS environments in Remix

Michael Jackson is well known in the community as the creator of React Router. Recently, together with Kent C. Dods (another React superstar ⭐️), they have created the Remix framework which is focused on building web apps with great UX and performance.

First, he talked about Remix in general and how they have integrated React Router within Remix. Having UX in mind, router outlets allowed them to change only the part of the UI that is changing even if we are going to another page within our React app and not throw away the whole markup from the previous page, which looks amazing.

Michael also talked about how Remix favors the Progressive Enhancement pattern. This means that we don’t necessarily need to ship MBs of JS to the browser in order for our app to work. Instead, we can ship HTML and CSS and make the app usable and enhance that experience with JS code when needed.

Remix also perfectly fits in with React’s Suspense feature. Since data that we show on the client-side is basically the client-side cache of a server-side state, Michael said that Remix handles network waterfalls with data prefetching strategies. This means we can do a parallelization of fetching and delivering the data that the component needs immediately, from the server to the React Suspense boundary, and not wait for the components to load and then trigger the request for the data.

Remix also automatically handles interruptions, errors, revalidation, and race conditions, and allows us to show more optimistic UIs when mutating data. Since Remix is a browser runtime as well, it handles a lot of special use cases like handling multiple submit clicks on a form without the need to call event.preventDefault(), handling transitions to the next page, and so on. In the end, Michael mentioned what are the challenges of the Remix team in handling different environments like Node.js, Cloudflare workers, Deno, etc.

Ives van Hoorne - CodeSandbox Projects

This talk was my top favorite. It was about CodeSandbox, a tool that developers (including myself) use to quickly setup a working code example and collaborate with other developers, dramatically improving the experience of sharing ideas and testing those ideas with rapid prototyping.

Ives, one of the creators of CodeSandbox, talked about how this idea was born out of their intention to help people who just started to learn some programming language.

So they created this “sandbox” which has a template of an already setup React project with everything needed, allowing a new developer to just change some text and automatically see the result in the preview. That’s an immediate dopamine injection for new developers and inspiration that programming maybe isn’t that hard and that they could do it as well. Inspired by that idea, they worked on a CodeSandbox for a few years and built a lot of new helpful functionalities into it.

Then Ives also presented CodeSandbox Projects, which they believe will revolutionize the experience of working on large-scale projects. The way they intend to do that is by integrating features of Git inside of a CodeSandbox, so every team member could create their own branch, and push them to the Github repository (since CodeSandbox already has full Github support), and even fork the git branch.

Wondering how they managed to do that? They simulated Git with the help of the Firecracker virtual manager tool under the hood. That means that your code reviewer could just fork a branch and go to the URL where everything is already set up and see the preview of the current state of the app, without having to pull your latest changes locally, and install new npm dependencies and then run the app locally. Everything would be taken care of, and it could potentially speed up the process of the code review rapidly.

The highlight of the conference was when Ives opened the same project in Visual Studio Code and put it side by side with the version running in the browser in the Codesandbox. He put the cursor in the VSC, and immediately his avatar showed up next to the very same line of code inside of a CodeSandbox! The whole theater went “Wooow” at the same time. This means that whether you work inside of a CodeSandbox, or inside of a VSC, you can see all of your coworkers at any time inside of a specific file and maybe even prevent conflicts upfront.

Wrap up

This year’s React Conference was amazing - I’ve learned a lot of new cool stuff which I plan to try out in my everyday development, heard about upcoming features for some of my favorite tools, and gained a whole new perspective on how to perceive some of the programming concepts I was already familiar with.

Also, I met quite a few fellow programmer colleagues from all around the world and shared some experiences and thoughts. Finally, I played a programming challenge and won some prizes at quizzes. :)

All in all, Amsterdam, I had a great time, hope to see you soon again.