Lightning Web Components- Ep 1 - Decorators, Life Cycle Hooks and Compositions
0 likes1,227 views
This document provides an overview of topics covered in Day 2 of a 5-day Lightning Web Components learning series, including decorators like @track and @api, component lifecycle hooks, and using getter/setter properties. Decorators are discussed for managing reactive data, exposing public properties and methods. The component lifecycle is explained, covering the constructor, connectedCallback, renderedCallback, and disconnectedCallback methods. Upcoming sessions on events, data, and additional topics are also promoted.
Lightning Web Components- Ep 1 - Decorators, Life Cycle Hooks and Compositions
- 1. Letterkenny, Ireland Developers Group Lk_Sf_Devs LkTrailblazers Welcome to our virtual learning series Learn Lightning Web Components in 5 Days Day 2 - Recap + Decorators, Lifecycle hooks and Compositions
- 3. Nishant Singh Panwar Community Group Leader Salesforce Developer and Consultant ● 6 Years of Salesforce Implementation Experience ● 8x Salesforce Certified - Application Architect UDAIPUR Nishant_SP
- 5. Sahil Batra (Director @ MTX Group Inc.) Industry Experience Having 9 year of experience in IT Industry and 6 years in Salesforce ecosystem.Started my Salesforce career as Developer and have played various roles like Technical Lead , Technical Architect and Corporate Trainer. Professional Highlights ● Manage Salesforce trainings and certifications. ● Work as Technical Architect / Principal Developer on Projects. ● Hold 5 Salesforce Certifications and 1 Google certification. ● Conducted Training in India, US , Australia and UK. ● Trained 500+ freshers and 300+ lateral folks in Salesforce. ● Trained 800+ students and 250+ faculty members. Email : [email protected] Twitter : sahilbatraa18
- 6. Topics covered in Session 1 ● Introduction to LWC ● Why LWC ? ● 2014 Web stack ● 2019 Web Stack ● LWC Framework ● Aura & LWC ● Environment Setup ● LWC Bundle ● Build your First Component ● Applying CSS to Components ● Data Binding ● Conditional Rendering ● Loop & Iteration
- 7. Decorators : @track Demo 3 & 6 : Reactive Private Properties ● Used with Private Property. ● Used if property is Object or an Array. ● All Primitive Type properties are reactive by Default. ● Data Types ○ Primitive Values - No @track Required ○ Objects - require @track ○ Arrays - require @track
- 8. Decorators : @api Demo 7 : Public Properties ● Used with Public Property.
- 9. Decorators : @api Demo 7 : Public Properties Mutation Demo ● Objects passed to components are read only. ● To trigger a mutation use events. ● Use primitive values for public properties ○ Define data shape and no complex documentation is required. ○ Standard HTML element only accept primitive values for attributes.
- 10. Public Boolean Properties Demo 8 : Public Boolean Properties ● By Default value is false. ● Including a attribute value means passing true.
- 11. Use getter & setter to modify data Demo 9 : getter setter properties ● Modify property value ● No need to declare a property ● If you write a setter for public property,you must also write a getter. ● Best practice is to annotate getter with @api. Do not annotate both.
- 12. Call Method on Child Component Demo 10 : Public Methods ● To expose public method expose it with @api ● Parent component can call method to communicate down the hierarchy. ● querySelector() - return first element which matches selector ● querySelectorAll() - return an array of DOM elements. ● Do not use id as HTML template renders id may transformed into global unique values
- 13. Using Slots Demo 11 : Slots Demo ● Use to pass markup into components ● Similar to facets in Aura ● We have named and unnamed slots ● Do not include more than one unnamed slot
- 14. Component Lifecycle Component Requested Constructor is called Update Public Properties Has public properties? Dom Inserted Connected Callback DOM Rendered Has Child Components? Yes Yes Rendered callback on Child Rendered callback on Parent Parent Removed from DOM disconnectedcallback on Parent Child removed from DOM disconnectedcallback on Child
- 15. Component Lifecycle ● Constructor ○ Fires when component instance is created. ○ DOM manipulation cannot be done as DOM is not inserted yet. ○ Attribute assignment cannot be done. ○ Public properties are also not available
- 16. Component Lifecycle ● connectedCallback() ○ Fires when DOM is inserted. ○ You cannot access child elements as it flows from parent to child. ○ Fire more than once during lifecycle if we reorder component. ○ Mostly used for adding up event listeners. ○ DOM manipulation cannot be done as it is not rendered yet. ○ Attribute value assignment can be done here. ○ Flows from Parent to Child.
- 17. Component Lifecycle ● renderedCallback() ○ Called on child component first and than on to parent. ○ Use to perform logic after component has finished rendering phase. ○ Is called many times and we use some logic to execute only once. ○ Can create infinite loops. ○ Do not update public properties & tracked properties in renderedCallback()
- 18. Component Lifecycle ● disconnectedCallback() ○ Flows from Parent to child. ○ Called when component is removed from the DOM. Demo 12 : Lifecycle Demo
- 19. Post your Queries @ bit.ly/lwcquery
- 20. Coming Up ● 14 May - Component communication using events. bit.ly/lwcday3 ● 21 May - Working with Salesforce data including LDS. bit.ly/lwcday4 ● 28 May - Navigation Services, Aura with LWC interoperability & extra topics. bit.ly/lwcday5 RSVP