This document provides an overview of developing Lightning Web Components (LWC) with the Salesforce Development Experience (DX). It discusses the need for LWC, how to set up the development environment with the Salesforce CLI and VS Code extensions, the anatomy of an LWC bundle, using decorators while developing components, deploying LWC to orgs, and comparing LWC to Aura components. The presentation encourages attendees to get hands-on experience with LWC through Trailhead modules.

1. Develop Your First Lightning Web Component
with DX

2. Speaker Details
Abdul Gafoor
@abdulgafoor__r
abdulmfg

3. 3
Point to
Point
Integration
Challenges
Solution –
Event Driven
Architecture
Understanding
Platform
Events
Demo
Q & A
Need for Lightning Web Components (LWC)
Environment required for LWC
Developing Lightning Web Components
Deployment of Lightning Web Components
Q & A
Agenda

4. Need for
Lightning Web
Components?

5. Lightning Aura Components vs Lightning Web Components 5
Lightning Aura
Component
Lightning Web
Component
Aura Framework Shadow Dom
Modern
JavaScrip
t
Custom
Elements
Template
s

6. Page driven architecture(Visualforce Pages)
Evolution of Web Technologies
Modern Web Standards(Lightning Web Components)
Component based architecture(Aura Components)
6

7. What is a
Lightning Web Component?

8. What is LWC? 8
● A new programming model for building Lightning
components
● Built using HTML and modern JavaScript
● Code runs natively in browsers
● Uses Modern Web Standards

9. Lightning Web
Component Bundle

10. Component Bundle 10
Component Bundle
HTML file
(myFirstComponent.html
)
JavaScript file
(myFirstComponent.js)
js-meta.xml file
(Configuration file)
(myFirstComponent.js-
meta.xml)
CSS file
(myFirstComponent.css)
svg file
(myFirstComponent.svg)
Additional JavaScript
files for Sharing Code
(utility.js)

11. Set up environment
for LWC

12. Set up environment for LWC 12
● Install the Salesforce CLI
● Install a Code Editor(VS Code)
● Salesforce Extension Pack for VS Code
● Lightning Web Components Extension Pack for VS Code
● Enable My Domain in your Salesforce Org

13. 13Introduction to Salesforce DX
● Why DX?
○ Limitations of traditional development cycle.
● What is DX?
○ Standard Developer Experience
○ Git,Selenium, Eclipse, Sublime
○ Tool set
○ CLI

14. Developing
Lightning Web Components

15. Types of Decorators 15
● @api - used to set the variables or the properties as
public
● @track - used to map the changing values of the
properties and rerender the component when
properties change (Private reactive properties)
● @wire - used to make a server-side call

16. Developing LWC 16
● Creating LWC
● Using decorators while developing the component
● Adding CSS to the component
● Deploying the components
● Viewing the components in the Salesforce Org

17. Deploying LWC 17
● Through VS-Code to Org
● Through Changesets

18. 18Aura Component and SFDX
● Create an Aura component
● Deploy using SFDX

19. Comparison between Aura and LWC 19
Features Aura LWC
Quick action support
Performance
Response Time
Component Based
Support for Unit Test

20. What’s Next

21. Get Hands-on with Trailhead 21
Quick Start :
Lightning Web
Components
Lightning Web
Component Basics
Modern Javascript
Development

22. Q & A Time ! 22
Questions?

23. Additional Resources 23
● Salesforce Documentation
● Salesforce CLI
● VS Code
● LWC-recipes
● Playground