Published: 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-optimized. Users experience less delay in interaction with content, and perceived performance is enhanced dramatically – Problem solved for users on a slow connection. One of the many benefits of web apps, websites, or PWAs built using React.
Table of contents
1. Hello Sign
2. Culture Trip
3. Tinder PWA
4. Welt News
9. Canva Live
10. Whats App Web
12. Fiver Business
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 can potentially erode the customers’ trust.
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. React Router is one of the most popular libraries developers use along with React.js for client-side routing.
Also, mobile app 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.
They witnessed longer session times and more messaging on PWA than on react 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.
Compliment with how brands solved their problems like low retention rate using PWA solutions.
Instead, Welt’s team went ahead with partial hydration, wherein only necessary JS files are sent to the client’s browser. The website 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.
Discord’s frontend is entirely built on React. It is a voice, video and text chat app that allows its users to build worldwide communities and interact with like-minded people.
The Discord platform uses React and routinely upgrades whenever a new version of React is out or whenever they seem it necessary. Infact, once when they faced a memory leakage issue (after upgrading their React framework), all their issues were thoroughly addressed. This particular example shows that no library or framework magically enhances performance. Front-end engineers must always evaluate their code critically for best results.
Their success with the React.js library inspired them to build their mobile app on React Native as soon as it was made open-source in 2015.
Trello is a project, workflow, and task management tool, using which the user can get a much more comprehensive and clearer view of their teams, tasks and progress.
Trello is built on React. Well, that was not always the case. They switched to React framework a couple of years ago when their old front-end framework began hindering their platform’s growth.
Also, later when they wanted to adopt GraphQL, their modern and modular architecture built on React framework was able to smoothly integrate with the same.
When Figma wanted to build its website in React, it tried to address to main issues. One was to enable users to sync the designs built on Figma across different devices, and make collaboration intuitive. Second, to develop a functional code that doesn’t hamper any existing code and seamlessly connects with the new design (code).
Not only were they able to provide these new features using React, they now have the flexibility of reusing code and attaching it to any Figma node.
Canva Live – one of the features of Canva (design software) allows audiences be ask live questions while viewing the presentation on Canva. The audience can have this access with the help of a unique url and a passcode.
To render the user interface of Canva Live and handle all the state changes, Canva’s technology team used React library.
Whatsapp web, Whatsapp’s web version too, is built using the React framework. Since React enables the building of a responsive user interface, WhatsApp web provides fast and seamless inter-app transitions and navigation to the users.
Codepen.io is an online IDE which allows the user to write code, without doing configurations for specific technologies on their local system. It mainly focuses on building a social development ecosystem for frontend development.
Codepen’s user interface is attractive, smooth to navigate and interactive, all because of fast rendering because of React.js.
The messaging system of Fiverr Business, a platform that helps you match with the suitable talent for your business is built on React. Adoption of it allows them to perform A/B testing in fast pace before the final implementation of the frontend code.
The natural question that may be surfacing in your mind after you have gone through above examples – Why React? Allow us the opportunity to answer it in brief.
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.
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.
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
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.
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.
My team loves designing websites, PWA and web apps that are fast and intuitive. If you are looking for a full-fledged web development company or specifically want to build the front end, give us the opportunity to be your React JS development company.
Copyright © 2023 NetMaxims Technologies Pvt. Ltd.
All Rights Reserved