Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components. Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s 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.

1. An Introduction to Lightning Web Components
Presenter: Nagarjuna Kaipu

2. Agenda
1. Lightning Web Components – Introduction
2. Aura VS LWC and Compatibility
3. Lightning Web Components Syntax
4. Transition from Aura to LWC
5. VS Code IDE Setup
6. LWC in Action

3. Lightning web components are custom HTML elements built using HTML
and modern JavaScript.
Why we need to go for LWC
1. It uses Core Web Components standards
2. Most of the code you write is standard JavaScript and HTML
3. Provides only what’s necessary to perform
4. It is built on code that runs natively in browsers
5. It is lightweight and delivers exceptional performance
Now you can build Lightning components using two programming models:
Lightning Web Components, and the original model, Aura Components.
What are Lightning Web Components

4. The World of Web Development has Changed
Developers demand standard development models and tools they know and love
Proprietary
Frameworks
Data Services
UI Components
Templates
Rendering Optimization
Modules
Language Extensions
Web Standards
ECMAScript 5
Events
Standard Elements
Frameworks
Specialized Services
Data Services
UI Components
Web Standards
Web Components
Templates
Custom Elements
Shadow DOM
Decorators
Modules
ECMAScript 7
Events
Standard Elements
Rendering
2014 2019
Web Standardization
2000 2005 2010 2015

5. Build High Performance Apps with Web Standards
Ease of Use + Transferability of Skills
Core language
Events
Standard elements
Rendering
Data services
UI components
Framework templates
Rendering optimization
Language extensions
Framework
Abstractions
Web Standards
Typical Frameworks
Execute more code in the browser for a blazing fast experience
Lightning Web
Components
Component
Performance

6. Enhanced productivity with web standards
Use the modern language of the web: ES6+, Custom
Elements, classes, modules and imports
Engineered for performance
More code executed by the browser instead of JavaScript
abstractions for a blazing fast experience
Compatible and easy to use
Runs side-by-side with existing Lightning components and
can be composed with clicks or code
Generally
Available
Spring ‘19
(Feb)
Every JavaScript developer can now code on Salesforce

7. Lightning
Web
Components
Aura
Components
Run All Components Together - No Migrations Required
Aura & Lightning Web Components are designed to work together

8. Lightning Web Components Enablement Approach
Technical deep dives into tooling, testing, composition, and more!
Lightning Web Component Foundation
Component
Composition
Static Resources &
3rd Party JavaScript
Pub Sub
Communication DOM and CSS
Development
Tooling
Lightning Web
Component
Anatomy
Using Lightning
Data Service Using Apex

9. Lightning Aura Components
&
Lightning Web Components
work together…
Compatibility

10. Recap of Lightning Aura Component Anatomy(1)

11. Recap of Lightning Aura Component Anatomy(2)
File Description
helloworld.auradoc Component documentation
helloworld.cmp Component markup
helloworld.cmp-meta.xml Metadata file, not used really
helloworld.css CSS for styling, namespaced with .THIS
helloworld.design Design time attributes
helloworld.svg SVG for component icon
helloworldController.js Controller, Javascript
helloworldHelper.js Helper code, Javascript
helloworldRenderer.js Custom rendering, Javascript

12. Lightning Web Component Anatomy (1)

13. Lightning Web Component Anatomy (2)
File Description
helloworld.html Component markup
helloworld.js Component logic
helloworld.css Component styling; scoped to shadow DOM
helloworld.cmp-meta.xml Metadata file – used to change component behavior
Its also have some Optional
component like CSS, SVG Icon.

14. 1. Component name Must begin with a lowercase letter
2. Name must contain only alphanumeric or underscore characters
3. Can’t contain a hyphen (dash)
4. Must be unique in the namespace (No other Aura or LWC can have this name)
5. Can’t include whitespace
6. Can’t end with an underscore
7. Can’t contain two consecutive underscores
8. Folder and files names must have same “prefix name”
Naming convention/Rules for components bundles

15. camelCase: Each word in the middle of the respective phrase begins with a capital letter. for
example apexHours.
PascalCase: It is same like Camel Case where first letter always is capitalized. for example
ApexHours.
kebab-case: Respective phrase will be transferred to all lowercase with hyphen(-) separating
words. for example apex-hours.
Different between camelCase, PascalCase and kebab-case
Case
Name
camelCase
PascalCas
e
kebab-case
Exampl
e
helloWorld HelloWorld hello-world
Where
to use
Folder
File Names
Property
name in JS
Class in
Java Script
Component reference
in markup
HTML attribure name

16. Lightning Web Components Syntax

17. • Use camel case to name your component and use kebab-case to reference a
component in the markup
• Many SLDS classes are now available as Lightning base components i.e.
<lightning-card />
• Markup goes into a Shadow DOM
• <template /> tag is used as parent
• <slot /> tag is used to allow extensibility
(slots may be named) – slot-attribute is used to target slots in other components
HTML Markup (1)

18. HTML Markup (2)
Component Syntax

19. HTML Markup (3)

20. • Java Script Class name should be in PascalCase
• ES6 classes are used to define logic
• ES6 module imports / exports are used to import and export logic
JavaScript logic

21. • Needs to be created in the component bundle
• Has the same name as the component
• Uses standard CSS syntax
• Unlike Aura, no need for .THIS
• Selectors work inside the component
• CSS is scoped to the Shadow DOM and is no longer namespaced
CSS

22. Metadata XML
• Metadata XML file is used to configure component and changebehavior
To host on Salesforce
using App Builder

23. Attributes

