SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
Introduction to
Lightning Web
Component
Kitchener, CA Developer Group
Speaker
Date
Venue/Link
Mohith Shrivastava
January 19th, 2019 @ 9:00 AM EST
https://www.gotomeet.me/Sudipta-Deb
Meeting Sponsor
Who Am I? Salesforce Technical Architect
Appirio Inc., a Wipro Company
www.sudipta-deb.in
8x Salesforce Certified Application Architect
Group Leader of Kitchener, CA Developer
Group
311 Badges
@sudipta_1984
Who Am I?
Salesforce Technical Architect @codescience
Salesforce MVP , Author - Learning Salesforce
Application Development
Medium blogs
@msrivastav13
▪ Introduction To Web Components
▪ Difference between Web Components and
Lightning Web Components
▪ Tooling Support for LWC
▪ Demo Lightning Web Component
▪ Compare and Contrast Lightning Web
Components with Aura Components
▪ Explore LWC Properties and Lightning Data
Services
▪ Q & A
Agenda
Introduction To Web Components
Why Web Components ?
● Reusability - Imports , Exports and Templates allow us
to reuse the components
● Composition - Breaking components to smaller chunks
● Encapsulation - Using the shadow DOM
● Standardization - Part of W3C specs and supported by
majority of browsers
Introduction to lightning web component
Core Elements Of Web Components
★ HTML Templates
★ Custom Elements
★ Shadow DOM
★ ES Modules
Templates and Slots
★ Templates allow us to load HTML tags without
rendering them on initial load.
★ Write once and reuse in multiple pages or multiple
apps.
★ Attach them to Shadow DOM or DOM .
★ Slots are placeholders in template that allow you to
insert your own HTML markup
Template Demo
Custom Elements
Allows us to define an element and let browser learn about the new tag
Shadow DOM
1. Shadow DOM allows the web browser to render DOM
elements without putting them into the main document
DOM tree
2. One can attach shadow DOM to an element using the
API Element.attachShadow({mode:open}).
3. You can attach the Shadow to the custom element .
4. Offers encapsulation (CSS in outer DOM cannot bleed
into the shadow DOM)
Demo
Lightning Web Components (LWC)
➢ Lightning Components used aura framework and its
renamed as Aura Components .
➢ Components built using Web Components standard
now are referred as lightning web components
➢ Lightning Web Components(LWC) adheres closely to
the web components standards.
➢ Modules for Data services , UI API and provides
reactive properties
Difference between Web Components and
LWC
1. Has polyfills to support IE11
2. No need to use the attachShadow() or appendChild() methods . Also
supports browsers that does not implement shadow DOM
3. Protected by locker services that adds additional security
4. Supports app builder ,community builder.
5. Special renderedCallback() method to perform logic after component has
rendered .
6. For better performance there are some rules and restrictions .Refer the git
repo here (https://github.com/salesforce/eslint-plugin-lwc)
Tooling Support For LWC
1. Salesforce VSCode Extension pack helps scaffolding
and language grammar + Deployment
2. Personally built an extension to support faster deploy
and better error display.Its a VScode Plugin and can
be downloaded from marketplace
Demo
Compare LWC with Aura Components
Aura Components Lightning Web Components
<aura:attribute name=”myproperty”> @api myproperty
{!v.myattribute} {myattribute}
no more <aura:handler> and
<aura:register>
const customEvt = new CustomEvent();
this.dispatchEvent(customEvt);
.THIS .myclass {} .myclass {}
aura:facet slot
lightning:layoutitem lightning-layout-item
Javascript Properties
1. Reactive Property - Change in property value
automatically reRenders the template
2. To create a public property use @api
3. To create a private property and re Render DOM use
@track
Lightning Data Service
1. Mark the property with @wire if you want the property
to recieve the change when data change happens to
record
2. LWC supports UI APIs and Metadata describes
References
1. Googles Dev blog
2. LWC Recipes
3. Salesforce Dev blog
4. Salesforce Official docs
Upcoming Salesforce Webinar
https://www.salesforce.com/form/event/lightning-web-
components-launch-event
Demo Resources
1. slider web component demo
2. salesforce lwc demo
Q & A
Thank You

Más contenido relacionado

Was ist angesagt?

Introduction to Lightning Web Component
Introduction to Lightning Web Component Introduction to Lightning Web Component
Introduction to Lightning Web Component SmritiSharan1
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionSalesforce Developers
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce dataSalesforce Developers
 
Salesforce Integration
Salesforce IntegrationSalesforce Integration
Salesforce IntegrationJoshua Hoskins
 
Lightning Components Introduction
Lightning Components IntroductionLightning Components Introduction
Lightning Components IntroductionDurgesh Dhoot
 
Salesforce integration best practices columbus meetup
Salesforce integration best practices   columbus meetupSalesforce integration best practices   columbus meetup
Salesforce integration best practices columbus meetupMuleSoft Meetup
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilitySalesforce Developers
 
Introduction to Salesforce Platform - Basic
Introduction to Salesforce Platform - BasicIntroduction to Salesforce Platform - Basic
Introduction to Salesforce Platform - Basicsanskriti agarwal
 
Managing Your Batch and Scheduled Apex Processes with Relax
Managing Your Batch and Scheduled Apex Processes with RelaxManaging Your Batch and Scheduled Apex Processes with Relax
Managing Your Batch and Scheduled Apex Processes with RelaxSalesforce Developers
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and TestingSalesforce Developers
 
Salesforce customization vs configuration
Salesforce customization vs configurationSalesforce customization vs configuration
Salesforce customization vs configurationCloud Analogy
 
Introducing the Salesforce platform
Introducing the Salesforce platformIntroducing the Salesforce platform
Introducing the Salesforce platformJohn Stevenson
 
Security and Your Salesforce Org
Security and Your Salesforce OrgSecurity and Your Salesforce Org
Security and Your Salesforce OrgSalesforce Admins
 
Salesforce Multitenant Architecture: How We Do the Magic We Do
Salesforce Multitenant Architecture: How We Do the Magic We DoSalesforce Multitenant Architecture: How We Do the Magic We Do
Salesforce Multitenant Architecture: How We Do the Magic We DoSalesforce Developers
 

Was ist angesagt? (20)

Introduction to Lightning Web Component
Introduction to Lightning Web Component Introduction to Lightning Web Component
Introduction to Lightning Web Component
 
Lightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An IntroductionLightning web components - Episode 1 - An Introduction
Lightning web components - Episode 1 - An Introduction
 
Lightning web components episode 2- work with salesforce data
Lightning web components   episode 2- work with salesforce dataLightning web components   episode 2- work with salesforce data
Lightning web components episode 2- work with salesforce data
 
Salesforce Integration
Salesforce IntegrationSalesforce Integration
Salesforce Integration
 
Introduction to Apex Triggers
Introduction to Apex TriggersIntroduction to Apex Triggers
Introduction to Apex Triggers
 
Lightning Components Introduction
Lightning Components IntroductionLightning Components Introduction
Lightning Components Introduction
 
Salesforce integration best practices columbus meetup
Salesforce integration best practices   columbus meetupSalesforce integration best practices   columbus meetup
Salesforce integration best practices columbus meetup
 
Introduction to Apex Triggers
Introduction to Apex TriggersIntroduction to Apex Triggers
Introduction to Apex Triggers
 
LWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura InteroperabilityLWC Episode 3- Component Communication and Aura Interoperability
LWC Episode 3- Component Communication and Aura Interoperability
 
Salesforce talk
Salesforce talkSalesforce talk
Salesforce talk
 
Introduction to Salesforce Platform - Basic
Introduction to Salesforce Platform - BasicIntroduction to Salesforce Platform - Basic
Introduction to Salesforce Platform - Basic
 
Managing Your Batch and Scheduled Apex Processes with Relax
Managing Your Batch and Scheduled Apex Processes with RelaxManaging Your Batch and Scheduled Apex Processes with Relax
Managing Your Batch and Scheduled Apex Processes with Relax
 
Lightning web components - Episode 4 : Security and Testing
Lightning web components  - Episode 4 : Security and TestingLightning web components  - Episode 4 : Security and Testing
Lightning web components - Episode 4 : Security and Testing
 
Deep Dive into Apex Triggers
Deep Dive into Apex TriggersDeep Dive into Apex Triggers
Deep Dive into Apex Triggers
 
Salesforce customization vs configuration
Salesforce customization vs configurationSalesforce customization vs configuration
Salesforce customization vs configuration
 
Lightning Web Component - LWC
Lightning Web Component - LWCLightning Web Component - LWC
Lightning Web Component - LWC
 
Introducing the Salesforce platform
Introducing the Salesforce platformIntroducing the Salesforce platform
Introducing the Salesforce platform
 
Security and Your Salesforce Org
Security and Your Salesforce OrgSecurity and Your Salesforce Org
Security and Your Salesforce Org
 
Architecting Multi-Org Solutions
Architecting Multi-Org SolutionsArchitecting Multi-Org Solutions
Architecting Multi-Org Solutions
 
Salesforce Multitenant Architecture: How We Do the Magic We Do
Salesforce Multitenant Architecture: How We Do the Magic We DoSalesforce Multitenant Architecture: How We Do the Magic We Do
Salesforce Multitenant Architecture: How We Do the Magic We Do
 

Ähnlich wie Introduction to lightning web component

Lightning Web Component in Salesforce
Lightning Web Component in SalesforceLightning Web Component in Salesforce
Lightning Web Component in SalesforceJitendra Zaa
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Componentssonumanoj
 
Lightning web components
Lightning web componentsLightning web components
Lightning web componentsAmit Chaudhary
 
Intro to Salesforce Lightning Web Components (LWC)
Intro to Salesforce Lightning Web Components (LWC)Intro to Salesforce Lightning Web Components (LWC)
Intro to Salesforce Lightning Web Components (LWC)Roy Gilad
 
Lightning web components
Lightning web componentsLightning web components
Lightning web componentsAmit Chaudhary
 
Lightning Web Components
Lightning Web ComponentsLightning Web Components
Lightning Web ComponentsAhmed Keshk
 
Lightning Web Components- Ep 0 - Introduction
Lightning Web Components- Ep 0 - IntroductionLightning Web Components- Ep 0 - Introduction
Lightning Web Components- Ep 0 - IntroductionNishant Singh Panwar
 
Live Session1 lightning web component
Live Session1 lightning web componentLive Session1 lightning web component
Live Session1 lightning web componentSmritiSharan1
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5Vinayak Tavargeri
 
Getting Started with Lightning Web Components | LWC | Salesforce
Getting Started with Lightning Web Components | LWC | SalesforceGetting Started with Lightning Web Components | LWC | Salesforce
Getting Started with Lightning Web Components | LWC | SalesforceRahul Malhotra
 
6 reasons developers should consider salesforce lightning web components
6 reasons developers should consider salesforce lightning web components6 reasons developers should consider salesforce lightning web components
6 reasons developers should consider salesforce lightning web componentsCloud Analogy
 
Lightning Web Components
Lightning Web ComponentsLightning Web Components
Lightning Web ComponentsAbdulGafoor100
 
Lightning Web Components by Abdul Gafoor
Lightning Web Components by Abdul GafoorLightning Web Components by Abdul Gafoor
Lightning Web Components by Abdul GafoorJayesh Tejwani
 
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012Brian King
 
Lightning web components - Introduction, component Lifecycle, Events, decorat...
Lightning web components - Introduction, component Lifecycle, Events, decorat...Lightning web components - Introduction, component Lifecycle, Events, decorat...
Lightning web components - Introduction, component Lifecycle, Events, decorat...Nidhi Sharma
 
RVA intro to LWC- Salesforce Dev Week
RVA intro to LWC-  Salesforce Dev WeekRVA intro to LWC-  Salesforce Dev Week
RVA intro to LWC- Salesforce Dev WeekOhad Idan
 
Introduction to lightning components
Introduction to lightning componentsIntroduction to lightning components
Introduction to lightning componentsMohith Shrivastava
 
Introduction to lightning components
Introduction to lightning componentsIntroduction to lightning components
Introduction to lightning componentsMadan Khichi
 
Vue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrareVue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrareAndrea Campaci
 

Ähnlich wie Introduction to lightning web component (20)

Lightning Web Component in Salesforce
Lightning Web Component in SalesforceLightning Web Component in Salesforce
Lightning Web Component in Salesforce
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Components
 
Lightning web components
Lightning web componentsLightning web components
Lightning web components
 
Intro to Salesforce Lightning Web Components (LWC)
Intro to Salesforce Lightning Web Components (LWC)Intro to Salesforce Lightning Web Components (LWC)
Intro to Salesforce Lightning Web Components (LWC)
 
Lightning web components
Lightning web componentsLightning web components
Lightning web components
 
Introduction to Lightning Web Components
Introduction to Lightning Web ComponentsIntroduction to Lightning Web Components
Introduction to Lightning Web Components
 
Lightning Web Components
Lightning Web ComponentsLightning Web Components
Lightning Web Components
 
Lightning Web Components- Ep 0 - Introduction
Lightning Web Components- Ep 0 - IntroductionLightning Web Components- Ep 0 - Introduction
Lightning Web Components- Ep 0 - Introduction
 
Live Session1 lightning web component
Live Session1 lightning web componentLive Session1 lightning web component
Live Session1 lightning web component
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5
 
Getting Started with Lightning Web Components | LWC | Salesforce
Getting Started with Lightning Web Components | LWC | SalesforceGetting Started with Lightning Web Components | LWC | Salesforce
Getting Started with Lightning Web Components | LWC | Salesforce
 
6 reasons developers should consider salesforce lightning web components
6 reasons developers should consider salesforce lightning web components6 reasons developers should consider salesforce lightning web components
6 reasons developers should consider salesforce lightning web components
 
Lightning Web Components
Lightning Web ComponentsLightning Web Components
Lightning Web Components
 
Lightning Web Components by Abdul Gafoor
Lightning Web Components by Abdul GafoorLightning Web Components by Abdul Gafoor
Lightning Web Components by Abdul Gafoor
 
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
Mozilla Add-Ons Evolution 2011 in review and Upcoming in 2012
 
Lightning web components - Introduction, component Lifecycle, Events, decorat...
Lightning web components - Introduction, component Lifecycle, Events, decorat...Lightning web components - Introduction, component Lifecycle, Events, decorat...
Lightning web components - Introduction, component Lifecycle, Events, decorat...
 
RVA intro to LWC- Salesforce Dev Week
RVA intro to LWC-  Salesforce Dev WeekRVA intro to LWC-  Salesforce Dev Week
RVA intro to LWC- Salesforce Dev Week
 
Introduction to lightning components
Introduction to lightning componentsIntroduction to lightning components
Introduction to lightning components
 
Introduction to lightning components
Introduction to lightning componentsIntroduction to lightning components
Introduction to lightning components
 
Vue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrareVue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrare
 

Mehr von Sudipta Deb ☁

Kitchener Canada Developer Group Event: From Admin to Certified Technical Arc...
Kitchener Canada Developer Group Event: From Admin to Certified Technical Arc...Kitchener Canada Developer Group Event: From Admin to Certified Technical Arc...
Kitchener Canada Developer Group Event: From Admin to Certified Technical Arc...Sudipta Deb ☁
 
Kitchener Developer Group's session on "All about events"
Kitchener Developer Group's session on "All about events"Kitchener Developer Group's session on "All about events"
Kitchener Developer Group's session on "All about events"Sudipta Deb ☁
 
Learn how Source Tracking can keep metadata changes in sync between your loca...
Learn how Source Tracking can keep metadata changes in sync between your loca...Learn how Source Tracking can keep metadata changes in sync between your loca...
Learn how Source Tracking can keep metadata changes in sync between your loca...Sudipta Deb ☁
 
Orchestrate all of your salesforce automation with the trigger actions framework
Orchestrate all of your salesforce automation with the trigger actions frameworkOrchestrate all of your salesforce automation with the trigger actions framework
Orchestrate all of your salesforce automation with the trigger actions frameworkSudipta Deb ☁
 
Let's Learn About Heroku and How to Integrate with Salesforce
Let's Learn About Heroku and How to Integrate with SalesforceLet's Learn About Heroku and How to Integrate with Salesforce
Let's Learn About Heroku and How to Integrate with SalesforceSudipta Deb ☁
 
Using Styling Hooks to Customize Your LWC
Using Styling Hooks to Customize Your LWCUsing Styling Hooks to Customize Your LWC
Using Styling Hooks to Customize Your LWCSudipta Deb ☁
 
Algorithms design and analysis, part 1
Algorithms  design and analysis, part 1Algorithms  design and analysis, part 1
Algorithms design and analysis, part 1Sudipta Deb ☁
 
Functional programming principles in scala
Functional programming principles in scalaFunctional programming principles in scala
Functional programming principles in scalaSudipta Deb ☁
 
Principles of reactive programming
Principles of reactive programmingPrinciples of reactive programming
Principles of reactive programmingSudipta Deb ☁
 
Automate the development lifecycle with cumulus ci on april 9th, 2020
Automate the development lifecycle with cumulus ci on april 9th, 2020Automate the development lifecycle with cumulus ci on april 9th, 2020
Automate the development lifecycle with cumulus ci on april 9th, 2020Sudipta Deb ☁
 
Dreamforce Global Gathering
Dreamforce Global GatheringDreamforce Global Gathering
Dreamforce Global GatheringSudipta Deb ☁
 
Kitchener Salesforce Developer Group Event - Introduction to dev ops with Sal...
Kitchener Salesforce Developer Group Event - Introduction to dev ops with Sal...Kitchener Salesforce Developer Group Event - Introduction to dev ops with Sal...
Kitchener Salesforce Developer Group Event - Introduction to dev ops with Sal...Sudipta Deb ☁
 
Kitchener CA Developer Group Presents Everything you need to know about Einst...
Kitchener CA Developer Group Presents Everything you need to know about Einst...Kitchener CA Developer Group Presents Everything you need to know about Einst...
Kitchener CA Developer Group Presents Everything you need to know about Einst...Sudipta Deb ☁
 
Building lightning apps by Daniel Peter
Building lightning apps by Daniel PeterBuilding lightning apps by Daniel Peter
Building lightning apps by Daniel PeterSudipta Deb ☁
 

Mehr von Sudipta Deb ☁ (15)

Kitchener Canada Developer Group Event: From Admin to Certified Technical Arc...
Kitchener Canada Developer Group Event: From Admin to Certified Technical Arc...Kitchener Canada Developer Group Event: From Admin to Certified Technical Arc...
Kitchener Canada Developer Group Event: From Admin to Certified Technical Arc...
 
Kitchener Developer Group's session on "All about events"
Kitchener Developer Group's session on "All about events"Kitchener Developer Group's session on "All about events"
Kitchener Developer Group's session on "All about events"
 
DevOps 101
DevOps 101DevOps 101
DevOps 101
 
Learn how Source Tracking can keep metadata changes in sync between your loca...
Learn how Source Tracking can keep metadata changes in sync between your loca...Learn how Source Tracking can keep metadata changes in sync between your loca...
Learn how Source Tracking can keep metadata changes in sync between your loca...
 
Orchestrate all of your salesforce automation with the trigger actions framework
Orchestrate all of your salesforce automation with the trigger actions frameworkOrchestrate all of your salesforce automation with the trigger actions framework
Orchestrate all of your salesforce automation with the trigger actions framework
 
Let's Learn About Heroku and How to Integrate with Salesforce
Let's Learn About Heroku and How to Integrate with SalesforceLet's Learn About Heroku and How to Integrate with Salesforce
Let's Learn About Heroku and How to Integrate with Salesforce
 
Using Styling Hooks to Customize Your LWC
Using Styling Hooks to Customize Your LWCUsing Styling Hooks to Customize Your LWC
Using Styling Hooks to Customize Your LWC
 
Algorithms design and analysis, part 1
Algorithms  design and analysis, part 1Algorithms  design and analysis, part 1
Algorithms design and analysis, part 1
 
Functional programming principles in scala
Functional programming principles in scalaFunctional programming principles in scala
Functional programming principles in scala
 
Principles of reactive programming
Principles of reactive programmingPrinciples of reactive programming
Principles of reactive programming
 
Automate the development lifecycle with cumulus ci on april 9th, 2020
Automate the development lifecycle with cumulus ci on april 9th, 2020Automate the development lifecycle with cumulus ci on april 9th, 2020
Automate the development lifecycle with cumulus ci on april 9th, 2020
 
Dreamforce Global Gathering
Dreamforce Global GatheringDreamforce Global Gathering
Dreamforce Global Gathering
 
Kitchener Salesforce Developer Group Event - Introduction to dev ops with Sal...
Kitchener Salesforce Developer Group Event - Introduction to dev ops with Sal...Kitchener Salesforce Developer Group Event - Introduction to dev ops with Sal...
Kitchener Salesforce Developer Group Event - Introduction to dev ops with Sal...
 
Kitchener CA Developer Group Presents Everything you need to know about Einst...
Kitchener CA Developer Group Presents Everything you need to know about Einst...Kitchener CA Developer Group Presents Everything you need to know about Einst...
Kitchener CA Developer Group Presents Everything you need to know about Einst...
 
Building lightning apps by Daniel Peter
Building lightning apps by Daniel PeterBuilding lightning apps by Daniel Peter
Building lightning apps by Daniel Peter
 

Último

LEAD5623 The Economics of Community Coll
LEAD5623 The Economics of Community CollLEAD5623 The Economics of Community Coll
LEAD5623 The Economics of Community CollDr. Bruce A. Johnson
 
Metabolism , Metabolic Fate& disorders of cholesterol.pptx
Metabolism , Metabolic Fate& disorders of cholesterol.pptxMetabolism , Metabolic Fate& disorders of cholesterol.pptx
Metabolism , Metabolic Fate& disorders of cholesterol.pptxDr. Santhosh Kumar. N
 
3.12.24 The Social Construction of Gender.pptx
3.12.24 The Social Construction of Gender.pptx3.12.24 The Social Construction of Gender.pptx
3.12.24 The Social Construction of Gender.pptxmary850239
 
Material Remains as Source of Ancient Indian History & Culture.ppt
Material Remains as Source of Ancient Indian History & Culture.pptMaterial Remains as Source of Ancient Indian History & Culture.ppt
Material Remains as Source of Ancient Indian History & Culture.pptBanaras Hindu University
 
LEAD6001 - Introduction to Advanced Stud
LEAD6001 - Introduction to Advanced StudLEAD6001 - Introduction to Advanced Stud
LEAD6001 - Introduction to Advanced StudDr. Bruce A. Johnson
 
Plant Tissue culture., Plasticity, Totipotency, pptx
Plant Tissue culture., Plasticity, Totipotency, pptxPlant Tissue culture., Plasticity, Totipotency, pptx
Plant Tissue culture., Plasticity, Totipotency, pptxHimansu10
 
Dhavni Theory by Anandvardhana Indian Poetics
Dhavni Theory by Anandvardhana Indian PoeticsDhavni Theory by Anandvardhana Indian Poetics
Dhavni Theory by Anandvardhana Indian PoeticsDhatriParmar
 
The OERs: Transforming Education for Sustainable Future by Dr. Sarita Anand
The OERs: Transforming Education for Sustainable Future by Dr. Sarita AnandThe OERs: Transforming Education for Sustainable Future by Dr. Sarita Anand
The OERs: Transforming Education for Sustainable Future by Dr. Sarita AnandDr. Sarita Anand
 
3.12.24 Freedom Summer in Mississippi.pptx
3.12.24 Freedom Summer in Mississippi.pptx3.12.24 Freedom Summer in Mississippi.pptx
3.12.24 Freedom Summer in Mississippi.pptxmary850239
 
3.14.24 Gender Discrimination and Gender Inequity.pptx
3.14.24 Gender Discrimination and Gender Inequity.pptx3.14.24 Gender Discrimination and Gender Inequity.pptx
3.14.24 Gender Discrimination and Gender Inequity.pptxmary850239
 
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxAUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxiammrhaywood
 
VIT336 – Recommender System - Unit 3.pdf
VIT336 – Recommender System - Unit 3.pdfVIT336 – Recommender System - Unit 3.pdf
VIT336 – Recommender System - Unit 3.pdfArthyR3
 
LEAD6001 - Introduction to Advanced Stud
LEAD6001 - Introduction to Advanced StudLEAD6001 - Introduction to Advanced Stud
LEAD6001 - Introduction to Advanced StudDr. Bruce A. Johnson
 
POST ENCEPHALITIS case study Jitendra bhargav
POST ENCEPHALITIS case study  Jitendra bhargavPOST ENCEPHALITIS case study  Jitendra bhargav
POST ENCEPHALITIS case study Jitendra bhargavJitendra Bhargav
 
3.14.24 The Selma March and the Voting Rights Act.pptx
3.14.24 The Selma March and the Voting Rights Act.pptx3.14.24 The Selma March and the Voting Rights Act.pptx
3.14.24 The Selma March and the Voting Rights Act.pptxmary850239
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (FRIE...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (FRIE...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (FRIE...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (FRIE...Nguyen Thanh Tu Collection
 
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYSDLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYSTeacherNicaPrintable
 
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxBBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxProf. Kanchan Kumari
 
2024.03.16 How to write better quality materials for your learners ELTABB San...
2024.03.16 How to write better quality materials for your learners ELTABB San...2024.03.16 How to write better quality materials for your learners ELTABB San...
2024.03.16 How to write better quality materials for your learners ELTABB San...Sandy Millin
 

Último (20)

LEAD5623 The Economics of Community Coll
LEAD5623 The Economics of Community CollLEAD5623 The Economics of Community Coll
LEAD5623 The Economics of Community Coll
 
Metabolism , Metabolic Fate& disorders of cholesterol.pptx
Metabolism , Metabolic Fate& disorders of cholesterol.pptxMetabolism , Metabolic Fate& disorders of cholesterol.pptx
Metabolism , Metabolic Fate& disorders of cholesterol.pptx
 
Least Significance Difference:Biostatics and Research Methodology
Least Significance Difference:Biostatics and Research MethodologyLeast Significance Difference:Biostatics and Research Methodology
Least Significance Difference:Biostatics and Research Methodology
 
3.12.24 The Social Construction of Gender.pptx
3.12.24 The Social Construction of Gender.pptx3.12.24 The Social Construction of Gender.pptx
3.12.24 The Social Construction of Gender.pptx
 
Material Remains as Source of Ancient Indian History & Culture.ppt
Material Remains as Source of Ancient Indian History & Culture.pptMaterial Remains as Source of Ancient Indian History & Culture.ppt
Material Remains as Source of Ancient Indian History & Culture.ppt
 
LEAD6001 - Introduction to Advanced Stud
LEAD6001 - Introduction to Advanced StudLEAD6001 - Introduction to Advanced Stud
LEAD6001 - Introduction to Advanced Stud
 
Plant Tissue culture., Plasticity, Totipotency, pptx
Plant Tissue culture., Plasticity, Totipotency, pptxPlant Tissue culture., Plasticity, Totipotency, pptx
Plant Tissue culture., Plasticity, Totipotency, pptx
 
Dhavni Theory by Anandvardhana Indian Poetics
Dhavni Theory by Anandvardhana Indian PoeticsDhavni Theory by Anandvardhana Indian Poetics
Dhavni Theory by Anandvardhana Indian Poetics
 
The OERs: Transforming Education for Sustainable Future by Dr. Sarita Anand
The OERs: Transforming Education for Sustainable Future by Dr. Sarita AnandThe OERs: Transforming Education for Sustainable Future by Dr. Sarita Anand
The OERs: Transforming Education for Sustainable Future by Dr. Sarita Anand
 
3.12.24 Freedom Summer in Mississippi.pptx
3.12.24 Freedom Summer in Mississippi.pptx3.12.24 Freedom Summer in Mississippi.pptx
3.12.24 Freedom Summer in Mississippi.pptx
 
3.14.24 Gender Discrimination and Gender Inequity.pptx
3.14.24 Gender Discrimination and Gender Inequity.pptx3.14.24 Gender Discrimination and Gender Inequity.pptx
3.14.24 Gender Discrimination and Gender Inequity.pptx
 
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptxAUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
AUDIENCE THEORY - PARTICIPATORY - JENKINS.pptx
 
VIT336 – Recommender System - Unit 3.pdf
VIT336 – Recommender System - Unit 3.pdfVIT336 – Recommender System - Unit 3.pdf
VIT336 – Recommender System - Unit 3.pdf
 
LEAD6001 - Introduction to Advanced Stud
LEAD6001 - Introduction to Advanced StudLEAD6001 - Introduction to Advanced Stud
LEAD6001 - Introduction to Advanced Stud
 
POST ENCEPHALITIS case study Jitendra bhargav
POST ENCEPHALITIS case study  Jitendra bhargavPOST ENCEPHALITIS case study  Jitendra bhargav
POST ENCEPHALITIS case study Jitendra bhargav
 
3.14.24 The Selma March and the Voting Rights Act.pptx
3.14.24 The Selma March and the Voting Rights Act.pptx3.14.24 The Selma March and the Voting Rights Act.pptx
3.14.24 The Selma March and the Voting Rights Act.pptx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (FRIE...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (FRIE...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (FRIE...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (FRIE...
 
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYSDLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
DLL Catch Up Friday March 22.docx CATCH UP FRIDAYS
 
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptxBBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
BBA 205 BUSINESS ENVIRONMENT UNIT I.pptx
 
2024.03.16 How to write better quality materials for your learners ELTABB San...
2024.03.16 How to write better quality materials for your learners ELTABB San...2024.03.16 How to write better quality materials for your learners ELTABB San...
2024.03.16 How to write better quality materials for your learners ELTABB San...
 

Introduction to lightning web component

  • 1. Introduction to Lightning Web Component Kitchener, CA Developer Group Speaker Date Venue/Link Mohith Shrivastava January 19th, 2019 @ 9:00 AM EST https://www.gotomeet.me/Sudipta-Deb
  • 3. Who Am I? Salesforce Technical Architect Appirio Inc., a Wipro Company www.sudipta-deb.in 8x Salesforce Certified Application Architect Group Leader of Kitchener, CA Developer Group 311 Badges @sudipta_1984
  • 4. Who Am I? Salesforce Technical Architect @codescience Salesforce MVP , Author - Learning Salesforce Application Development Medium blogs @msrivastav13
  • 5. ▪ Introduction To Web Components ▪ Difference between Web Components and Lightning Web Components ▪ Tooling Support for LWC ▪ Demo Lightning Web Component ▪ Compare and Contrast Lightning Web Components with Aura Components ▪ Explore LWC Properties and Lightning Data Services ▪ Q & A Agenda
  • 6. Introduction To Web Components
  • 7. Why Web Components ? ● Reusability - Imports , Exports and Templates allow us to reuse the components ● Composition - Breaking components to smaller chunks ● Encapsulation - Using the shadow DOM ● Standardization - Part of W3C specs and supported by majority of browsers
  • 9. Core Elements Of Web Components ★ HTML Templates ★ Custom Elements ★ Shadow DOM ★ ES Modules
  • 10. Templates and Slots ★ Templates allow us to load HTML tags without rendering them on initial load. ★ Write once and reuse in multiple pages or multiple apps. ★ Attach them to Shadow DOM or DOM . ★ Slots are placeholders in template that allow you to insert your own HTML markup
  • 12. Custom Elements Allows us to define an element and let browser learn about the new tag
  • 13. Shadow DOM 1. Shadow DOM allows the web browser to render DOM elements without putting them into the main document DOM tree 2. One can attach shadow DOM to an element using the API Element.attachShadow({mode:open}). 3. You can attach the Shadow to the custom element . 4. Offers encapsulation (CSS in outer DOM cannot bleed into the shadow DOM)
  • 14. Demo
  • 15. Lightning Web Components (LWC) ➢ Lightning Components used aura framework and its renamed as Aura Components . ➢ Components built using Web Components standard now are referred as lightning web components ➢ Lightning Web Components(LWC) adheres closely to the web components standards. ➢ Modules for Data services , UI API and provides reactive properties
  • 16. Difference between Web Components and LWC 1. Has polyfills to support IE11 2. No need to use the attachShadow() or appendChild() methods . Also supports browsers that does not implement shadow DOM 3. Protected by locker services that adds additional security 4. Supports app builder ,community builder. 5. Special renderedCallback() method to perform logic after component has rendered . 6. For better performance there are some rules and restrictions .Refer the git repo here (https://github.com/salesforce/eslint-plugin-lwc)
  • 17. Tooling Support For LWC 1. Salesforce VSCode Extension pack helps scaffolding and language grammar + Deployment 2. Personally built an extension to support faster deploy and better error display.Its a VScode Plugin and can be downloaded from marketplace
  • 18. Demo
  • 19. Compare LWC with Aura Components Aura Components Lightning Web Components <aura:attribute name=”myproperty”> @api myproperty {!v.myattribute} {myattribute} no more <aura:handler> and <aura:register> const customEvt = new CustomEvent(); this.dispatchEvent(customEvt); .THIS .myclass {} .myclass {} aura:facet slot lightning:layoutitem lightning-layout-item
  • 20. Javascript Properties 1. Reactive Property - Change in property value automatically reRenders the template 2. To create a public property use @api 3. To create a private property and re Render DOM use @track
  • 21. Lightning Data Service 1. Mark the property with @wire if you want the property to recieve the change when data change happens to record 2. LWC supports UI APIs and Metadata describes
  • 22. References 1. Googles Dev blog 2. LWC Recipes 3. Salesforce Dev blog 4. Salesforce Official docs Upcoming Salesforce Webinar https://www.salesforce.com/form/event/lightning-web- components-launch-event
  • 23. Demo Resources 1. slider web component demo 2. salesforce lwc demo
  • 24. Q & A