SlideShare a Scribd company logo
Welcome to our virtual learning series
Letterkenny, Ireland
Developers Group
Learn Lightning Web Components in 5 Days
Lk_Sf_Devs LkTrailblazers
Day 1 - Introduction
Lightning Web Components- Ep 0 - Introduction
Nishant Singh Panwar
Community Group Leader
Salesforce Developer and Consultant
● 6 Years of Salesforce Implementation Experience
● 8x Salesforce CertiïŹed - Application Architect
UDAIPUR
Nishant_SP
Actions
bit.ly/lwcquery
Sahil Batra (Director @ MTX Group Inc.)
Industry Experience
Having 9 year of experience in IT Industry and 6 years in Salesforce
ecosystem.Started my Salesforce career as Developer and have played
various roles like Technical Lead , Technical Architect and Corporate
Trainer.
Professional Highlights
● Manage Salesforce trainings and certifications.
● Work as Technical Architect / Principal Developer on Projects.
● Hold 5 Salesforce Certifications and 1 Google certification.
● Conducted Training in India, US , Australia and UK.
● Trained 500+ freshers and 300+ lateral folks in Salesforce.
● Trained 800+ students and 250+ faculty members.
Email : sahilbatraa@gmail.com
Twitter : sahilbatraa18
What is LWC ?
● Modern lightweight framework to develop Lightning
web components
● Built on Web Standards
● Deliver better performance
● Compatible with Aura
Why LWC ????
2014 Web Stack
● More framework , Less Web
Standards
● Lightning Components framework
was built on Aura
2019 Web Stack
● Less Framework , More Web Standards.
LWC Framework
BeneïŹts of LWC
● More Standard and less framework
● Better Performance
● Easy to learn
● Easy to ramp up developers
● Better browser compatibility
● Common/Service Component Model
Aura & LWC Interoperability
Topics covered so far
● Introduction to LWC
● Why LWC ?
● 2014 Web Stack
● 2019 Web Stack
● LWC Framework
● Benefits of LWC
● Aura and LWC Interoperability
Environment Setup
● Create Developer Edition Org -
https://developer.salesforce.com/
● Enable Domain in your Org
● Download VS Code -
https://code.visualstudio.com/download
● Connect Salesforce with VS code
Lightning Web Component Bundle
● HTML
● CSS
● Javascript
● SVG
● XML File
DemoComponent
● demoComponent.html
● demoComponent.css
● demoComponent.js
● demoComponent.svg
● demoComponent.js-meta.xml
Naming Rules
● Begin with lowercase
● Contain only alphanumeric
or underscore
● Do not include whitespace
● Do not end with underscore
● Can't contain hyphen
● Can't contain 2 consecutive
underscore
Build your First Component
Demo : HelloWorld Component
Applying CSS to Web Component
Demo : Applying CSS Component
Data Binding
Demo : Data Binding from JS Class to Web
Component
Conditional Rendering
Demo : Conditional Rendering
if:true | false = {property}
Loop & Iteration
● for:each
● for:item
● for:index
● iterator:iteratorname
● value
● index
● first
● last
Post your Queries @ bit.ly/lwcquery
Coming Up
● 07 May - Decorators, Web component Lifecycle hooks, and Compositions.
bit.ly/lwcday2
● 14 May - Component communication using events.
bit.ly/lwcday3
● 21 May - Working with Salesforce data including LDS.
bit.ly/lwcday4
● 28 May - Navigation Services, Aura with LWC interoperability & extra topics.
bit.ly/lwcday5
RSVP
Lightning Web Components- Ep 0 - Introduction

More Related Content

PDF
Lightning Web Components- Ep 4 - Navigation Services, LWC and Aura Interopera...
Nishant Singh Panwar
 
PDF
Lightning Web Components- Ep 3 - Working with Salesforce data and LDS
Nishant Singh Panwar
 
PDF
Lightning Web Components- Ep 2 - Component Communication using Events
Nishant Singh Panwar
 
PDF
Lightning Web Components- Ep 1 - Decorators, Life Cycle Hooks and Compositions
Nishant Singh Panwar
 
PDF
Dot net development in india
TerriGarcia
 
PDF
Easy Decoupled Sitebuilding with GraphQL and Next.js
Jani Tarvainen
 
PPTX
Next.js vs React | what to choose for frontend development_
ForceBolt
 
PDF
Develop & Deploy your Laravel Application on Google Cloud Platforms
Olanrewaju Abidogun
 
Lightning Web Components- Ep 4 - Navigation Services, LWC and Aura Interopera...
Nishant Singh Panwar
 
Lightning Web Components- Ep 3 - Working with Salesforce data and LDS
Nishant Singh Panwar
 
