An introduction to Salesforce Lightning Web Components and transition from Lightning Aura Components. The deck shows the why, when and how.

1. An Introduction to Lightning Web Components
mheisterberg@salesforce.com, @lekkim
Mikkel Flindt Heisterberg, Platform Solution Engineer

3. Forward-Looking Statement
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the
assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements
we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability,
subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations,
statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service,
new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or
delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and
acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and
manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization
and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our
annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and
others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be
delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available.
Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Statement under the Private Securities Litigation Reform Act of 1995

4. Why?

5. 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
2014
Frameworks
Specialized Services
Data Services
UI Components
Web Standards
Web Components
Templates
Custom Elements
Shadow DOM
Decorators
Modules
ECMAScript 7
Events
Standard Elements
Rendering
2019
Web Standardization
2000 2005 2010 2015

6. By embracing web standards, more developers can build on Salesforce
Every Platform Needs More Developers
IT Skills Gap250K
unfilled developer
jobs in the US
7+ Million
Worldwide
Javascript
developers

7. 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
Introducing Lightning Web Components
Generally
Available
Spring ‘19
(Feb)
Every JavaScript developer can now code on Salesforce

8. Data Centers
Network
Data
Protection
Monitoring
Storage
TRUST
Databases
Connectivity
Message Bus
Events
Metadata
SHARED SERVICES
& TOOLS
App Definition
Authorization
Provisioning
Authentication
Identity Resolution
DATA & EVENTSRUNTIME
APP LAYER
Framework
SLDS
Navigation
Testing
Instrumentation Accessibility
Offline
LockerData
APP LAYER
Framework
SLDS
Navigation
Testing
Instrumentation Accessibility
Offline
LockerData
Customization
Page
Base
Components
Experience
Components
Application Layer
Framework
Testing
Instrumentation
SLDS
Navigation
Offline
Accessibility
Locker
Data
How Lightning Components Work

9. Build High Performance Apps with Web Standards
Execute more code in the browser for a blazing fast experience
Component
Performance
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
Lightning Web
Components

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

11. Feedback from Pilot Customers
Bringing data from many sources
in a standard way.
Changing their approach to app
dev with speed and productivity.
Game-changing speed and
development productivity
“Lightning Web Components will let us build
apps that are able to present data from many
sources in a component-based way, which is
crucial given the number of custom apps we
have across our business,” said
“I applaud the standards-based approach
Salesforce is taking with this new
programming model by opening it up to
JavaScript developers.”
Stephan Paquet
Senior Architect IT Applications, Ciena
“Lightning Web Components have the
potential to fundamentally change how we do
app development.”
“The performance gains have been significant
so far, both in terms of speed and stability, and
we see Lightning Web Components as a great
way to help us realize our digital
transformation goals.”
Anil Sistla
Platform Architect, Schneider Electric.
“nCino is focused on delivering the best
possible user experience to anyone accessing
our Bank Operating System, which often
requires the creation of our own custom apps
and components.”
“Lightning Web Components give our
developers the ability to quickly create
immersive apps, and give our customers’
admins the ability to use simple drag and drop
components without having to code. This
could change the game for us by speeding up
development and increasing productivity.”
Dory Weiss
VP of Engineering at nCino.

12. The Lightning Platform
Empower Business and IT to work together
Platform & Ecosystem
57%
faster app dev
Partner ecosystem | AppExchange
Accelerate with Enterprise Services
Integration | Connect and MuleSoft
Dev tools | Salesforce DX
Deliver with Pro Code Tools
Empower with No Code Builders
Open languages | Heroku
Process | Lightning Flow Builder
Encryption & compliance | Shield
User experience | Lightning App Builder
AI Services | Einstein
Reusable code | Lightning Web
Components
NEW

13. 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
Gain technical
mastery of
Lightning Web
Components with
events and
webinars

14. Get Started with Lightning Web Components Today!
Learn more about building with web standards through these useful resources
Earn the Lighting Web Components Quick Start Badge
Jump right into web standards components with Trailhead
Developer
Documentation
Component
Library
LWC Recipes
Explore the code with Lightning Web Components Recipes
Get a feel for how Lightning Web Components are structured
See our revamped Components Library
Start building with base Lightning Web Components
Check out the documentation
Look through the documentation to find the answers

15. Lightning Web Components GA Launch Timeline
Jan ’18 Feb ‘18 Apr ’18 May ’18 Jun ’19Dec ’18Nov ’18 Mar ’18
DEV LAUNCH
EVENT
23 Jan
TDX
29-30 May
PRE REL
13 Dec
SB PREV
4 Jan
R0
11 Jan
R1
1
Feb
R2
8-9
Feb
LWC LAUNCH
TRAILHEAD LWC
CONTENT
2 Dec
220 PRE REL
18 Apr218
“DEV WEEK”
Week Following
Event
150+ Trailblazer
community groups
NY WORLD
TOUR
13 Dec

