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
- 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