Learn All About the Lightning Web Components in Salesforce
Why Lightning Web Components (LWC)?
As of now, the AURA framework which was used for Lightning Components is outdated and it was time for a change for the following reasons:
- Aura Framework was developed as a skill with its own learning curve.
- Rendering could be optimized.
- Standard UI elements were scarce.
- Lacked modern constructs.
- It was not fit for modular apps.
- Web standards were updated.
- Aura Framework had to be learned.
It is also possible for Lightning Web Components (LWC) to coexist with Aura components and manage their interactions together.
What Lightning Web Components (LWC)?
Unlike many rigid and customized frameworks, LWC offers quite a bit of flexibility. Instead of being totally custom and development-wise rigid, it's quite agile. The main reason it is a perfect fit for Modern Rich UI Implementations in Salesforce is that it is mostly based on common Web Standards and a thin layer of specialized services. In addition to Standard Lightning Components, Lightning Data Service, and User Interface API, this thin layer of specialized services is responsible for implementing the Lightning Web Client.
Don't forget to check out: LWC Interview Questions -1 ( Freshers)
Benefits
Builder attributes are built on top of a thin layer of specialized services on top of a standard web stack:
- Ease of development for large-scale modular apps.
- The ease with which you can leverage the latest web functionalities and constructs
- The use of a common model/skills that can be transferred. (The LWC is easily ramped-up by any web developer who uses a modern JS framework.).
- Interoperable components.
- Enhanced performance.
Here is our new development stack as a result.
Lightning Web Components - Component Structure
The core contents of LWC components are similar to AURA components, including HTML, JavaScript, CSS, and XML configuration files that define the component's metadata values in addition to these.
HTML
- It has a root <template> tag that contains the HTML of your component.
- When rendering, the <template> tag is replaced by the <namespace-component-name> tag.
Check out another amazing blog by Nikhil Kumar: Learn All About Visualforce in Salesforce
JavaScript
- Import function declared in module e.g.-lwc (main module), use import command.
- To allow other code to use functionality in a module, use the export statement.
- Lightning Element is a custom wrapper for the standard HTML element and we extend it in component and export.
Configuration
An XML file that defines configuration metadata values for a component, e.g.
- Components Label
- Availability
- Configuration Attributes
- Builder Attributes
Summary
Now is the best time to learn and get started early with Lightning Web Components, which offer the latest web standards, provide unprecedented performance and productivity, and work seamlessly with existing code.
Reference: sfdcpoint, extentia
Responses