Lightning Web Components- Ep 2 - Component Communication using Events
Nishant Singh Panwar
 
Lightning Web Components- Ep 1 - Decorators, Life Cycle Hooks and Compositions
Nishant Singh Panwar
 
Dot net development in india
TerriGarcia
 
Easy Decoupled Sitebuilding with GraphQL and Next.js
Jani Tarvainen
 
Next.js vs React | what to choose for frontend development_
ForceBolt
 
Develop & Deploy your Laravel Application on Google Cloud Platforms
Olanrewaju Abidogun
 

What's hot (20)

PDF
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Codemotion
 
PPT
Kenneth Webber Portfolio
Kenneth Webber
 
PDF
MuleSoft meetup__houston #13
Jim Andrews
 
PPTX
Intro to Lightning Web Components
Calvin LaBelle
 
PDF
Getting started with Next.js
Gökhan Sarı
 
DOCX
Sushma_resume
Sushma Nalam
 
PPTX
Headless CMS for Digital Agencies - Case Study by Andy Thompson
Kentico Software
 
PPTX
SSR with React - Connecting Next.js with WordPress
Imran Sayed
 
PDF
Open Evening Codaisseur September 2019 Coding School Amsterdam
LisaScorzon
 
PPTX
Magento PWA Studio extensibility
Lars Roettig
 
PDF
Write Serverless Applications with PowerShell and Azure Functions
Jaap Brasser
 
PPTX
Mean full stack development
Scott Lee
 
PDF
Micro frontends with react and redux dev day
Prasanna Venkatesan
 
PDF
Codaisseur Open Evening
Miloud Ourahou
 
PDF
Bodin - Hullin & Potencier - Magento Performance Profiling and Best Practices
Meet Magento Italy
 
PDF
APIs for mobile
Andrei Navarro
 
PPTX
React and Web Performance
Lars Roettig
 
PPTX
.NET Fest 2019. Alexandre Malavasi. The future of Web: what Microsoft Blazor ...
NETFest
 
PPTX
Jimmie Lindstrom, Braintree_ePayment Workshop @ Open Commerce Conference 2016
Spark Solutions
 
PDF
Php Model-View-Controller Frameworks
David Badura
 
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
Codemotion
 
Kenneth Webber Portfolio
Kenneth Webber
 
MuleSoft meetup__houston #13
Jim Andrews
 
Intro to Lightning Web Components
Calvin LaBelle
 
Getting started with Next.js
Gökhan Sarı
 
Sushma_resume
Sushma Nalam
 
Headless CMS for Digital Agencies - Case Study by Andy Thompson
Kentico Software
 
SSR with React - Connecting Next.js with WordPress
Imran Sayed
 
Open Evening Codaisseur September 2019 Coding School Amsterdam
LisaScorzon
 
Magento PWA Studio extensibility
Lars Roettig
 
Write Serverless Applications with PowerShell and Azure Functions
Jaap Brasser
 
Mean full stack development
Scott Lee
 
Micro frontends with react and redux dev day
Prasanna Venkatesan
 
Codaisseur Open Evening
Miloud Ourahou
 
Bodin - Hullin & Potencier - Magento Performance Profiling and Best Practices
Meet Magento Italy
 
APIs for mobile
Andrei Navarro
 
React and Web Performance
Lars Roettig
 
.NET Fest 2019. Alexandre Malavasi. The future of Web: what Microsoft Blazor ...
NETFest
 
Jimmie Lindstrom, Braintree_ePayment Workshop @ Open Commerce Conference 2016
Spark Solutions
 
Php Model-View-Controller Frameworks
David Badura
 
Ad

Similar to Lightning Web Components- Ep 0 - Introduction (20)

PDF
Lightning web components - Episode 1 - An Introduction
Salesforce Developers
 
PPTX
Introduction to lightning web component
Sudipta Deb ☁
 
PPTX
Introduction to lightning Web Component
Mohith Shrivastava
 
PPTX
Getting Started with Lightning Web Components | LWC | Salesforce
Rahul Malhotra
 
PPTX
Intro to Salesforce Lightning Web Components (LWC)
Roy Gilad
 
PPTX
Lightning Web Component - LWC
Thierry TROUIN ☁
 
PPTX
Lightning Web Component in Salesforce
Jitendra Zaa
 
PPTX
Implementing Vanilla Web Components
sonumanoj
 
PDF
Introducing Lightning Web Components
Peter Knolle
 
PPTX
RVA intro to LWC- Salesforce Dev Week
Ohad Idan
 
PPTX
Enterprise-grade UI with open source Lightning Web Components
Salesforce Developers
 
