Lightning Web Components

1. Lightning Web Components
Cairo Salesforce Developers Meetup
February 15th 2020

2. What to expect
- Evolution of Salesforce UI and UI components.
- LWC vs Aura.
- Spring 20 LWC enhancements.
- Aura Events
- Lightning Messaging Service

3. Salesforce UI Evolution

4. Web Standards Evolution

5. Enhanced productivity
Use the modern language of the web: ES6+, Custom
Elements, and Shadow DOM
Built for performance
More code executed by the browser instead of JavaScript
abstractions for a blazing fast experience
Compatible and easy to use
Runs side-by-side with existing Lightning components
and can be composed with clicks or code
Introducing Lightning Web Components
Generally
Available
Spring ‘19
New programming model built on modern web standards

6. LWC and Aura compatibility
Aura Component
Lightning Web
Component
Lightning Web
Component
Aura
Component

7. Lightning Experience Component Model

8. Lightning Web Components - Anatomie
consists of 5+ (2/3 required *) files
Standard CSS Syntax, applies automatically to this component
ES6 module, everything declared in module is local & scoped to the
module
Custom Icon (Lightning App & Community Builder)
Root is <template>, Standard HTML
Configuration File, specifies
● APIVersion
● Description,
● General Availability in Tools
● Label
● Targets of possible Appearance and the appropriate Config
*
*
*
+
+
for ! srv cmp

9. Development Tools
Salesforce CLIDeveloper Console
Salesforce Extensions for VS Code
App Builder
Process Builder
No Code Builders Pro Code Tools
Flow Builder

10. Demo
Build the First LWC

11. Decorators
Decorator Description Accessibility Rerender
- Private No
@track o track a private property’s value
and rerender a component when it
changes
private Yes
@api expose a public property that
defines the API for a component.
public Yes
@wire To read Salesforce data use a
reactive wire service.
private Yes

12. New @Track behavior in Spring 20
@Track
- All fields in a Lightning web component class are reactive.
- When a field contains an object or an array, there’s a limit to the depth of
changes that are tracked. To tell the framework to observe changes to the
properties of an object or to the elements of an array, decorate the field
with @track.
To know more, Check Spring 20 release notes:
https://releasenotes.docs.salesforce.com/en-us/spring20/release-
notes/rn_lwc_track.htm

13. Aura Component Events
Component A
Component B Component C
Component D
Application
Events
Comp
Events

14. For more information check:
https://developer.salesforce.com/blogs/2019/10/lightning-message-service-
developer-preview.html
Lightning Message Service
Visualforce LWC Aura

15. learn more with our trailmix
• https://sforce.co/lwc
• https://developer.salesforce.com/docs/comp
onent-library/documentation/lwc
• https://trailhead.salesforce.com/en/content/le
arn/trails/learn-to-work-with-javascript

16. Send an email to ahmedkishk@gmail.com
The fastest correct answer win 50% off certificate voucher
Challenge

17. 1. Universal Containers has 2 employees (Sales Rep and Sales Manager). It is required that only
Sales Manager can see and edit Account Forecast Field. What a Salesforce Admin should
configure to achieve this:
A. 1 Page Layout and 1 Record Type
B. 2 Page Layouts and 1 Record Type
C. 1 Page Layout and 2 Record Types
D. 2 page layouts and 2 record types
2. How many DML operations can be executed in a transaction before reaching Governor limits:
• A. 50 B. 100 C. 150 D. 200
3. Lightning Web Component can exists in Aura Component:
A. True B. False
Challenge

18. Thank You!
#CairoDreamin