24. Attributes in Lightning Aura Components
Attribute
• Name
• Type
• Access
• Default value

25. Attributes in Lightning Web Components
Public attribute
Private attribute
Constructor used
to compute default
value to private
attribute

26. @api attributes in Lightning Web Components (2)

27. @api attributes in Lightning Web Components (3)
Best Practice is using constructor to set default value and connectedCallback

28. Data Access

29. Data Access in Lightning AuraComponents
({
"echo" : function(cmp) {
var action = cmp.get("c.getContactByRecordId");
action.setParams({ recordId: cmp.get("v.recordId") });
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var value = response.getReturnValue();
cmp.set("v.contact", response.getReturnValue());
} else if (state === "ERROR") {
var errors = response.getError();
if (errors && errors[0] && errors[0].message) {
console.log("Error message: " + errors[0].message);
cmp.set("v.error", errors[0]);
}
}
});
$A.enqueueAction(action);
}
})

30. Data Access in Lightning Web Components (1)
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email’;
const fields = [NAME_FIELD, EMAIL_FIELD];
export default class ShowContactData extends LightningElement {
@api recordId;
@wire(getRecord, { recordId: '0014E00000ySOIMQA4', fields })
contact;
}

31. Data Access in Lightning Web Components (2)
<template>
<lightning-card>
<div class="slds-m-around_medium">
<template if:true={contact.data}>
<!– show for SUCCESS state -->
</template>
<template if:true={contact.error}>
<!– show for ERROR state -->
</template>
</div>
</lightning-card>
</template>
Showing success / error
is much easier as it’s part
of the template

32. import { LightningElement, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
export default class ApexImperativeMethod extends LightningElement {
@wire(getContactList)
contacts;
}
Data Access in Lightning Web Components (3)
Call method in server-side Apex Controller using @wire

33. import { LightningElement, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
extends LightningElement {export default class ApexImperativeMethod
@track contacts;
@track error;
handleLoad() {
getContactList().then(result => {
this.contacts = result;
}).catch(error => {
this.error = error;
});
}
}
Data Access in Lightning Web Components (4)
Call method in server-side Apex Controller using @track attributes and Promises

34. Decorator Description
@api To expose a public property, decorate it with @api. Public properties define the API for a
component. An owner component that uses the component in its markup can access the
component’s public properties. Public properties are reactive. If the value of a reactive
property changes, the component’s template rerenders any content that references the
property.
@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.
@wire To read Salesforce data, Lightning web components use a reactive wire service. When the
wire service provisions data, the component rerenders. Components use @wire in their
JavaScript class to specify a wire adaptor or an Apex method.
Introducing Javascript Decorators
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_decorators

35. Decorator Syntax
<optional_arguments>)
Syntax
@decorator_name(<optional_method_to_decorate>,
propertyOrFunctionBeingDecorated;
Examples
@track bar;
@api foo;
@wire(getRecord, {recordId: '0014E00000ySOIMQA4', fields})
contact;
A decorator basically returns a new property or function withnew,
decorated, functionality.

36. Reactive vs. non-Reactive Attributes
• Reactive = Will make the template rerender when changed
•Non-reactive = Will not make the template rerender when changed
Reactive variable: $foo
In the wire adapter’s configuration object, prefix a value with $ to reference a property of the
component instance. The $ prefix tells the wire service to treat it as a property of the class and
evaluate it as this.propertyName. The property is reactive. If the property’s value changes,new
data is provisioned and the component rerenders.
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.data_wire_service_about

37. Transitioning from
Lightning Aura Components to
Lightning Web Components

38. Aura Component to Web Component Mapping

39. Composition
Lightning Aura Components may contain Lightning Web Components

40. New, less verbose and error-prone, Syntax (1)

41. New, less verbose and error-prone, Syntax (2)

42. Standards, standards, standards…

43. Replace proprietary syntax and Tools

44. Getting Started with Lightning Web
Components

45. 1. Get a Salesforce Developer org)
https://developer.salesforce.com/signup
2. Install and Configure Visual Studio Code or other IDE
https://code.visualstudio.com/
3. Install and Configure Salesforce DX
https://developer.salesforce.com/platform/dx
Getting Started

46. Install and Configure Visual Studio Code or other IDE
Extensions
• Salesforce Extension Pack
• Lightning Web Components
Recommended
• Lightning Web Component
snippets for Javascript
typeahead
https://github.com/forcedotcom/salesforcedx-vscode/tree/develop/packages/salesforcedx-vscode-lwc/snippets

47. Install and Configure Salesforce DX
> sfdx plugins
salesforcedx 44.0.7
> sfdx plugins:install
salesforcedx@pre-release

48. • No use of stored actions anymore – transparent using @AuraEnabled(cacheable=true)
• No Console API in Lightning Web Components yet
• No Web Developer support
• Visual Studio Code
• Extensions (Salesforce Extension Pack, Lightning Web Components)
• Trailhead Trailmix (https://sfdc.co/LWC_Trailmix)
• Schema support
• import FIELD_EMAIL from “@salesforce/schema/Contact.Email”
The fine print

50. Quick Start: Lightning Web Components
https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components
Trail: Build Lightning Web Components
https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-components
Lightning Component Library
https://developer.salesforce.com/docs/component-library
Working with Aura and Lightning Web Components: Interoperability and Migration
https://developer.salesforce.com/blogs/2019/02/working-with-aura-and-lightning-web-components-interoperability-and-migration.html
The Future of Salesforce IDEs
https://developer.salesforce.com/blogs/2018/12/the-future-of-salesforce-ides.html
Resources

52. Questions?