Moving CV Detail Page to SPA

In our last post, we shared the motivation, architecture, tech stacks and implementation details of our revamping journey to SPA. We have learnt a lot and are in the process to migrate other pages as well to SPA.

We are excited to share the learnings of the migration journey of the CV Detail page from server-rendered views with jQuery to TypeScript and React

From our previous post, you already know we are using context to flow data across components. As our React application is growing we realised few of the components could be used across pages, after all, reusable components are one of the major advantages of React. The problem was Components read data directly from context. That makes our component hard coupled with context.

The solution is to write a wrapper component for each page and pass everything in the form of props to the common component. The common component has shared functionality while business logic is kept at the wrapper components.

We’re migrating our application incrementally. Even the revamped CV Detail page is around 90% powered by React and 10% is earlier developed jQuery functionalities. We already have adopted micro frontend architecture, which is helping in seamless integration with different technology. React and JQuery code is deployed separately and they communicate using window variables.

CV Detail is a data-intensive page, mostly displaying information on the page with few interactions. Data inconsistency is one of the major challenges, It might happen that one field that is a mandatory numeric field now, was a free text field in the earlier version of the application. This is one example but there can be numerous reasons for data inconsistency and it is not avoidable with large-scale applications.

In React if an unhandled exception occurs it causes the entire app to unmount. We don’t want our user to see a blank page when there is some unhandled error because of data inconsistency which in some cases can lead to a javascript error.

Of course, we actively monitor our logs for a permanent fix of unhandled exceptions.

Improved load timing

Our new page loads much faster than the old version. Load time reduced by 22.2%. We are doing route-based code splitting and Component-based code-splitting. Route-based splitting is not enough because on a particular route you might have some components which are rendered under specific scenarios that are a good candidate for code-splitting, thus reducing the chunk size of the bundle. Code splitting has never been easier. The React.lazy method makes it easy to code-split a React application on a component level using dynamic imports.

These metrics are recorded on our local machine and may vary on the network.

A whole new UI/UX

A total makeover was undertaken. The new page is based on the minimalist material design with a theme that is the same across all the revamped pages. You will get a consistent and familiar look and feel across the application.

It is now easier to discover and use actionable items since they are placed in ways that facilitate user discovery and ease of use

Bonus tip: How to identify which components should be lazy-loaded?

Route-based identification is easy. Lazy load parent component which is being loaded on a particular route. It gets trickier to further lazy load Components on a specific route which we call component-based splitting. And it depends on application to application.

Let’s see what works for us.

When you scroll down the page, we load the CV upload by a candidate on demand, this saves a lot of time and bandwidth on the initial load because CV file size is generally much more as compared to JSON data that we fetch on initial load. Do not load heavy resources unless the user needs them.

For our CV Detail page, these two criteria for code splitting helped in optimizing initial load time to a great extent.

There is no thumb rule on what to lazy load, see your usage pattern and identify what are the things that are not needed upfront on the initial load and lazy load them.

With these learnings, we are targeting to revamp the other pages as well. We will soon come back with another blog and new learnings. Until then, Think, Develop, Rollout, and Repeat!

Related posts:

I have seen personal secretaries who practically take charge of bosses life and help him/her stay organized. But when it comes to digital assistants almost all of them need to be told what I really…

Tesla ushered in an unprecedented age of autonomy when it created the vehicle’s hardware and software. Elon Musk, Tesla’s founder and CEO, speaks boldly about its newest product — Hardware 4…