[Salesforce LWC] — Why Salesforce LWC? [Advantages of Lightning Web Component]

4 min readFeb 14, 2022

[1] Optimized Performance

(a) Optimized or Minimum Server Calls or Trips

One of the major advantage of Lightning is the improvement of performance through optimized server calls as LWC introduced JS controller. Frequent server calls can be handled at the Java Script layer rather invoking through Apex Controller. JS is powerful enough to handle complex data manipulation. In a real life scenario, rather than calling 5 objects multiple times from Apex; developer can handle that through Single Call from Apex and processing part can be well handled at client side controller.

Stateful Client and Stateless Server is an integral part of Lightning Component Framework which depends on JS (JavaScript) on the client side to manage UI component and application data. Client calls the server when required to optimize performance and server returns the data if required. JSON is used to exchange data between client and the server in an optimized way, which increase the overall performance.

(b) Lazy loading to increase performance

Lazy Loading (LL) is an enhanced and intelligent technique to process, load data and JS components in an asynchronous manner to boost the overall app and specific page performance. LL can be considered to implement in component like <lightning-datatable> to process and load the data asynchronously.

In this approach, it improves the component’s performance as it can display the cached data fast from client side storage rather an extensive trip to server. To improve runtime performance, annotate the apex method with [@AuraEnabled (Cacheable=true)] to caches the method results on the client. You must set [cacheable=true] to use [@wire] to call an Apex method.

(d) DOM Rendering

It offers enhanced DOM rendering engine so that the component can render much faster than Aura Component and any earlier rendering.

[2] Shadow DOM (Document Object Model)

In Lightning Web Component, shadow DOM created automatically without any intervention or invocation of any system calls or function by application developer. Lightning Shadow DOM works on all browsers even if the browser does not provide Native Shadow DOM support. Since not all browsers that Salesforce supports implement Shadow DOM, LWC uses a shadow DOM polyfill. A polyfill is code that allows a feature to work in a web browser.

Shadow DOM is a standard that encapsulates the internal document object model (DOM) structure of a web component. Encapsulating the DOM gives developers the ability to share a component and protect the component from being manipulated by arbitrary HTML, CSS, and JavaScript. Lightning Shadow DOM also provides Generic Error handling framework at UI layer and help the developer and users to get errors in standard framework.

[3] Device Agnostic & Mobile-First

In today’s world of multi-device(s) environment (Desktop, Tablet, Mobile Et.), all application development team must come with responsive web design frameworks to develop-once-deploy-all-devices strategy. SLDS (Salesforce Lightning Design System) offers RWD (Responsive Web Design) patterns to view in multiple devices based on the size of the screen or web browser without any extra effort by developing custom code at developer end. LWC RWD takes care that implicitly in the design pattern.

At high-level technical insights — SLDS Grids divide the screen width into 12 virtual columns. With the help of SLDS Grid, developer can specify the column span of components for each of the different screen resolutions; Small for Phone (page width between 480px & 767px); Medium for tablet (page width between 768px & 1023px); Large for Laptop or Desktop (page width above 1024px).

LCF (Lightning Component Framework) creates responsive content with Lightning-Layout and Lightning-layout-Item. Layout represents a Grid where-as Layout-Item represents a component that is part of the Grid. Power is — with the help of few properties, those components generates the required CSS at the background.

<lightning-layout multiple-rows="true">
    <lightning-layout-item flexibility="auto" size="6" padding="around-small">
         <div class="slds-form_horizontal">
                 <lightning-input required type="text" name="AccName" 
                                  label="Acc Name" value={AccountNameVal} 
                                  onblur  ={handleAccountNameChange}>
                 </lightning-input>
         </div>
    </lightning-layout-item></lightning-layout>

[4] RAD (Rapid Application Development)

LWC offers bunch of components to use based on apps requirement without any extra work or overhead to develop a component from scratch. Lightning component library offers collection of components to achieve rich & powerful UI.

[5] Lightning Out

Lightning out is an interesting feature that extends Lightning apps and can be utilized by reusing developed LWC component(s) to inside (earlier versions, ex. Aura, VF) and or outside of salesforce. You can use LWC component inside VF (Visualforce) pages or inside Node.js app running on Heroku or to a standalone Aura dependency app or embed the component to an external Site (SharePoint or SAP). You can use below links for technical insights.

Using LWC in a Visualforce page: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/use_visualforce

Using LWC in an Aura component: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.interop_aura_composition

Using LWC outside Salesforce: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lightning_out

[6] LWC — Secure & Lightweight

LWC is secure, fast and lightweight. It provides a layer of specialized salesforce services on top of the core stack, including base lightning components, lightning data service and user interface API. Because LWC built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML. Salesforce is committed to developing open web standards and is a member of the World Wide Web Consortium (W3C).

[7] Browser Compatibility

LWC supports all the browsers as supported by Lightning Experience. Lightning web component uses core Web Component Standards and provides only what is necessary to perform well in browsers supported by Salesforce. LWC adds required Polyfills to work well in all browsers and make it compatible.