Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce.

1. Walk through
Lightning
Web
Components
Presenter : Shikha.
(Salesforce Developer at CloudAnalogy)

2. Introduction to Lightning
Web Components
Lightning web components are custom HTML elements built using HTML and modern
JavaScript. Lightning Web Components uses core Web Components standards and provides
only what’s necessary to perform well in browsers supported by Salesforce.

3. Why LWC ?
❏ LWC’s will take advantage of native web standards that exist in the browser. This means
there is no Aura framework (or any framework for that matter) to slow things down. It also
means LWC’s will most likely render faster than aura components.
❏ LWC is built on web standards for almost all of the code involved,with a minimal amount of
"custom code.This means they are more secure (LWC adds CSS isolation, leverages native
DOM support for better performance, and uses more web-standards JavaScript that can be
optimized better).
❏ LWC itself has a richer API based on the UI-API for better performance and less Apex to
write, and calling Apex is now a less painful experience.

4. Same but different
Instead of up to 8 files you only need 4. For one: all JavaScript (3 files) now lives in one ES6 JS file and
we don't have an auradoc or svg file for now

5. Start with writing codes :
● We can create LWC using developer console for that there are two ways.
○ For experiment purpose we can use Playground Link for steps.
○ Or you can set up your development environment Link for steps.

6. Define a Component
To create a component, first create a folder that bundles your component’s files :
● Component HTML File: Every UI component must have an HTML file with the root tag
<template>.
● Component JavaScript File:Every component must have a JavaScript file. If the component
renders UI, the JavaScript file defines the HTML element.
● Component Configuration File:Every component must have a configuration file. The
configuration file defines the metadata values for the component, including the design
configuration for Lightning App Builder and Community Builder.
➔ Above mentioned file are default ,we can also add CSS and other optional files like “
Additional JavaScript file” with a unique name.

7. Component JavaScript File
JavaScript files in Lightning web components are ES6 modules. By default, everything declared
in a module is local—it’s scoped to the module.
To import a class, function, or variable declared in a module, use the import statement. To allow
other code to use a class, function, or variable declared in a module, use the export statement.

8. Decorators
The Lightning Web Components programming model has three decorators that add
functionality to a property or function.The ability to create decorators is part of ECMAScript,
but these three decorators are unique to Lightning Web Components.
1. @api:
To expose a public property, decorate it with @api. An owner component that uses the
component in its markup can access the component’s public properties. See Public
Properties.
2. @track:
To track a private property’s value and rerender a component when it changes, decorate
the property with @track. Tracked properties are also called private reactive properties.
See Tracked Properties.

9. 3. @wire:
To read Salesforce data, Lightning web components use a reactive wire
service. When the wire service provisions data, the component
rerenders. See Use the Wire Service to Get Data and Call Apex
Methods.

10. Call Apex Methods from Lightning
Web Components
Import Apex Methods
Functions in
Javascript
Call
Functions
Wire Service Call
Imperatively
Wire apex method to a property Wire apex method to a function
Annotate Apex method with
@AuraEnabled(cacheable=true)

11. Call Apex method using wire service
Syntax
Usage

12. Imperative Methods

13. THANK
YOU