Skip to main content

Lightning Web Components

What is Lightning Web Components (LWC)?

Introduction:

Salesforce introduced Lightning Web Components(LWC) as

What is Lightning Web Components (LWC)?

Introduction:

Salesforce introduced Lightning Web Components(LWC) as a modern framework for building dynamic, reusable UI Components on its platform.it replaces the older Aura framework and offers amore efficient and streamlined way to create web applications within the Salesforce ecosystem.

Built using standard web technologies like HTML, JavaScript,and CSS, LWC takes Advantage of advancements in browser engines and web standards, providing Salesforce developers with a familiar, fast and lightweight framework.

Why LWC was Created:

Before LWC, Salesforce developers primarily used Aura Components, which, are powerful, but required proprietary syntax and relied heavily on Salesforce's Framework abstractions

As web standards matured, the need for a more streamlined and modern approach to building web Components became apparent.

LWC was introduced to align Salesforce development with common web technologies, enabling developers to build faster and more efficient Components.

Core Features of LWC:

1.Built on Web Standards

LWC uses standard web technologies like Web Components, Shadow DOM, ECMAScript (ES6), and custom elements. This makes its easer for developers with experience in web development to transition into Salesforce development.

2.Component-Based Architecture:

LWC follows a modular, Component-based structure, where each piece of the user interface(UI) is encapsulated into reusable Components. this allows for easier code maintenance,reuse, and collaboration between developers.

3.Fast Performance:

One of the key benefits of LWC is its native execution in browsers. By leveraging modern browser capabilities, LWC components run faster and more efficiently than Aura components, reducing load times and improving the overall user experience.

4. Reusability:

LWC components can be reused across different Salesforce applications, making development faster and more scalable. This reusability also encourages a design system approach, where common components are shared across teams and projects.

5. Easy Data Access:

With Lightning Data Service (LDS), developers can easily access and manipulate Salesforce data without writing complex Apex code. LDS automatically handles data caching and synchronization with the server, simplifying data operations.

6. Security:

LWC runs in a Locker Service Environment, ensuring strict security controls. Locker Service isolates component namespace and ensures that components cannot access unauthorized resources, provides protection against XSS & other attacks.

Test LWC:

Jest is a powerful JavaScript testing framework, to write unit tests for all of the Lightning Web Components. Jest allows us to run tests directly from the command line or within IDE (with some settings), without needing a browser or SF org connection.

By running tests in “watch mode”, we can get immediate feedback while you’re coding.

  • Test a component in isolation.
  • Test basic user interaction (clicks).
  • Verify the DOM output of a component.
  • Verify that events fire when expected.

Limitations of LWC:

  1. Aura components and LWC can coexist, but there’s no direct compatibility.
  2. Limited support for some third party libraries due to shadow DOM.
  3. Basic offline support with no complex caching mechanism.
  4. No native SEO optimization due to client-side rendering.
  5. No support for older browsers.