Top Patterns for Migrating Large-Scale Applications to React JS

Migrate large-scale, high-traffic apps to brand-new technology stacks effortlessly. Learn about whatever high-grade practices that can smoothen the application migration procedure to React from other JavaScript libraries.

Migrating a large, high-traffic application to a brand-new technology stack can be a discouraging task. UI frameworks and tools have exploded in numbers giving us both the exemption and disfunction of too numerous choices. If you are reading this blog, you are credibly leaning towards React JS.

React is a strapping framework with an assorted, assistive community of developers who are always convenient to firmness your queries.

In this blog, you will interpret about several of the high-grade practices that our teams have increased from migration projects while working for some of the biggest retailers in the United States.

While the focal point would largely be on jQuery to React JS migration, almost points will service you even if you are coming from another framework, such as Backbone, Knockout, or Ember JS.

Divide and Conquer

In a large application, it is prudent to predate a component-based architecture, i.e., divided an app into littler apps that can be deployed helpless.

For a retail website, for example, rather of creating one React app that spans the whole website, you can occurrent it into abstracted littler apps, such as search and browse, product, bag, checkout, order history, returns, profile, and more.

These can be promote divided into reclaimable functional components (e.g. header, footer, recommendations, product carousel, etc.)

Breaking A Sizable Application into Littler Components

This migration approaching is facilitative even if you have the budget and resources to migrate the integral application in one go. The assets are listed below:

Staggered Release: Migrating a sizable application can takings months. After splitting the app into smaller apps, you can either migrate one section at a time or even ramp up the traffic step-by-step.

Network rules can abnormal traffic to the brand-new app for only confident URLs, while your existing app can handgrip traffic for everything else, just as it is doing now.

If you attending something erroneous with your new app, you can prompt route traffic to the old app while your team debugs and fixes the problem.

Parallel Development: Since the development of assorted sections can progression in parallel, it is achievable to have abstracted teams to takings ownership of migrating various parts of the user journey.

The procedure permits the teams to convey with each other, determine dependencies and gaps in the design sooner, and fix the contents advance on in the development phase.

Staggered Development: If the developers on the team are brand-new to React, you can stagger the development to determine non-critical sections of the website to statesman the development, and usage the learnings to develop more business-critical sections.

Stable Codebase: Continuous development and deployment become simplex. Instead of regression testing the whole application every time something changes, you can only attempt the section that was modified. This formulation makes your application more steady while reducing the testing endeavor during the integral code lifetime.

Hassle-free Deployment: Deployment is more straight because you demand to position only the section that was changed. The release requires only the development team that has worked on the change, freeing up the other teams to conveyance on their day-to-day work.

Independent Scaling: Not all sections of the website receive the identical spate in traffic. For illustration, on a retail website, traffic to merchandise and checkout pages during holiday seasons can see a distinct spike. However, profile and other static sections may not experience any starring changes.

With littler applications, each of them can be scaled severally that can also save infrastructure costs, which is otherwise pointless in scaling the full-length application.

It also discriminate assorted parts of the website so that if one piece of writing goes down, the others proceed to serve requests.

Set Standards with Proof of Concept and Documentation

Appropriate tool assists in structuring and building the app. Create-react-app (React Command Line Interface (CLI) for creating application) does a beautiful cracking job of covering everything from scaffolding the app and code transpilation for ES6 and JSX, to configuring webpack for builds and module loading. Customizations should be known primal in every implementation.

Before the CLI is handed over to the development teams, the UI architects must make over an absolute ‘Proof of Concept’ application with portion tests, monitor the performance, position to a server, and load the page in a browser.

Later, they must examine the files that are being loaded to see if they demand to be split up or combined, caching rules that condition to be set, etc.

It is primary to have well-documented coding standards and behaviour initial hands-on coding sessions with the teams to set expectations before they beginning with the development process. Assign points of contact for each team to resolution queries.

Start with a little group of code reviewers who work with architects before opening up code reviews to respective teams.

Let Go of the Old Code

It may be alluring to try and reprocess most of your existing code to save the resources, but understanding what to let go can assist you accurately computation endeavors required to confront disappointments in the agelong run. If you are coming from jQuery, you must physical object code attendant to the Document Object Model (DOM).

React uses an completely new way of asserting data binding that requires the writing of code from scratch. Here are the areas that you can aspect to salvage your old codebase:

Utilities: Simple JavaScript substitute code — such as those for making API calls, parsing and formatting responses, validating logic, etc. — may be utilization with some modification.

Markup: If you have clean semantic HTML markup, it is fiddling to divided and somebody them into React components, like JSX. But, if your HTML has concentrated some moss over the years, you should start firm and do things the right way.

Styles: If you have existing SCSS or CSS libraries with site-wide styles, it may be accomplishable to re-use them. This is a likely formulation if you are reusing your HTML too.

Be Prepared to Change the APIs

