This document is a recap of a webinar on Lightning Web Components, focusing on component communication and interoperability with Aura components. It covers various topics, including parent-child communication, event propagation, lifecycle hooks, and strategies for migrating from Aura to Lightning Web Components. The webinar also emphasizes the use of pubsub for event handling and provides a roadmap for future episodes on security, testing, and best practices.

1. Lightning Web Components
Episode 3 – Component Communication and Aura
Interoperability
March 15, 2019 | 11:00 a.m. IST
Satya Sekhar
Sr. Developer Evangelist
Salesforce
Shashank Srivatsavaya
APAC Head, Developer
Relations, Salesforce

2. Forward-Looking Statement
Statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any
such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could
differ materially from the results expressed or implied by the forward-looking statements we make. All statements
other than statements of historical fact could be deemed forward-looking, including any projections of product or
service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding
strategies or plans of management for future operations, statements of belief, any statements concerning new,
planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and
delivering new functionality for our service, new products and services, our new business model, our past operating
losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting,
breach of our security measures, the outcome of any litigation, risks associated with completed and any possible
mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our
ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and
successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and
selling to larger enterprise customers. Further information on potential factors that could affect the financial results
of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our
quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important
disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are
not currently available and may not be delivered on time or at all. Customers who purchase our services should
make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no
obligation and does not intend to update these forward-looking statements.

3. Go Social!
Salesforce Developers
Salesforce Developers
Salesforce Developers
The video will be posted to YouTube & the
webinar recap page (same URL as registration).
This webinar is being recorded!
@salesforcedevs

4. Have Questions?
● Don’t wait until the end to ask your question!
● Technical support will answer questions starting now.
● Respect Q&A etiquette
● Please don’t repeat questions. The support team is working their
way down the queue.
● Stick around for live Q&A at the end
● Speakers will tackle more questions at the end, time-allowing
● Head to Developer Forums
● More questions? Visit developer.salesforce.com/forums

5. Recap
Episode 1 recap
• Lightning Web Components -
Introduction
• Sample Gallery
• Component Library and Playground
• Base Lightning Components
• Developer Tooling – Salesforce CLI and
VS Code
• Lightning Web Components Demo
Episode 2 recap
• Work with Data
• Base Lightning Components which use
Lightning Data Service
• Wire service with Lightning Data
Service and UI API
• Wire service with Apex Methods
• Imperative Apex Calls
• Configuring for App Builder

6. Agenda
● Component Composition
● Inter Component Communication and Events
● Lifecycle hooks
● Pub sub communication
● Interoperability and Co-existence with Aura

7. Component Composition

8. Composition
Owner – owns the template
Container
Component
Component
Container
Component
Component
Component
Component
Component
Component
<!-- todoApp.html -->
<template>
<c-todo-wrapper>
<c-todo-item item-name="Milk"></c-todo-item>
</c-todowrapper>
</template>
<c-todo-item item-name=”Bread"></c-todo-item>
Owner:
• Set public properties on child
• Call public methods on child
• Listen for any events from child
Container:
• Can read public properties on child
• Call public methods on child
• Listen for events bubbled from child

9. Inter Component Communication

10. Intercomponent Communication
• Parent to Child
• Child to Parent
• Lightning web component to Lightning web component
• Lightning web component to Aura component

11. Parent to Child Communication
Parent
Child
<c-todo-item item-name={name}></c-todoitem>
@api itemName;
Parent HTML
Child JS(todoItem)
Read Only

12. Demo
Parent to Child Communication

13. Child to Parent Communication
Parent
Child
Parent HTML
Child JS(display)
Event TypeEvent type Naming conventions
• No uppercase letters
• No spaces
• Use underscores to separate words
• Don’t prefix your event name with string ‘on’
<c-display onshowdata={handleData}></c-display>
showdataHandler() {
this.dispatchEvent(new CustomEvent(‘showdata’));
}
this.dispatchEvent(new CustomEvent(‘showdata’,{detail: this.data}));
handleData(event){
myData=event.detail;
}
Parent JS

14. Demo
Child to Parent Communication

15. Shadow DOM
• The elements in each Lightning web component are encapsulated in a shadow tree
• This part of the DOM is called a shadow tree because it’s hidden from the document
that contains it
• The shadow tree affects how you work with CSS, events, and the DOM
• Since not all browsers that Salesforce supports implement Shadow DOM, LWC uses a
shadow DOM polyfill
<c-todo-app>
#shadow-root
<div>
<p>Your To Do List</p>
</div>
<c-todo-item>
#shadow-root
<div>
<p>Go to the store</p>
</div>
</c-todo-item>
</c-todo-app>
Shadow tree for
todoApp
Shadow tree for
todoItem

16. Event Propagation Phases
Event propogation can be controlled using two
properties on the event.
bubbles
• A Boolean value indicating whether the event
bubbles up through the DOM or not
• Defaults to false.
composed
• A Boolean value indicating whether the event
can pass through the shadow boundary
• Defaults to false
DOM Event propogation phases

17. Controlling Event Propagation
bubbles: false and composed: false
The event doesn’t bubble up through the DOM and doesn’t cross the shadow boundary.
bubbles: true and composed: false
The event bubbles up through the DOM, but doesn’t cross the shadow boundary.
bubbles: true and composed: true
The event bubbles up through the DOM, crosses the shadow boundary, and continues bubbling up
through the DOM to the document root.
bubbles: false and composed: true
Lightning web components don’t use this configuration
// myComponent.js
this.dispatchEvent(
new CustomEvent('notify', { bubbles: true })
);
Sample

18. Lifecycle Hooks

19. Lifecycle hook
Triggered at a specific phase of a component instance’s lifecycle
• connectedCallback() à Called when the element is inserted into document
• disconnectedCallback() à Called when an element is removed from document
• renderCallback() à Called after every render of the component
• errorCallback(error,stack) à Called when a descendant component throws an error in
one of its lifecycle hooks. This hook is specific to Lightning Web Components
Callback methods

20. Lifecycle – Component creation with composition
Constructor called on
parent
Public property
pending to be
updated?
Update the
public
property value
Parent inserted into
DOM
connectedCallback
called on parent
Parent rendered
Constructor called on
child
Public property
pending to be
updated?
Child inserted into
DOM
connectedCallback
called on child
Child rendered
renderedCallback
called on child
renderedCallback
called on parent
Update the
public
property value
Yes Yes

21. Lifecycle – Component removed
Parent removed from
DOM
disconnectedCallback
called on parent
Child removed from
DOM
disconnectedCallback
called on child

22. Component to Component communication
Component Component
Publisher Subscriber
registerListener
Fire event Handle event
pubsub events Can be used in
connectedCallback

23. pubsub module
• pubsub is a singleton library that follows publish subscribe pattern
• The Lightning web components sample repositories include a pubsub module
which can be used in your code
• Each component that subscribes to the event receives the event
• Aura components consume the pubsub module via a Lightning web component
wrapper called aurapubsub

24. Demo
Inter component Communication

25. Aura Interoperability

26. LWC and Aura components composition strategies
Nested Composition and Side-by-side Composition
Lightning App Page
Aura Component Lightning Web Component
Aura
Component
Lightning Web
Component
Lightning Web
Component
Lightning Web
Component
Salesforce Org
Aura Component Events
Aura Application Events
LDS/ UI API
Lightning Event Service*
Javascript custom Events/Public API

27. Demo
Aura Interoperability

28. Aura Migration?

29. Migrating From Aura components to LWC
Migration Strategy
• Identify the components that only render UI and migrate
• Find the Aura component whose performance is critical and migrate
• Make a migration decision
• Migrate one component to see how concepts in the Aura programming model
map to concepts in LWC programming model and then you can make decision to
• Undertake a larger migration effort
• Use Lightning web components for new components only
• Stick with Aura components for now

30. Lightning Web Components – Episode 4
● Static resources and custom/3rd party javascript
● External API
● Security: Locker
● Testing with Jest
Security and Testing

31. Lightning Web Components – Episode 5
● Implement for user scenarios
● Live coding testing and debugging
● Best Practices
Let’s Live Code LWC

32. Get Hands On with a Trailmix!
sforce.co/lwcModern Javascript
Developement

33. Q & A
Try Trailhead: trailhead.salesforce.com
Join the conversation: @salesforcedevs
Join Trailblazer Community Group: bit.ly/webinarinapac

34. Survey
Your feedback is crucial to the success of our
webinar programs. Please fill out the survey at
the end of the webinar. Thank you!