What is the (JS) React Equivalent in Salesforce?

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

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

Well, we will 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. As a developer, you can load that onto a server and make calls on the backend. 

The code that you have input renders as a DOM tree. As part of the automated test process, you can interact with the DOM tree to identify locators and 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 arise when things get a little more complicated. As a web developer, you will know that as you build more HTML, CSS, and JS files, the target application becomes increasingly complex, and you ultimately wind up building out or utilizing a framework. The framework allows you to structure the process, enabling 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 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 suppose you are required to shift from a React environment to Angular. In that case, you will either be familiar enough with both to understand that the process will have 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 mockup, you would quickly identify the different components or reusable pieces, such as the filter, tiles, cards, and hero cards. This is as easily identifiable in a Salesforce environment as in React, 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 to. 

Knowing 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 justify a specialist tool, and we will go into more detail. 

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 after year. 

As we’ve already mentioned, Salesforce uses a framework called Lightning Web Components, 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.

It would be best if you now had 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 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. 

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