Lessons Learned From the React Global Online Summit 22: Senior Track

On November 8th and 9th, 2022, I attended the React Global Online Summit, an event organized by the Geekle team. I already wrote an article about the React Global Online Summit junior track – but this time, I would like to focus on the senior talks.

"React and Performance" – Balram Singh

The first talk that I would like to share is Balram Singh's, who is a manager at Publicis Sapient. Balram began his talk by recapping the evolution of the web. Then he started comparing Gatsby and Next.js on various features because both offer the most recent rendering techniques, SSG and SSR.

Plugins and Templates

The 3000+ stable plugins and templates provided by Gatsby save a significant amount of development time compared to Next.js.

Preferred Deployment Space

The Gatsby Cloud is the ideal deployment environment for Gatsby, whereas Vercel is the preferred deployment area for Next.js. If you choose the suggested option, you will benefit from a number of features that will speed up development.

Data Fetching

Gatsby promotes the advantages of GraphQL and advises its users to utilize it, whereas Next.js does not.

React Features

Although React 18 is still in beta, Next.js has examples for its React Server component. Unfortunately, Gatsby hasn't given us any new information on this yet.

Docker

In contrast to Next.js, which can be deployed on any hosting provider that supports Docker containers, Gatsby Docker can deploy websites in a Docker container.

MonoRepos

Monorepos offers us to share code and components between different front-end applications. For example, Lorna and Travis are used to building mono repos in Gatsby, whereas Turbo repo can be used to produce mono repos in Next.js.

He concluded his talk by explaining when to use Next.js and Gatsby. Gatsby is the best option if we want GraphQL, we need to build our site rapidly utilizing Gatsby plugins and templates, and the stability and consistency of the data are crucial to us. On the other hand, Next.js should be used if we need complete code control and frequent website updates, and React's most recent features are essential for us.

"Writing Fantastic Tests!" – Abhighyaa Jain

The second talk of the React Global Online Summit was given by Abhighyaa Jain, who is a software engineer at DisneyPlus Hotstar+. She emphasized the importance of writing tests and discussed the differences between E2E tests and unit tests and how to fill the gap between them.

Abhighyaa stated that unit tests are simple and quick to develop, their test components are isolated and detailed, but their scope is very limited. While E2E tests do not have these restrictions and include the entire system in their scope, they also do not require any mocking. But they are expensive and enter very late in the development cycle.

According to her, there is a gap between the unit and E2E testing, and we need something in between to get confidence in the overall application. To do this, our tests must be simple to understand and quick to build, provide sufficient confidence, pass the refactoring test, enter early in the development cycle, and eliminate dependencies.

She showed the page testing options provided by Next.js. Next.js considers a page as a separate unit and lets you test against that page. She concluded by suggesting to those who develop tests that writing tests with confidence and covering all use cases are more crucial than test quantity and coverage percentage.

"Supporting React, A Library Providers Perspective" – Niall Crosby

The third talk was given by Nial Crosby, founder of the Ag Grid, a data-grid library used in various frameworks to show data in rows and columns. Nial demonstrated why the Ag grid hadn't functioned well with React, the problems that they had to deal with, and the changes they made. He also evaluated his new approach with SolidJS to compare it with ReactJs and JavaScript solutions.

The Ag grid Project started back in 2015. Niall had created an Ag grid for himself in his previous job. Since the code was open-source, he could see there were many downloads of the project, so he decided to quit his job to start his company. Ag-grid has an enterprise version with more features; today, they have ten thousand companies using it. Despite numerous real-time modifications, Niall stated that the grid's performance is good.

The Problem They Faced With ReactJs

To support as many frameworks as possible, they had two options: one was wrapping the component (same Js code to use for every framework), and the other was writing an Ag grid component for each framework. They went with the wrapping solution, writing the JS code and wrapping it to deliver to other frameworks. Then they had the liberty of customizing the framework they chose.

They had an issue with the React approach. To explain the problem, he added suppressReactUI={true} prop in the AgGrid component. There was an additional div in the console that was called ag-react-container. The grid component's structure was also not visible. With the given prop, they used js components instead of React. On the other hand, it wasn't a good experience to double the number of div elements in DOM for performance.

The solution was to decouple the business logic from the DOM operations, leaving the components only in charge of interacting with the DOM. The controller assigns the DOM operation to the component. 

After deleting that prop that he added at the beginning of his talk, we could see the row and cell components in the console, and there was no longer any extra div.

He demonstrated that resizing the width of columns in React takes longer (60 ms) than changing it in JS (11 ms). This is because React uses the Virtual Dom to style, whereas JS does not. As a result, react performs well when it comes to modifying data.

He then discovered SolidJS, a React-like framework without Virtual DOM. He created the SolidJS rendering engine and saw that it was way faster than ReactJs in styling and similar when it comes to updating the data.

"React Remixed Advanced" – Daniel Afonso

Daniel Afonso, the developer advocate at OLX Group, began his speech by advising the audience to watch his React-Remix talk at the JS Global Summit in 2022, as it was the continuation of what he was talking about at that time. Daniel claimed that because Learning Remix does things the way the web has been doing them for the past 20 years, it is similar to learning the web.

He explained to us how to create user-friendly messages with UI components, checking for status errors and handling them with the useCatch hook. He said that ErrorBoundry cases can be used when we forget to add them to CatchBoundaries. We could also add custom messages such as "an unexpected error has occurred." He also showed the useTransition hook to render a UI component when our form is submitted.

"Session Management Using React Router V6" – Anton Kalik

During his talk, Anton Kalik, the Senior Software Engineer at Amenitiz, presented the new session management features in React Router v6.4. He advised us to be aware of where the protected and the public site are. When we need access to protected information, we can't get it if we don't have sessions, yet on public routes, we are free to display whatever we want, even if we don't have any sessions.

In V6.4, there are new features, and they require the use of element prop and having a MainLayout with navigation and all required pages inside of it. Additionally, the use of async requests and actions also makes life easier. Anton advised that when we start a new project using version 6.4 like this, we could deliver business value quickly.

Conclusion

It was great to participate in the React Global Online Summit. Although I could not include a summary of all of the talks, I enjoyed them. If you are interested in these topics, I strongly encourage you to take part in the upcoming edition that will take place on April 18–19. For more information, feel free to visit the event site.