16. Ever tried looking for an answer for
Lightning Aura Components? Much
easier now as it’s based on web
standards…
Examples:
• connectedCallback
• disconnectedCallback
• attributeChangedCallback
Using Standards makes it Easier

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

18. Anatomy of a Lightning Web
Component

19. Recap of Lightning Aura Component Anatomy (1)

20. 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

21. > sfdx force:project:create -n aura-helloworld
> cd aura-helloworld
> sfdx force:lightning:component:create --type aura
-n helloworld -d force-app/main/default/aura
> sfdx force:org:create -a aura_helloworld
-f config/project-scratch-def.json -v lwc_devhub
> sfdx force:source:push -u aura_helloworld
> sfdx force:org:open –u aura_helloworld
Salesforce DX script

22. Lightning Web Component Anatomy (1)

23. 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

24. > sfdx force:project:create -n lwc-helloworld
> cd lwc-helloworld
> sfdx force:lightning:component:create --type lwc
-n helloworld -d force-app/main/default/lwc
> sfdx force:org:create -a lwc_helloworld
-f config/project-scratch-def.json -v lwc_devhub
> sfdx force:source:push -u lwc_helloworld
> sfdx force:org:open –u lwc_helloworld
Salesforce DX script
Caveat: Currently stylesheet-file (here:
helloworld.css) not created through command

25. Lightning Web Components Syntax

26. • 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)

27. HTML Markup (2)
SLDS classes available as
Lightning Web
Components
Attributes from Javascript
available using {}-syntax

28. HTML Markup (3)
Target slot from other component using the slot-
attribute
Target multiple slots: sequence in resulting markup
is determined by receiving component

29. • ES6 classes are used to define logic
• ES6 module imports / exports are used to import and export logic
JavaScript logic

30. • CSS is scoped to the Shadow DOM and is no longer namespaced
• Support for :host pseudo-selector allows for styling the Shadow DOM parent
https://developer.salesforce.com/docs/.../lwc/lwc.create_components_css
https://developer.mozilla.org/en-US/docs/Web/CSS/:host()
CSS (1)

31. • Selectors work inside the component
CSS (2)

32. Metadata XML
• Metadata XML file is used to configure component and change behavior
isExposed must be true
for component to show up
in Lightning App Builder
masterLabel sets the
friendly name for Lightning
App Builder
Target the page types the
component applies to

33. Attributes

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

35. Attributes in Lightning Web Components
Private non-
reactive attribute
Public reactive
attribute with
default value
Constructor used
to compute default
value to private
attribute

36. Example before actually doesn’t work…
@api attributes in Lightning Web Components (1)

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

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

39. Data Access

40. Data Access in Lightning Aura Components
({
"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);
}
})

41. 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;
}

42. 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

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

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

45. 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

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

47. Decorator Syntax
Syntax
@decorator_name(<optional_method_to_decorate>, <optional_arguments>)
propertyOrFunctionBeingDecorated;
Examples
@wire(getRecord, {recordId: '0014E00000ySOIMQA4', fields})
contact;
@track bar;
@api foo;
A decorator basically returns a new property or function with new,
decorated, functionality.
Hard coding the recordId doesn’t work in reality so of course there is
a solution for that…
@api recordId;
@wire(getRecord, {recordId: '$recordId', fields})
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.
“

48. 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

49. Transitioning from
Lightning Aura Components to
Lightning Web Components

50. Aura Component to Web Component Mapping

51. Lightning Aura Components may contain Lightning Web Components
Composition

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

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

54. Standards, standards, standards…

55. Replace proprietary syntax and Tools

56. Getting Started with Lightning Web
Components

57. 1. Get a Spring ‘19 Org (could be a 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

58. Get a Spring ‘19 Org

59. 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

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

61. Sample Applications
Recipes e-bikes
More in the sample gallery
https://trailhead.salesforce.com/sample-gallery

62. git clone git@github.com:trailheadapps/lwc-recipes.git
cd lwc_recipes
sfdx force:org:create -v lwc_devhub
-f config/project-scratch-def.json -a lwc_recipes
sfdx force:source:push -u lwc_recipes
sfdx force:user:permset:assign -n recipes -u lwc_recipes
sfdx force:data:tree:import --plan ./data/data-plan.json
-u lwc_recipes
sfdx force:org:open -u lwc_recipes

63. “Let’s check out the recipes…

64. Lightning Web Components in Resources

65. Introducing Lightning Web
Components
https://www.salesforce.com/video/4279551/
(and follow-up Q&A:
https://www.youtube.com/watch?v=Rd8h-5e4KZs)
Video Gallery
https://developer.salesforce.com/tv/lwc-video-gallery
Lightning Web Components Recordings

66. Lightning Debug Mode – now really useful

67. • 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

70. 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

71. https://developer.salesforce.com/blog
placeholder

73. Questions?