What is Lightning Web Components in Salesforce

LWC stands for Lightning Web Components and It is a new framework for building Lightning components. For Lightning Web Components development you need to setup SalesforceDX and VsCode as Lightning components are currently available in the Developer console. It is a DOM (Document Object Model), element created through reusable code and is used to generate a dynamic interface without using JavaScript or building a Library. This feasibility makes it quick and seamless, saving the developers a ton of time and effort on the Web Stack.

Why it is introduced
It introduced to moves one step closer to using web standards of UI development. It helps in learning and utilizing skills that are not confined to the Salesforce ecosystem.
Lightning web components, leverage these new web standards (or browser improvements) and allows developers to create web components that can work within Salesforce Lightning platform.

Also check: Salesforce Lightning Community: An Introduction

It allows you to combine UI and processing. For creating a web application, you still need security, access to server services/ data. This is where LWC comes into place. Salesforce Lightning web components provide these additional capabilities (security, lightning data service). With these, we can create standard web components that can interact and work with the Salesforce Lightning platform.

Lightning Web Components(LWC) vs Aura

• • LWC basically takes the form through native web standards that are in the browser. It means that no added abstraction layer like Aura Framework or any other framework, we only need standard JavaScript to develop whereas Aura is a drag-and-drop authoring tool for easy app building and customizations. Developers can work with both out-of-the-box components and custom-built components.
  • In LWC there is no added abstraction layer, LWC is likely to render faster than aura components since performance is important to deliverability whereas in Aura it renders less fast than LWC components since performance is important to deliverability.
  • Like lightning, LWC is faster in loading the developed components than Aura Components and is a lightweight framework that is built on web standards whereas Aura is built using both HTML and JavaScript.
  • LWC has built-in browser security features from Web Components Standards, so the usage of out-of-the-box is more and less of customization whereas in Aura an event-driven programming model is required in applications heavily dependent upon a graphical user interface, such as those found in the browser-based, mobile web or native mobile apps. It focuses heavily on performing various actions in response to data entry and gesture-based user interaction. These actions include clicks, button presses, and swipes, all of which determine the flow of the application. Lightning Component Framework supports these actions and also provides for custom events that allow messaging across loosely coupled independent component instances in an application.
  • Write components that have no User Interface in LWC and those components can be reused in other components that are more efficient than Static Resources whereas in Aura an integration tool that makes it easier for Force.com apps to consume data from external sources that conform to the OData spec.
  • No additional framework is needed to learn in order to develop LWC and hence transition for the developers is a lot easier whereas Aura allows developers to build reusable components, customize the Salesforce1 Mobile App, and build standalone apps. As a framework built right into the platform, it liberates the UI from the limitations of Visualforce UIs that are non-responsive in their design.
  • With LWC, CSS, Script and DOM Isolation are better and have more limited event scope. With each of these, we have more consistency in designing Components. LWC also supports Two-way data binding with which we can coordinate how data moves between Components whereas Aura is a responsive CSS framework, style guides, and present-day venture user experience best practices. Salesforce is attempting to instruct and manage developers on current ease of use.
    • Syntax in LWC:
      • template
      • slot name=”facetName”
      • lightning-formatted-text
      • .coralGreen{}
      • connectedCallback();
      • JavaScript (functions) in LWC
      • DOM Events
      • this.dispatchEvent()
      • addEventListener()
      • @api
      • {myAttribute}
      • For.each
      • if:true/if:false as element attribute
  • • Whereas in Aura:
      • aura:component
      • !v.facetName
      • lightning:formattedText
      • This.coralGreen {} encapsulation
      • aura:handler name=”init”
      • Expression in Aura Components
      • aura:registerEvent
      • event.fire()
      • aura.handler
      • aura:attribute
      • {!myAttribute}
      • aura:iteration
      • aura:if isTrue

Sample code to print the hello world and set up on the home page.

• • • HelloWorld.html

<template>
	<lightning-card title="HelloWorld" icon-name="custom:custom14">
    	<div class="slds-m-around_medium">
        	<p>Hello, {greeting}!</p>
        	<lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
    	</div>
	</lightning-card>
</template>

• • • HelloWorld.js

import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
	@track greeting = 'World';
	changeHandler(event) {
    	this.greeting = event.target.value;
	}
}

• • • HelloWorld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Conclusion: LWC give more option to developers to construct the applications on the Salesforce Lightning platform that offers a modern technique of web development with better execution for the end-users.

Our team provides affordable and effective Salesforce lightning services like development, consultant, automation testing, component testing, and more. To find out more, contact us today.