Hello, I’m @tanasho, a Software Engineer at Mercari. I typically work on developing Mercari Hallo. At Mercari, we have a system in place that supports individual growth, as described in the follwing article. Recently, I took advantage of this system to attend the JSNation & React Summit 2024 in the US in person.
In this article, I would like to share not only the technical aspects of the conference but also the atmosphere at the venue and my unique experiences, such as being able to discuss with the speakers in person. I hope this report will be helpful for those considering attending a frontend conference in the future.
What are JSNation and React Summit US 2024?
JSNation and React Summit are conferences organized by GitNation. JSNation focuses on JavaScript, while React Summit focuses on React. These events also cover related technologies like Next.js and AI, as well as soft skills like collaboration among engineers. They also provide many opportunities designed to foster networking among engineers, such as lunchtime meetups, workshops led by speakers (held on a separate day), and interactions at company booths. A combo ticket that allows you to attend both events, so I used that to participate.
Here is the schedule and location for each in-person conference.
| Date Time (EST) | Event | Location |
|---|---|---|
| 2024/11/18 9AM – 5PM | JSNation US 2024 | Liberty Science Center |
| 2024/11/19 9AM – 5PM | React Summit US 2024 | Liberty Science Center |
I’ll go into more detail about each of the events below.
JSNation 2024 US
The presentation took place at two venues, with the main stage located inside a planetarium!
I would like to highlight a session that caught my attention there.
Session – JavaScript Evolution and Updates
JavaScript Evolution and Updates
This presentation covered the latest JavaScript methods and the "Baseline" project.
Baseline provides information on browser support for web features such as Javascript methods.
In our frontend development, it can be difficult to ensure there are no issues when using new JavaScript methods in production by checking resources like MDN or “Can I use.” Our team has also been discussing and exploring ways to automatically detect if new Javascript methods can be safely used in all core browsers during the coding phase, using tools like a linter. That’s why I was interested in this presentation.
Baseline helps with compatibility checks in all core browsers at the following stages.
As described in the website linked below, core browsers include not only desktop browsers but also mobile browsers.
Newly available: The feature is now supported by all core browsers.
Widely available: 30 months (2.5 years) have passed since the feature became compatible across core browsers.
Deciding which state to use depends on your project. Given that defined “all core browsers” are widely used today for both desktop and mobile, Baseline serves as a reliable indicator that can help in compatibility checks.
Moreover, there is consideration for Baseline supporting developer tools like a linter. While we’re not sure what these tools will look like yet, I’m excited to imagine a future where a linter can automatically meet Baseline requirements during the coding phase.
After the session, there was Q&A time where participants could ask a wide range of questions, from casual topics to technical queries.
Question Room
There was also a Question Room where attendees had the opportunity to talk with the speaker immediately after the session. I visited the Question Room after the JavaScript Evolution and Updates session to talk with the speaker. It was a great opportunity to deepen my understanding of the session, and I was delighted to connect with the speaker.
During our conversation, we discussed a real issue related to the portal application we typically develop for our partners. In this application, we use the crypto.randomUUID() method and encountered an issue when a portal user accessed it with an older version of the Safari browser on a PC. We talked about how beneficial it would be to have a system that allows developers to specify target browser versions and to detect any code that doesn’t meet these version requirements at the coding phase using a linter.
I also enjoyed hearing about life in New York and how the presenter, a member of the Chrome team, works. This made the day a very meaningful experience.
React Summit 2024 US
The React Summit also featured presentations held in two venues, similar to JS Nation. At that time the release of React 19 was approaching, so there were presentations introducing its new features and panel discussions on the future of React. I would also like to share the atmosphere at the React Summit.
Session – Aligning Patterns Across Design and Development
Aligning Patterns Across Design and Development
This was an introduction to Code Connect, the latest feature in Figma. I participated because I wanted to explore if I could leverage Figma more efficiently in my work.
Code Connect is a feature in Figma designed to bridge the gap between designers and engineers. With this feature, you can reflect the implementation of components in Figma’s design, enabling synchronization between code and design in Figma.
Moreover, prop names are also integrated, providing a unified understanding of which props are used to display the component. This setting code can be viewed and copied directly from the Code Connect panel in Figma.
Taken from https://www.figma.com/code-connect-docs/quickstart-guide/
In my work, I sometimes find it confusing to choose the correct props in the design system because it’s not immediately clear which props are being applied. Additionally, there are cases where the prop names differ between implementation and design. While many methods exist to generate code from design, they don’t always sync perfectly. This feature is interesting because its approach of reflecting code in design ensures consistent synchronization and aligns understanding between designers and engineers.
Additionally, linking component code to Figma is straightforward thanks to the interactive setup command as described in the guide below. To summarize, this command generates a figma.tsx file for the component and then you use a publish command to sync it with Figma.
Getting started with Code Connect
Sponsor Booths
Several sponsor booths were set up at the venue.
After the presentation ended, I visited Figma’s booth and engaged in various casual conversations with the people from Figma through demos. During the demos, it occurred to me that the feature was similar to Storybook, so we discussed how to effectively differentiate usage between Storybook and Code Connect. We talked about the fact that Code Connect is for aligning understanding of UI components between designers and engineers, while Storybook seems to be for checking their actual behavior and testing components.
In conclusion
This concludes my report on JSNation and React Summit US 2024. Although this article doesn’t cover every presentation, a variety of interesting topics were discussed, such as the use of Memlab for detecting memory leaks and the introduction of an AI-powered Chrome Inspect tool. One of the great aspects of attending conferences like this in person is the opportunity to explore these topics further during Q&A sessions, connect with fellow engineers, experience demos, and share our daily technical concerns and interesting technologies through casual discussions.
If you’re interested and planning to attend, I suggest preparing a schedule ahead of time to select which sessions to join as there are many choices and time is limited. JSNation and React Summit are also held in the Netherlands, so you could consider attending there as well.