PPTX
Discover Salesforce Commerce Cloud and Vlocity Integration Patterns
Eva Mave Ng
 
DOC
Senior .Net Developer - Senthil Ravindranath
Senthil Ravindranath
 
DOC
Manish_Gupta
manish gupta
 
DOC
Arun Kumar(7.8Yrs).DOC
Arun Kumar Rajamandrapu
 
PDF
Introduction to Web Frameworks
Dr Sarika Jadhav
 
PPTX
Live Session1 lightning web component
SmritiSharan1
 
DOCX
VinodKulkarni_Resume
vinod kulkarni
 
PPTX
React for .net developers
macsdickinson
 
PPTX
Noman Khan Internship Report 2.pptx
NomanKhan869872
 
Lightning web components - Episode 1 - An Introduction
Salesforce Developers
 
Introduction to lightning web component
Sudipta Deb ☁
 
Introduction to lightning Web Component
Mohith Shrivastava
 
Getting Started with Lightning Web Components | LWC | Salesforce
Rahul Malhotra
 
Intro to Salesforce Lightning Web Components (LWC)
Roy Gilad
 
Lightning Web Component - LWC
Thierry TROUIN ☁
 
Lightning Web Component in Salesforce
Jitendra Zaa
 
Implementing Vanilla Web Components
sonumanoj
 
Introducing Lightning Web Components
Peter Knolle
 
RVA intro to LWC- Salesforce Dev Week
Ohad Idan
 
Enterprise-grade UI with open source Lightning Web Components
Salesforce Developers
 
Discover Salesforce Commerce Cloud and Vlocity Integration Patterns
Eva Mave Ng
 
Senior .Net Developer - Senthil Ravindranath
Senthil Ravindranath
 
Manish_Gupta
manish gupta
 
Arun Kumar(7.8Yrs).DOC
Arun Kumar Rajamandrapu
 
Introduction to Web Frameworks
Dr Sarika Jadhav
 
Live Session1 lightning web component
SmritiSharan1
 
VinodKulkarni_Resume
vinod kulkarni
 
React for .net developers
macsdickinson
 
Noman Khan Internship Report 2.pptx
NomanKhan869872
 
Ad

More from Nishant Singh Panwar (8)

PDF
Admin Certification Sales and Service Cloud
Nishant Singh Panwar
 
PDF
Letterkenny TrailheaDX 2020 Global Gathering
Nishant Singh Panwar
 
PDF
Salesforce Admin Certification Preparation : Security Model Dive In
Nishant Singh Panwar
 
PDF
Differential Salesforce DX - Virtual Dreamin
Nishant Singh Panwar
 
PDF
Power of Flows and Prepare for Salesforce Admin Certification
Nishant Singh Panwar
 
PDF
Salesforce Spring 20 Highlights
Nishant Singh Panwar
 
PDF
Letterkenny Developer Group Meet - 28 Jan 2020
Nishant Singh Panwar
 
PPTX
Lkdug meet 17_dec19
Nishant Singh Panwar
 
Admin Certification Sales and Service Cloud
Nishant Singh Panwar
 
Letterkenny TrailheaDX 2020 Global Gathering
Nishant Singh Panwar
 
Salesforce Admin Certification Preparation : Security Model Dive In
Nishant Singh Panwar
 
Differential Salesforce DX - Virtual Dreamin
Nishant Singh Panwar
 
Power of Flows and Prepare for Salesforce Admin Certification
Nishant Singh Panwar
 
Salesforce Spring 20 Highlights
Nishant Singh Panwar
 
Letterkenny Developer Group Meet - 28 Jan 2020
Nishant Singh Panwar
 
Lkdug meet 17_dec19
Nishant Singh Panwar
 

Recently uploaded (20)

PDF
Event Presentation Google Cloud Next Extended 2025
minhtrietgect
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
PDF
Shreyas_Phanse_Resume: Experienced Backend Engineer | Java ‱ Spring Boot ‱ Ka...
SHREYAS PHANSE
 
PDF
A Day in the Life of Location Data - Turning Where into How.pdf
Precisely
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PDF
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
PPTX
Comunidade Salesforce SĂŁo Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira JĂșnior
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PDF
Software Development Methodologies in 2025
KodekX
 
PDF
Software Development Company | KodekX
KodekX
 
PDF
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
PDF
CIFDAQ's Teaching Thursday: Moving Averages Made Simple
CIFDAQ
 
PDF
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
PDF
Orbitly Pitch DeckA Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
PDF
How-Cloud-Computing-Impacts-Businesses-in-2025-and-Beyond.pdf
Artjoker Software Development Company
 
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PDF
Doc9.....................................
SofiaCollazos
 
PDF
madgavkar20181017ppt McKinsey Presentation.pdf
georgschmitzdoerner
 
PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
Event Presentation Google Cloud Next Extended 2025
minhtrietgect
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
Shreyas_Phanse_Resume: Experienced Backend Engineer | Java ‱ Spring Boot ‱ Ka...
SHREYAS PHANSE
 
A Day in the Life of Location Data - Turning Where into How.pdf
Precisely
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
Comunidade Salesforce SĂŁo Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira JĂșnior
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
Software Development Methodologies in 2025
KodekX
 
Software Development Company | KodekX
KodekX
 
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
CIFDAQ's Teaching Thursday: Moving Averages Made Simple
CIFDAQ
 
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
Orbitly Pitch DeckA Mission-Driven Platform for Side Project Collaboration (...
zz41354899
 
How-Cloud-Computing-Impacts-Businesses-in-2025-and-Beyond.pdf
Artjoker Software Development Company
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
Doc9.....................................
SofiaCollazos
 
madgavkar20181017ppt McKinsey Presentation.pdf
georgschmitzdoerner
 
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 

Lightning Web Components- Ep 0 - Introduction

  • 1. Welcome to our virtual learning series Letterkenny, Ireland Developers Group Learn Lightning Web Components in 5 Days Lk_Sf_Devs LkTrailblazers Day 1 - Introduction
  • 3. Nishant Singh Panwar Community Group Leader Salesforce Developer and Consultant ● 6 Years of Salesforce Implementation Experience ● 8x Salesforce CertiïŹed - Application Architect UDAIPUR Nishant_SP
  • 5. Sahil Batra (Director @ MTX Group Inc.) Industry Experience Having 9 year of experience in IT Industry and 6 years in Salesforce ecosystem.Started my Salesforce career as Developer and have played various roles like Technical Lead , Technical Architect and Corporate Trainer. Professional Highlights ● Manage Salesforce trainings and certifications. ● Work as Technical Architect / Principal Developer on Projects. ● Hold 5 Salesforce Certifications and 1 Google certification. ● Conducted Training in India, US , Australia and UK. ● Trained 500+ freshers and 300+ lateral folks in Salesforce. ● Trained 800+ students and 250+ faculty members. Email : [email protected] Twitter : sahilbatraa18
  • 6. What is LWC ? ● Modern lightweight framework to develop Lightning web components ● Built on Web Standards ● Deliver better performance ● Compatible with Aura
  • 8. 2014 Web Stack ● More framework , Less Web Standards ● Lightning Components framework was built on Aura
  • 9. 2019 Web Stack ● Less Framework , More Web Standards.
  • 11. BeneïŹts of LWC ● More Standard and less framework ● Better Performance ● Easy to learn ● Easy to ramp up developers ● Better browser compatibility ● Common/Service Component Model
  • 12. Aura & LWC Interoperability
  • 13. Topics covered so far ● Introduction to LWC ● Why LWC ? ● 2014 Web Stack ● 2019 Web Stack ● LWC Framework ● Benefits of LWC ● Aura and LWC Interoperability
  • 14. Environment Setup ● Create Developer Edition Org - https://developer.salesforce.com/ ● Enable Domain in your Org ● Download VS Code - https://code.visualstudio.com/download ● Connect Salesforce with VS code
  • 15. Lightning Web Component Bundle ● HTML ● CSS ● Javascript ● SVG ● XML File DemoComponent ● demoComponent.html ● demoComponent.css ● demoComponent.js ● demoComponent.svg ● demoComponent.js-meta.xml Naming Rules ● Begin with lowercase ● Contain only alphanumeric or underscore ● Do not include whitespace ● Do not end with underscore ● Can't contain hyphen ● Can't contain 2 consecutive underscore
  • 16. Build your First Component Demo : HelloWorld Component
  • 17. Applying CSS to Web Component Demo : Applying CSS Component
  • 18. Data Binding Demo : Data Binding from JS Class to Web Component
  • 19. Conditional Rendering Demo : Conditional Rendering if:true | false = {property}
  • 20. Loop & Iteration ● for:each ● for:item ● for:index ● iterator:iteratorname ● value ● index ● first ● last
  • 21. Post your Queries @ bit.ly/lwcquery
  • 22. Coming Up ● 07 May - Decorators, Web component Lifecycle hooks, and Compositions. bit.ly/lwcday2 ● 14 May - Component communication using events. bit.ly/lwcday3 ● 21 May - Working with Salesforce data including LDS. bit.ly/lwcday4 ● 28 May - Navigation Services, Aura with LWC interoperability & extra topics. bit.ly/lwcday5 RSVP