By: Taru M.
06 Jun, 2022
React launched its latest version React v18.0 in March 2022. The new features and improvements like concurrency, suspense, automatic batching, etc. allow developers to make use of scheduling i.e loading of content priority wise. As a result, server-side rendering performance can be hyper-optimised. Users experience less delay in interaction with content and perceived performance is enhanced dramatically – Problem solved for users on a slow connection. It is one of the many benefits of web apps, websites or PWAs built using React.
1. Hello Sign
2. Culture Trip
3. Tinder PWA
4. Welt News
5. Starbucks PWA
The Hello Sign offers eSignature solutions for legal documents. Its products are used for sales contracts, HR onboarding, financial agreements, insurance documents, etc. It allows to prepare, send and track eSignature forms through a user-friendly API. Hello Sign can even be integrated with Google Docs, Slack, Salesforce, Hubspot, etc. It is a Dropbox company and you may be aware that Dropbox also uses React for its SPA (Single Page Application) and mobile version.
Hello Sign has three modules – the Editor, Signer, and Final Document. The challenge was to provide a brilliant UI of all three parts on any screen resolution. Other challenges included enhancing the responsiveness of the editor and maintaining synergy between editor, signer and signed document.
Since, these are legal documents, any slight inconsistency in any of the three modules has the potential to erode the trust of the customers.
Initially, only Signer was made using React, but to solve these discrepancies, they designed the editor with React too ‘cause of its Virtual DOM feature and efficient diff algorithm.
Hello Sign was built using PHP, and React though was part of the tech stack, it was invoked from PHP. This strategy had some limitations. To overcome it, React router with code splitting was deployed to move to a point where all the UI elements come from a single codebase.
Also, developers used a Context-based approach for state management. But they suggest using Redux as a more efficient approach.
The new Editor was built under a codebase split, which allowed us to roll it out to specific accounts or groups of accounts without affecting the rest of our customers. Moreover, it allowed us to roll out the new Editor code while working on a UI redesign—the one we had chosen not to include as part of our move to React—simultaneously. – Asa Ayers, Software Engineer, Dropbox
Culture Trip is a content-heavy website. And its success depends on intuitive navigation and well-executed SEO. It provides useful information on how and where you can spend your vacations, relax, and create joyful memories.
Initially Culture Trip was on WordPress, and it’s expected that with increasing traffic, their performance was getting hit badly. To come on a growth track, they switched their tech stack to React, Next.js, etc and used WordPress as a semi-headless CMS.
Culture Trip’s team embraced React because you can build an isomorphic website for good SEO, use reusable components for fast development, test quickly different UI elements, and overall build a snappy website with thousands of UI elements.
Tinder needs no introduction. To expand their reach and provide a core tinder experience to users on the web, they developed the PWA version using React.js.
You can read our blog to see examples of PWA and how it benefited those brands.
Using React for UI and Redux for state management, they shipped the MVP in just three months. Comparing the size with the native android app, which is around 30 Mb, the size of PWA is a mere 2.8 Mb.
They witnessed longer session times and more messaging on PWA than on native apps. With PWA, within 5 seconds, their web app gets interactive. Studies after studies have shown how crucial it is for websites to engage people within seconds. Tinder’s team used React Router and React Loadable for code-splitting huge JS bundles that were delaying the loading of content. You know, their JS bundle size was just 101Kb after routing which was 166 kB earlier.
Instead, Welt’s team went ahead with partial hydration, wherein only necessary JS files are sent to the client’s browser. The performance is improved as only simple, plain HTML and CSS and few JS files are rendered. Further, code-splitting can catapult the performance to the next level.
Welt, at that time, used Preact, a very lightweight library which is a contender for React, and Next.js for server-side rendering. But, developers can perform partial hydration with React as well.
Another famous brand which doesn’t need any introduction. So, I will in a few lines shed light on the relationship between Starbucks and React. In the podcast, Cher Scarlett, says they migrated to React from Vue. Initially, it was difficult for the team to get hang of it but then using React, Starbucks crafted a high-performance PWA. Just like Tinder PWA, there is an astronomic reduction in the size of the application. The PWA version is 233 Kb while the native app’s size is 148 Mb.
With React’s Context-based state management’, switching between light and dark themes is super-easy which was not before React. Earlier, it was quite a tedious task. To handle large data, initially, Starbucks used Redux.
Starbucks has a lot of forms, and form files have the tendency to eat up a lot of space. React ‘Hooks’, special functions, are extensively employed by Starbucks’ developers to manage the life cycle of forms.
Responsive User Interface and slick transitions
To make any web app or website usable and enjoyable, its UI elements should be highly responsive. Micro-transitions and animations like swipe, loading bars, etc. not only make interaction delightful and humane. It is a way to provide quick feedback about the current state.
Now, to make these UI elements seamless and lag-free, any framework or library must render at a lightning speed and perform effective state management. The state is changed whenever there is an update in UI elements. Like new comments or likes on a post, updating profile picture, chatting on multiple chat windows, etc. Just visualise the frequency of change in state on a website with millions of users.
Virtual DOM and special functions ‘Hooks in React library are some innovative solutions that make it possible to create an ultra-smooth interactive user interface and make the digital experience fun.
Components based-approach for faster and intuitive development of UI elements
Every UI element like a chat window, cart, news feed, etc. is considered a component in React. These components are independent and immutable ‘cause of the unidirectional flow of data. The effect is that components are isolated and change in one component doesn’t alter the state of others.
All these components are reusable. You can even use components made by developers for other projects if they are relevant to you. It is an amazing feature for lazy developers. You see, good developers are lazy developers. React undoubtedly knows how to make life easy for them.
With a modular approach, it is relatively easy to manage thousands of components across multiple development teams.
Flexibility to combine with other powerful libraries
Suppose, you feel React is not good enough for SSR (Server-Side Rendering), then you can combine it with Next.js. To get the benefit of serverless rendering, Gatsby is your option. For routing, React Router is no match. Likewise, Redux for efficient state management. Other useful libraries are Material UI, Semantic UI, React Motion, etc
Server-Side Rendering is better for SEO than Client-Side Rendering
SSR is the loading of JS bundle on the website’s server whereas CSR is the rendering of content using a browser through DOM.
Though CSR is inexpensive and responsive. But JS bundles specifically Virtual DOM bundle is not lightweight, people may experience a blank page or incomplete content as all the burden of loading JS is on the client’s browser, and consequently, perceive it as poor performance.
Server-side rendering not only reduces the initial loading time. It solves the SEO issues too. The net effect is people can interact with meaningful content without perceiving any delay. As mentioned, React 18 has scheduling features to ensure great SSR performance. Or you can even utilise other libraries like Next.js or Gatsby.
To know more comprehensively why you should use React for web development and some pitfalls of it, read our blog on Why React?
Innovation in React is not slowing down. Thanks to the dedication of React’s core team and the community around it. Developers in companies of all sizes and types find creative solutions to optimize for performance and craft highly responsive and lag-free UI.
Though, other lightweight JS libraries like Preact are serious contenders. The timelessness of React lies in its flexibility. The talented developers use it in moderation and combine it with more performant libraries.
Copyright © 2022 NetMaxims Technologies Pvt. Ltd.
All Rights Reserved