DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Coding
  3. JavaScript
  4. Lessons Learned From the React Global Online Summit 22: Senior Track

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

This article reviews the highlights from the React Global Online Summit- focusing on the senior track.

Beste Bayhan user avatar by
Beste Bayhan
·
Jan. 30, 23 · Opinion
Like (1)
Save
Tweet
Share
2.83K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Talk by Niall Crosby at the React Global Online Summit

"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.

JavaScript React (JavaScript library) Software developer Web developer application code style

Published at DZone with permission of Beste Bayhan. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Submit a Post to DZone
  • Spring Boot, Quarkus, or Micronaut?
  • REST vs. Messaging for Microservices
  • HTTP vs Messaging for Microservices Communications

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: