Introduction to lightning web component What is lightning web component? Difference between aura component and LWC Why do you go for LWC instead of existing aura components? Coexistence and interoperability of aura and LWC

2. AGENDA
Introduction to lightning web component
 What is lightning web component?
 Difference between aura component and LWC
 Why do you go for LWC instead of existing aura components?
 Coexistence and interoperability of aura and LWC

3. What is Lightning Web Component ?
It Is A New Programming Model To Create The Lightning Components. They Are
Custom Html Elements Built Using Html And modern Javascript.
 Better Performance
 Modern Web Standards
 Compatible With Aura Components
 Ease Of Use

4. Web Stack Transformation

5. Coexistence and
Interoperability
Aura components and Lightning web components can
coexist on the same page and in the same runtime .
Aura components can include Lightning web
components.
Aura components and Lightning web components
share the same base Lightning components.

6. Nested composition
You can have both Aura
components and Lighting
web components inside a
parent Aura component,
but Lightning web
components can only
contain other Lightning
web components.

7. Side-by-side
composition
 The two components can
pass information back and
forth, whether that
information is coming in
through user interaction with
the app page, or events
triggered by actions outside
the app page.

8. Advantages

9. What to Choose between
Lightning Web Components and Aura Components?
Always choose Lightning
Web Components unless you
need a feature that isn’t
supported
A Lightning web component
can’t contain an Aura
component. When you
develop a Lightning web
component, its DOM subtree
must be composed entirely of
Lightning web components.

10. Bundle structure
LWC requires manual creation of a folder to host all
your component files. Component HTML, JS,
Configuration files are mandatory. CSS and SVG are
optional.
Naming Convention
The only noted difference in naming is while you’re
referring component in another component. The new
syntax uses kebab-case, instead of the camelCase
(<c-hellowrold> instead of <c:helloworld>) and the
component must have a closing tag.
Event
In aura we use custom event but in LWC we use
Stand Dom Event
Lightning Locker
Default in LWC but not in aura

11. Thank You!!