The document provides an overview of Lightning Web Components (LWC) by Amit Singh, highlighting its advantages, such as ease of building reusable applications and improved performance. It covers the four pillars of web components, templating methods, and practical applications like calling Apex classes and communication with Aura components. Resources for further learning are also included, along with contact information for the presenter.

1. Lightning Web
Components

2. Hello!
I am Amit Singh
I am here to give you some overview about
Lightning Web components
1. @cloudyamit
2. Sfdcpanther.com
3. https://www.youtube.com/c/SFDCPanther
2

3. Agenda
1. Why Lightning Web Component?
2. HTML5 Vanilla Components
a. 4 Pillars of Web Component
b. How templating works in Web components
3. Lightning Web Components
a. Hello Word Components
b. Call Apex From LWC
c. Communicate with Aura Components
1

4. Why LWC?
1. In 2014 Salesforce released a new feature called
salesforce lightning.
2. At that time Web components was not supported
by all browsers. So, many other framework came
in picture like angular,
3. Less browser support for Web Component API
and encapsulation.
4. Build reusable, scalable application in a very easy
and fast manner.
5. More standard and less framework.

5. 4 Pillars of HTML
Components
1. Template
2. Custom template
3. Import
4. Shadow Dom

6. Why Templating
1. Method 1: Offscreen DOM
2. Method 2: Overloading script

7. Method 1: Offscreen
DOM
1. Using DOM
2. Nothing is rendered
3. Painful styling and theaming
4. Not inert(Network Request still made)

8. Method 2: Overloading
script
<script id="mytemplate" type="text/x-handlebars-
template">
<img src="logo.png">
<div class="comment"></div>
</script>

9. Lightning Web
Components
1. helloWorld Web Component
2. Call Apex class from LWC
3. Communicate between aura components and
LWC using event.

10. Resources
1. Salesforce Document :-
https://developer.salesforce.com/docs/component-
library/documentation/lwc
2. HTML 5 Vanilla Components :-
https://ayushgp.github.io/html-web-components-
using-vanilla-js/
3. Template in HTML5: -
https://www.html5rocks.com/en/tutorials/webcompon
ents/template/#toc-pillars
4. JavaScript ES6: -
https://medium.freecodecamp.org/write-less-do-
more-with-javascript-es6-5fd4a8e50ee2

11. Any questions?
You can find me at:
1. @cloudyamit
2. amitasinghsfdc@gmail.com
3. sfdcpanther@gmail.com