I had an wonderful interview today and was asked about working with LWCs or "Lightning Web Components." I must admit, I had done some research on LWC but knew very little about them. So, I decided to change that and travel down the Salesforce-LWC rabbit hole. Let me show you what I found.
What is an LWC?
As stated before, an LWC is a "Lightning Web Component" through the Salesforce software suite. At first, I thought that an LWC may be another version of a React component. They do share some similarities but work differently. According to Salesforce's developer guide, an LWC is defined as a "...reusable custom HTML element with its own API." More specifically, an LWC must contain an HTML file, JavaScript file, and a metadata configuration file (note: the files must share the same name in order for the framework to associate them).
What Does an LWC Do?
Similarly to React components, LWCs control or dispatch DOM events by communicating between parent and child components. Salesforce makes it very easy to create custom events by using the CustomEvent() constructor. The CustomEvent() constructor serves a similar function to Ruby on Rails' "Generator" commands that allow you to build SQL tables (and other controllers, migrations, etc.) using the generator command. According to the Salesforce Developer manual, to dispatch the event in the LWC, you can use the method EventTarget.dispatchEvent(). Note, for ease of use, it's best practice to conform to the DOM event standard of not using uppercase letters, no spaces, and use underscores to separate words. Also note, the event names start with the string "on," so it's also best practice to not have your event start with the word "on." Let's see an example of a markup (our event is called "jump"):
<c-my-component onjump={handleJump}
In the code snippet above, this is an example of the code (or "markup") in the HTML code. As you can see, we are instructing our LWC to run our event called "jump" in the markup by using the "on" string.
Now, we've laid out the basic groundwork for the LWC, let's see what an LWC looks like in code for both the HTML and JS. To start, let's name our component "sprinter" and our component an image to the right of the screen. When the user clicks on the "Move Right" button, the parent component will listen for the event and move the image to the right...
<!-- sprinter.html -->
<template>
<lightning-layout>
<lightning-button label="Move Right" image-name="roadrunner"
onClick={moveRight}></lightning-button>
</lightning-layout-item>
</template>
In the above code, it follows a similar format to JSX used in React where the entire HTML is housed in the (in React it's either a or <>). Note: again, when the user clicks on the "Move Right" button, the image moves to the right. Therefore, in the JS file, we need to develop the function to handle the event...
<!-- sprinter.js -->
import { LightningElement } from 'lwc';
export default class Sprinter extends LightningElement {
moveRight(){
this.dispatchEvent(new CustomEvent('right'));
}
}
LWC vs. React Components
One of the really neat features (in my opinion) is that LWCs allow you to add components within the body of another component, this is called "composition." Let's compare this to React's components. In a React, you build each component by creating the .js file and then link the component by either importing/exporting the component to another component. Additionally, you can send info (in the form of "props") from the parent component to the child component and then import the child component into the parent component.
In comparison to the example presented in the previous section ("What Does an LWC Do?"), let's try to develop a similar component using React to compare (I'm using Tailwind CSS for the image formatting):
import React from 'react'
function Sprinter () {
let img = null
function initialPosition(){
img.style.position = 'relative';
img.style.right = '0px';
}
function moveRight(){
img.style.right = parseInt(img.style.right) + 10 + 'px';
}
return (
<div>
<button onClick={moveRight}> Move Image
<img
src="http://The_Road_Runner.png"
alt="Road Runner"
className="w-1/3 h-1/3"
/>
</button>
</div>
)
}
export default Sprinter;
Note: I have not tested the above code, HOWEVER, I am using this to illustrate how React incorporates both the JS and "HTML" (for React it is JSX) into the same component. This is different from LWCs as they will require 2 separate files to house both the HTML and the JS. One similarity between LWCs and React components is their ability to import and export themselves. Notice how both incorporate the "import/export" keywords followed by the name of the component.
Conclusion
Admittedly, this blog is merely my first steps into the world of learning more about LWCs and Salesforce. There is still so much to cover on the topic but I thought by comparing it to my more well known framework, React, I could better connect the concepts. There will be more blogs to come on this subject.
Sources Cited:
Top comments (0)