A change from jQuery to React JS isn’t just about swapping one UI library with another — it is a paradigm shift. React-like frameworks mark a change in how we structure sizeable applications for quicker performance and easier maintainability of code.

Around the year 2005, when JavaScript libraries were becoming best-selling and the newer web browsers were becoming more businesslike at running JavaScript, developers started moving a lot of logic that utilised to be conventional handled by the server-side code to the client, i.e., the end user’s browsers.

With the reaching of single-page apps around 2010, routing, maintaining state, attracting, and manipulating data were all added to the garment list of things that JavaScript would execute — all on the browser at the expense of the user’s computing beginnings.

This led to large applications that took a long time to load, stuttered during use, and exhausted the user’s batteries.

Today, we knowing that a page that takes even a some seconds more to load costs a company money in lost conversions. Discoverability is helpless on the speed — Google ranks quicker sites higher on its search results.

Hence, the actual push is to make over UIs that load speedily and stay on answering to user inputs. To attain this, an API must furnish the UI with data in a render-ready format.

Here are a few examples:

The dollar amount sent by the API should be $12,349.99 alternatively of just 12349.99. Insertion of million separator commas, currency symbols should not be performed in UI.

Dates should be sent in the formatting you wish them to be displayed.

A prevailing requirement is where UI necessarily to demonstration a specific section only when definite conditions are met. Instead of making UI derive this status by looking at multiple fields in API response, the API should execute this appraisal at the server and then displace UI an individual true or false flag, like show HolidayMessaging: true.

Remove all fields that are not utilized on the actual page from API response. This reduces the payload and memory requisited to store and work with this consequence in the browser.

Breaking down a large application into smaller components

The side outcome of tailoring API consequence to a page’s demand is that the aforesaid API can’t be reused on multiple pages. There can be assorted solutions to this difficulty. A simplex one would be to pass a page name to the API, which can be utilized to customize the response.

Another solution is to make over an intermediate API layer (sometimes called the API Experience or xAPI) between your existing API layer and UI layer.

UI will call the xAPI and not API layer. The xAPI will telephone your existing APIs to fetch the data, formatting the data as per the demand of a specific page, and send it to UI that is primed to be shown.

When you transmigrate to React, livelihood the API layer changes in brain while estimating the work involved.

Other Technical Aspects

Here is a list of fewer technical features that we have recovered adjuvant in our experience. While all may not utilize to your usage case, you can utilization the ones that hold connection for you.

Don’t touch the DOM: One of the momentous reasons jQuery-based websites execute peaked is that they dealing with the real DOM directly. React, on the other hand, uses a virtual DOM with diffing algorithms externally to operate on the real DOM.

When you build a constituent that reaches out and does its own DOM manipulation, you should inquire yourself if you could habitus the same feature many idiomatically with React’s virtual DOM features.

Use React hooks: While there may be debates on the virtue of switching to React hooks for existing React code, it makes awareness to embracing React hooks if you are writing code from scratch in 2020. You lose nothing by using hooks and it dramatically alter the code for hold back component state, et al.

React Hooks vs. Redux: We have seen people equivalence React Hooks and Redux, but the trueness is that there is only minor overlap in their intention.

Whether your application requirements to utilization Redux depends on respective factors that are beyond the reach of this blog, but if you determine to activity Redux to hold back the state of an application, you can (and should) still use React hooks for the constituent state.

UI Component Libraries: Reckon UI component libraries before you determine to write everything from scratch. React component libraries, such as React Material UI and numerous others, offers remarkably used UI elements, styled and primed to be used in your React code.

Accessibility: If you are building a website in 2021, make it approachable. Make certain all team members, including developers, testers, and project managers, take care workshops and knowledge-sharing sessions to primed the expectations.

Accessibility standards are disreputable challenging to utilize after developing a UI. You must assure that every UI story has specified its availability demand. The stories should be signed off only when they fitting both structural and accessibility requirements.

Set-up Private Artifactory: When you fragmented your codebase into binary littler apps and components, reckon setting up a private Artifactory. There are different solutions to research here, but we like the Node Package Manager (NPM) since the developers are already acquainted with installing and managing dependencies using NPM.

You can set up a clannish registry that is only approachable within your organization with a custom namespace.

Each constituent will have its own facility with its dependence alleged in the package.json manifest file. When a developer wishes to regard a component in another component, he can install and utilization it in his code, just like the use of third-party NPM modules.

Often when components reside in the aforesaid codebase, they start as clean and modular, but over time, as more and more developers work on them, developers start depending on the internecine logic of those components.

This is bad because when the time comes to alteration some interior philosophy of a component, it may occurrence other components that count on its carrying out logic. Setting up asunder repositories for your components will unit you to livelihood assorted components independent.

In our experience, migrating to React from other JavaScript libraries is much about changing the mode we believe about the front-end rather than learning a brand-new framework.

Yes, it can proceeds developers some time to acquire about the tools that React provide, but grateful, it is just plain old JavaScript through precise.