The document provides an agenda and overview for an introduction to Lightning Web Components (LWC) presentation. It discusses the pillars of modern web development, why LWC was developed, the development tools needed for LWC, the anatomy of an LWC, the LWC lifecycle methods, decorators used in LWC, includes demos of creating an LWC and a Hello World component, compares LWC to Aura components, and lists additional resources. The presentation aims to give attendees an understanding of LWC fundamentals.

1. Path to Code
Begin Your Salesforce Coding Adventure

2. Episode 16
Introduction to Lightning Web Components

3. • Enterprise Solutions Architect
• Global Community Speaker
Jigar Shah
@jigarshah189

4. Agenda
• Pillars of Modern Web Development
• Why LWC?
• Dev Tools for LWC development
• Anatomy of a LWC
• LWC Lifecycle
• LWC Decorators
• Q&A

5. Some Housekeeping Rules…
• Mute your mic
• Keep adding questions in Zoom Q&A Window
• No questions are silly!
• Questions will be answered in the last 15 mins of this session

6. Pillars of Modern Web Development

7. Why Lightning Web Components?
• Limited Web Development Standards
• Feature starved browsers
• LWC Features
• Reusability
• Granularity
• Encapsulation
• Standardization

8. Dev Tools for LWC Development
1. Install Salesforce CLI
2. Install Visual Studio Code
3. Include the Salesforce Extensions Pack and Lightning Web
Components Extension in VS Code

9. Demo 1
Creating a Lighting Web Component

10. Anatomy of Lightning Web Component
Markup
Controller (Javascript)
Helper / Renderer (Javascript)
Controller (Apex) Controller (Apex)
Style (CSS)
Markup
Controller (Javascript)
Style (CSS)
Aura Component Lightning Web Component
Client
Server
app.html
app.css
app.js

11. Lifecycle of a Lightning Web Component

12. Lifecycle of a Lightning Web Component
Method Name Purpose
constructor When Component is created
connectedCallback When component is inserted in DOM
DisconnectedCallback When component is removed from DOM
render Called after connectedCallback.Used for complex rendering
logic.
renderedCalledback Called after render.
errorCallback Called if any error in component lifecycle methods

13. Understanding Decorators
• @api
• @track
• @wired

14. Demo 2
Building a Hello World Lightning Component

15. Comparing LWC and Aura Components

16. Resources
 Lightning Web Components Dev Guide
 Sample Gallery
 Lightning Web Component Recipe
 Lightning Web Component Playground

17. Trailhead Modules
Modern Javascript Development Quick Start: Lightning Web
Components
Lightning Web Component
Basics

18. Q & A

19. Thank You

20. Subscribe