Lessons Learned From The React Global Online Summit 22 – Junior Track

On November 8th and 9th, I participated in the React Global Online Summit as a listener. There were numerous topics covered in this online event, and in this article, I would like to go through a few of the sessions in the junior track, such as Composable Microfrontends, React Hooks, TDD with User Interfaces, and Web Performance.

Composable MicroFrontends With React – Sohini Pattanayak

The React Global Online Summit started with Sohini Pattanayak, Associate Product Manager at Entando, who helps developers, architects, and enterprises accelerate development through the use of modular architecture in composable applications. She began her talk, “Composable MicroFrontends with React,“ by outlining the progression from monolithic applications to micro frontends throughout history.

Pattanayak mentioned two strategic technology trends for 2022: The first is composable apps, which are created from modular, business-focused components that simplify the development and reuse of code. The second trend is the use of cloud-native platforms, which are technologies that let you create new, robust, elastic, and agile application architectures.

She then explained their product called “Entando” which is an open-source application composition platform for building enterprise web apps on Kubernetes. This platform provides a set of technologies to build, deploy, run, and manage applications developed by composing together components (micro frontends, microservices, UI/UX elements, etc.) and business capabilities. On Entando‘s YouTube channel, she goes into more detail about the different roles and how to use this platform effectively.

All About React Hooks – Nivetha Maran

The second talk at the React Global Online Summit that I would like to mention is Nivetha Maran’s “All about React Hooks.” Maran provided a brief history of React and then described the following hooks: useState which gives local state to functional components; useContext shares values used by multiple components in the global state, like user authentication or preferred languages; useEffect’s name comes from “side effect,” which affects something outside the scope of the function being executed (like network requests, subscriptions, data fetching); useCallback is used to avoid performance issues in the child components memoizing the callback; useReducer is an alternative to useState and is used for complex state logics with multiple sub-values or when next state depends on the previous one; useLayoutEffect is similar to useEffect but it fires synchronously after all DOM mutations.

Test-Driven Development for Building User Interfaces – Tyler Hawkins

The third presentation, “Test-Driven Development for Building User Interfaces,” was in charge of Tyler Hawkins, Tech Lead at Adobe. Hawkins emphasized the use of TDD when there are clear project requirements, inputs, outputs, and bug fixes. Enzyme was the leading test framework before React Testing Library focused on implementation details like automatically updating state and props, in contrast to RTL’s focus on user interactions. He hypothesized that by knowing our UI design and interactions, we can do TDD to create UI components (even if we don’t know how to implement our components). He did a simple request form demo with TDD and the React Testing Library to prove his hypothesis.

Web Performance Is More Important Than You Think – Hemanth Udupi

The fourth presentation at the React Global Online Summit was “Web Performance is more important than you think” by Hemanth Udupi, Senior Software Engineer at Adobe. Udupi explained some of the data returned from the Performance API to measure the performance metrics of our pages and gave some suggestions on how to optimize these metrics.

In his presentation, web performance was defined as the measure of how quickly a user’s web browser can download and display web pages. If our app’s download time is less than 2.5 seconds, then it has good performance. However, if it passes 4 seconds, then it will be considered to have poor performance. 

To evaluate the performance of our web applications, he recommends we use the Performance API. The Performance API is a set of standards that measure and analyze various performance metrics. The benefits of using Performance API include improving the performance profiling experience in development tools, using Chrome Dev Tools and other tools (Lighthouse), real-user measurement in production, and getting precise timestamps for all network requests.

window.performance is a read-only attribute that returns an object that gathers all the data. Some of the key data are fetchStart and responseEnd which are the times taken when you start making a network call and receive the response from the server. DomContentLoaded and Processing, which are not in our control, indicate that the browser is digesting the data received from the server. 

The Performance Timeline API, which is the extension of the Performance API, has three main methods such as:

• getEntries()
• getEntriesByName()
• getEntriesByType()

He also explained important definitions to understand the Performance API parameters:

Navigation timing is the time reported from the time you hit “go to the page” until it starts loading. (For example, from the previous page to the new page, or from 0 to the new page)

Paint timing is the time spent drawing pixels on the browser. There are two painting timings: first-paint (the browser painted the first pixel) and first-contentful-paint (the first bit of content is painted on the DOM).

Hemanth offered the following suggestions for improving web performance with React: 

• make your websites usable as soon as possible through lazy loading and transitions, 
• use an optimized library instead of building your own, 
• bundle only what you need and optimize the dependencies, 
• use React.PureComponent, 
• do not use the index as keys (it is better to use unique keys so that React will know which node to re-render), 
• use React.Fragments or <> to avoid additional HTML element wrappers (then we don’t add extra unnecessary elements to our DOM), 
• consider Server-side rendering (faster than client-side and consistent SEO performance), 
• enable gzip compression on the web server (it could improve to 70% of our bundle size). 

He also mentioned an upcoming web performance standard called “Largest contentful paint,” a user-centric metric for measuring perceived bad speed. It marks the page load timeline when the main content has likely loaded.

Conclusion

Thanks to the Geekle team for organizing the React Global Online Summit and to the speakers for giving such great talks. I learned a lot of new information about upcoming front-end technologies. In the following weeks, I will post a summary of the senior track along with other worthwhile talks on topics like React & Performance, Functional Programming, React-Remixed Advanced, Session Management, and others.