What is the (JS) React Equivalent in Salesforce?

Published by Gabe Rodriguez, May 12, 2022
Thought Leadership

Today we will be discussing the different families of JavaScript (JS) and web frameworks, the allowances that developers and testers alike will make when working with different programming languages and their components. As well as, specifically looking into the relationship between the popular React.js and Salesforce Lightning.

Developers build web applications all the time and Provar is a test automation tool that specializes in Salesforce, so you might be asking yourself – why would you need a specialist tool? Isn’t it just another web application?

Well, we’re going to demonstrate the difference between building something out in Salesforce and developing something in React, Angular or PHP. Whether you’re building enterprise applications like Facebook, Amazon or Netflix; the core technologies enabling web application development are the same and will include libraries, such as HTML, CSS and JavaScript (JS).
These libraries are utilized to build out the content, appearance and behavior of web applications, and as a developer you are able to load that onto a server and make calls on the backend. 

The code that you have input renders as a DOM tree and as part of the automated test process, you can simply interact with the DOM tree to identify locators, elements and execute automated tests. Whether you’re using a React or Angular JS library, there is no difference in how these tests are processed.

However, differences do start to arise when things get a little more complicated. As a web developer, you will know that as you begin to build out more HTML, CSS and JS files the target application becomes more and more complex and you ultimately wind up building out, or, utilizing a framework. The framework allows you to structure the process, enabling the use of templates and components that act as little Lego pieces of reusable code that can be slotted into the front end. Or, perhaps these components can even be deployed as a logic or function in the backend. This saves you, the developer, from manually writing code for reusable elements and the framework is the method of how these components can be applied. 

As developers will know, Angular, PHP, Ruby, React and View are all examples of programming languages with a framework. And if you are required to shift from a React environment to Angular, you will either be familiar enough with both to understand that the process will have some nuances and differences that you and your team will have to account for – or you will need to learn what they are.

This also applies to the Salesforce environment. For example, in the below mock up you would quickly identify the different components, or reusable pieces, such as the filter, tiles, cards and hero cards. This is just as easily identifiable in a Salesforce environment as in React, or Ruby or Rails. 

And so when comparing a library like React to Salesforce there is no difference in this respect, and just like making a shift from React to Angular, there will be nuances that you will need to cater for. 

Knowing this and that Salesforce is comparable to other popular frameworks, you could be forgiven for believing that the learning curve from React to Angular is similar to that of React to Salesforce Lightning. However, the differences between the frameworks does justify a specialist tool and we’re going to go into more detail on that. 

We will use React as a primary example here because, as the below chart from GitHub illustrates, React remains the most popular framework in use across web applications year on year. 

As we’ve already mentioned, Salesforce uses a framework called Lightning Web Components, a framework designed by Salesforce for Salesforce web development. Below we have an example of a Salesforce Lightning web components documentation. As you can see, these can be used for everything from cards, buttons and breadcrumbs to filters. And there is nothing different here than you would see in a material UI or bootstrap front end development library.

You should now have a good understanding of the comparison between React and Salesforce Lightning on a surface level, in the next series of this blog we will discuss the development process involved in building out in lightning, the steps involved, the different file types and how the utilization of CSS, HTML, tools and packages differentiate from utilization in the React framework. 

This will give you a better understanding of where the demand for a specialist Salesforce testing tool comes in and how Provar can help fault find in the Lightning environment. 

Looking for more software development solutions to up-level your Salesforce test automation? We’ve got you covered. 

We use cookies to better understand how our website is used so we can tailor content for you. For more information about the different cookies we use please take a look at our Privacy Policy.

Scroll to Top