Guide To Lightning Web Components - Salesforce Lightning

Lightning web components are custom HTML components fabricated using HTML and standard JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. For both administrators & users, it shows up as components. In this top blog on salesforce, we will talk in detail about the Lighting web components and discuss in detail how it works.

Lightning Web Components is built on top of standard Web Components technologies and provides only what is necessary to perform well in browsers supported by Salesforce. Because it runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Much of the code you write is standard JavaScript and HTML.

It is open source, that engages you to examine the source code, modify the behavior for your requirements, and gather enterprise-ready web components on any platform, not just Salesforce.

Previously, we required different frameworks to manufacture different sides of an application that encouraged external Salesforce. For example, we used the Aura component to develop the employee-defying side of an application on Salesforce. And also we used React, Angular, or Vue to build the customer-defying side of the application, and passed it on to Heroku or on another platform. Today, we can use Lightning web components to fabricate both sides of the application. The advantages of it are huge and with assistance from Top Salesforce Consultants, you would now be able to learn the framework at ease.

We can simply create lightning web components using HTML, javascript, and CSS.

Benefits of Lightning Web Components

It gives an easy way to develop large-scale modular apps
Also, we got the leverage of the latest web functionalities and constructs
A web developer who is working on modern JS frameworks could easily ramp-up LWC
Interoperable components
Allow better performance

With the right assistance from Salesforce Consulting Companies, you can take the leverage of lightning web components at ease

These are the Fundamentals Pieces of your Component

HTML gives the structure to your component.
JavaScript describes the centre's business logic and handles events.
CSS gives the look, feel, and animation to your component.

Don't forget to check out: How to Convert sforce.apex.execute to Lightning | Salesforce Developer Guide

Let’s take a simple example of the Lightning web component:

HTML:

<template>
    <input value={message}></input>
</template>

JavaScript:

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    message = 'Hello World';
}

CSS:

input {
    color: red;
}

Decorators in Lightning Web Component

LWC has three decorators that append functionality to property or function. The capability to create decorators is part of ECMAScript and these three decorators are unique to LWC.

@api: It is used to expose public property. And the public property is reactive & if you want to change the reactive property value, the component is re-rendered. So you know that when a component is rerendered, all the expressions used in the template are reconsidered once again. @api passes the public property values from the parent component.
If you want to use @api decorators, you have to import it explicitly from lwc.
Import { LightningElement, api } from ‘lwc’;

@track: If you want to track private reactive property value & also rerender a component when it changes, decorate it with @track. We can use the private property only in the component where it is defined.
If you want to use @api decorators, you have to import it explicitly from lwc.
Import { LightningElement, track } from ‘lwc’;
@wire: It is used to read the Salesforce data. LWC uses a reactive wire service. @wire is used to call apex method in lwc js controller.
If you want to use @api decorators, you have to import it explicitly from lwc.
Import { LightningElement, wire } from ‘lwc’;

Check out another amazing blog by Shweta here: Stages of Salesforce CPQ Implementation

And also you have to import wire Syntax as shown below:

Import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';

apexMethodName: It recognizes the apex method.
apexMethodReference: Imported Apex method name.
Classname: Apex class name.
Namespace: You know that the default namespace of the Salesforce org is ‘c’, in this case, don’t specify a namespace. The namespace is used when your apex class is in a managed package.

Important point: For property, we can have only one decorator at a time.