Introduction to Lightning Web Components (LWC)

Author

mirketa

September 1, 2022

The Lightning component development model is compatible with the original Aura-based Lightning component development model. HTML and JavaScript are used to create Lightning web components. An Aura component and a Lightning component can coexist and interact with each other on a page. Web components powered by Lightning are custom HTML elements with their own API. In the series below, you will learn how to use Lightning Web Components. This will help you gain a deeper understanding of LWC.

Benefits:

The result of integrating specialized services with a standard web stack is:

Large-scale modular apps are easy to develop.
Utilizing the most current web functionalities and constructs.
Transferable skills and a common model.
The LWC framework can be quickly ramped up by any web developer working with modern JS frameworks.
The interoperability of components.
Enhanced performance

What are the components of a Lightning Web Component (LWC)?

An LWC is also primarily composed of HTML and JavaScript, just like an AURA component.CSS is an optional component. However, additional configuration files are also included for LWC, which define the metadata values.

The LWC component would be as follows:

1.HTML

Has a root tag <template> that defines the HTML for your component.
Rendering replaces the template with the namespace-component-name tag2. JavaScript

2. Javascript

Use the import statement to import functionality declared in a module, e.g., the core module.
You can use the export statement to let other code use functionality from a module.
We extend Lightning Element in the component and export it as a custom wrapper for the standard HTML element.
@Wire decorators – To read Salesforce data, Lightning web components use a reactive wire service. The component re renders when the wire service provisions data. Components use @wire in their JS class to specify a wire adopter or an Apex method.

If you want to use apex methods via @wire, you must annotate them with cacheable=true.
The @wire service is reactive. The component re-renders when the wire service provisions data. It’s better to go with the imperative approach if you would like it to be fired on-demand.

@Api decorators – this decorator is used to make properties or methods public in lightning web components. This way they are accessible outside the component in which they are declared.

For example – A parent component can set a value of the property in a child component.

@Track decorators – this decorator is basically used to make properties or methods private in lightning web components. This property is not accessible outside the component in which it is declared. Only accessible within the component itself.

3. Configuration

In an XML file, metadata configuration values are defined for a component

The Components Label
Availability
Attributes of configuration
Builder Attributes

4. CSS

Adding style to a component.
Style sheets are automatically applied.

Conclusion

It’s a great time to learn about Lightning Web Components, which offer the latest web standards, deliver remarkable performance and productivity, and seamlessly integrate with existing code.