Lightning Web Components (LWC)
The LWC model leverages recent web standards to create a new programming model. It's not a completely customized and development-wise rigid framework, but rather a flexible one. The main thing to make it a good fit for modern Salesforce Rich User Interfaces is the Web Standards and the thin layer of specialized services. A thin layer of specialized services consists of Base Lightning Components, Lightning Data Service, and User Interface APIs which work behind the scenes to provide LWC.
The reason they are better than Lightning Components is that they are simple to define and develop, greatly because they comply with updated web standards. As such, developers skilled in these technologies can use this framework to develop Lightning Components for their pages, along with deploying these components it does not require as much knowledge of the Salesforce Platform as is required for regular Lightning Components. As a result, more people are able to build Lightning Components more efficiently, allowing admins to reach out to a broader range of professionals for help.
For the following reasons, a change was needed:
- It is possible to optimize rendering.
- The UI elements were few and far between.
- The buildings lacked modern construction.
- Modular apps were not suitable.
- Updates were made to web standards.
The AURA Framework developed its own learning curve and became a skill and you can know more aura vs lightning web components in this article.
Aura components can coexist and interoperate with Lightning Web Components (LWC) using microsoft 365 services.
Component structure of LWC
A LWC also contains HTML and JavaScript, similar to an Aura Component. Content like CSS is optional. Moreover, an XML configuration file also contains the metadata values for this component, which are in addition to these for LWC.
It is important that the file names match the component names. Following are some rules for naming files and folders:
- The first letter must be lowercase
- Contains only alphanumeric characters or underscores
- In the namespace, it must be unique
- Whitespace cannot be included
- An underscore can't be used at the end
- No hyphens (dashes) allowed
As an example of the LWC file structure, here is what it looks like:
Let's take a look at each one of these files:
HTML
Your component must contain a root tag *template>
When rendered, the *template> tag is replaced by <namespace-component-name>
JavaScript:
Use the import statement to import functionality declared in a module.
A module's export statement can be used to make functionality available to other code.
We extend the LightningElement in the component and export so it becomes a custom wrapper for a standard HTML element.
Configuration:
An XML file that describes the metadata settings for the component
We set targets for the deployment of components on different pages, such as the App page, the Record page, etc.
CSS:
The process of styling a component.
Style sheets are automatically applied.
What would the component build look like with the files we discussed?
Component UI:
The component can be built in your Visual Studio setup and deployed to your organization. Don't worry if you haven't set up your Visual Studio Code yet. There is also a Salesforce playground for LWC - check it out here.
Why Shall We Go for LWC Instead of Existing Aura Components?
Behind the scenes, the difference is only visible to developers. Salesforce, however, advises developers to use LWCs when developing SPAs for the following reasons:
- Using LWC basically uses native browser web technologies, which makes it easy for anyone to learn. Therefore, we don't need distraction layers like Aura Framework or any other framework, just standard JavaScript.
- As performance is vital to deliverability, LWC will render faster in the absence of any abstraction layer than the aura components.
- Faster loading sites: LWC has a lightweight framework and is faster at loading developed components.
- With LWC, browser security is built-in using the Web Components Standards, so customizations are less frequent.
- There are components in LWC that do not have UI, and we can reuse these components in other components, making them more efficient than static resources.
- Developers don't need to know any additional frameworks to develop LWC. Hence, this makes the development process easier.
- The Script, CSS, and DOM isolation with LWC is better and has a broader event scope with better security, testing, and browser compatibility. This improves the consistency in the design of the components. In addition, LWC supports two-way data binding, which allows us to coordinate how data moves between various components.
Benefits of lightning web components
Many of the advantages of regular Lightning Components are amplified with Lightning Web Components.
Developers
- Building components for pages faster with a standardized architecture.
- For faster deployments, code reuse is supported.
- Support quality assurance through unit testing.
- Lightning Web Components can be accessed by more developers who can create desired solutions faster.
Admins
- Lighting Web Components, an advanced standard-based architecture, simplify the process of creating Lightning pages.
- Simply click to integrate Lightning Web Components into your application.
Guide
- Without browser interference, the components run more fluidly, enhancing performance.