Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Lightning Web
Components
Nidhi Sharma
Associate Tech Lead & Scrum Master
Metacube Software Pvt. Ltd.
Agenda
● What is Lightning Web Component?
● Journey of Web Stack and its evolution
● Fundamentals of Lightning Web Compone...
What is Lightning Web Component?
Lightning Web Components are custom HTML elements built using HTML and
javascript.
Web Stack Journey
2014 Web Stack 2019 Web Stack
Lightning Web Components Stack
Fundamentals
HTML FILE
CSS FILE
CONFIGURATION
METADATA FILE
JAVASCRIPT
FILE
LIGHTNING
WEB
COMPONENT
Lightning Web Components Bundle
HTML TEMPLATE
The power of Lightning Web Components is the templating system, which uses the virtual DOM to render
compone...
HTML TEMPLATE
The power of Lightning Web Components is the templating system, which uses the virtual DOM to render
compone...
Component CSS
● Components can’t share style sheets
● Each component can have only one style sheet
● Salesforce Lightning ...
Decorators
@api
➔ Exposes public property.
➔ Owner component can access the
public properties
➔ Public properties are reac...
Decorators
@track
➔ Private reactive properties.
➔ Owner component cannot access
these properties
➔ Rerenders the content ...
Decorators
@wire
➔ Read data using wire adapters in
the lightning/ui*Api
➔ Owner component cannot access
these properties
...
Component Lifecycle Hooks
Constructor()
Component Instance
Created
connectedCallback()
Component inserted in DOM
renderedC...
Components
Communication
Flow Data in component Hierarchy
Parent
Child
@api child1
Child
@api child2
child-property=’Set me’
child-property =’Set m...
Flow Data in component Hierarchy
Parent
Child1
dispatchEvent
(child1Event)
Child2
dispatchEvent
(child2Event)
Child1Handle...
Flow Data in component Hierarchy
lwc-brother
lwc-sister
● Use singleton library that follows the publish – subscribe patte...
Lets cook LWC!!
Recipe - To-do-List
To-do-list
Task:
Desc
Priority
to-do-list
Add Item
to-do-form
to-do-app
Filter by Priority
To-do-List-Components
Task:
Desc
Priority
Add Item
to-do-app to-do-form
to-do-list
Filter by Priority
Ingredients (Tools)
● One - Salesforce CLI - installed
● One - Visual Studio Code - Installed
● One - Salesforce Extension...
Seeking Help!!
● Lightning Component Library
● Playground
● TrailHead Sample Gallery
● Build Lightning Web Components
Trail
Preparation (Steps)
1. Create SFDX Project
a. Sfdx force:project:create --projectname toDoForm
b. Select SFDX:Create Proje...
to-do-form
Task:
Desc
Priority
Add Item
to-do-form
toDoForm
toDoForm.html
toDoForm.js
toDoForm.js-meta.xml
Lets cook (coding time )!!
Task:
Desc
Priority
Add Item
to-do-form
Serving steps
Drag toDoApp Component on the page you want to see your component
To-do-app Recipe is Ready to Serve!!
Q & A
Thank You !!
Nächste SlideShare
Wird geladen in …5
×

Lightning web components - Introduction, component Lifecycle, Events, decorators and todo recipe

190 Aufrufe

Veröffentlicht am

Introduction, component Lifecycle, Events, decorators and todo recipe

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Lightning web components - Introduction, component Lifecycle, Events, decorators and todo recipe

  1. 1. Lightning Web Components Nidhi Sharma Associate Tech Lead & Scrum Master Metacube Software Pvt. Ltd.
  2. 2. Agenda ● What is Lightning Web Component? ● Journey of Web Stack and its evolution ● Fundamentals of Lightning Web Component ● Component LifeCycle Hooks ● Components Inter-Communication ● To-do-list recipe
  3. 3. What is Lightning Web Component? Lightning Web Components are custom HTML elements built using HTML and javascript.
  4. 4. Web Stack Journey
  5. 5. 2014 Web Stack 2019 Web Stack
  6. 6. Lightning Web Components Stack
  7. 7. Fundamentals
  8. 8. HTML FILE CSS FILE CONFIGURATION METADATA FILE JAVASCRIPT FILE LIGHTNING WEB COMPONENT Lightning Web Components Bundle
  9. 9. HTML TEMPLATE The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. ● A template is valid HTML with a <template> root tag. ● When a component renders, the <template> tag is replaced with the name of the component, <namespace-component-name> ● Bind properties in a component’s template to properties in the component’s JavaScript class by surrounding the property with curly braces, {property} ● Render DOM Elements Conditionally with if:true|false directive to a nested <template> tag that encloses the conditional content.
  10. 10. HTML TEMPLATE The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. <!-- helloConditionalRendering.html --> <template> <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14"> <div class="slds-m-around_medium"> <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input> <template if:true={areDetailsVisible}> <div class="slds-m-vertical_medium"> These are the details! </div> </template> </div> </lightning-card> </template>
  11. 11. Component CSS ● Components can’t share style sheets ● Each component can have only one style sheet ● Salesforce Lightning Design System is a CSS framework
  12. 12. Decorators @api ➔ Exposes public property. ➔ Owner component can access the public properties ➔ Public properties are reactive
  13. 13. Decorators @track ➔ Private reactive properties. ➔ Owner component cannot access these properties ➔ Rerenders the content of the component if the property changes.
  14. 14. Decorators @wire ➔ Read data using wire adapters in the lightning/ui*Api ➔ Owner component cannot access these properties ➔ Rerenders the content of the component if the property changes. import getContactList from '@salesforce/apex/ContactController. getContactList'; @wire(getContactList) wiredContacts
  15. 15. Component Lifecycle Hooks Constructor() Component Instance Created connectedCallback() Component inserted in DOM renderedCallBack() Rendering is complete render() Component renders disconnectedCallBack() Component is removed errorCallBack (error, stack) Captures error in hierarchy
  16. 16. Components Communication
  17. 17. Flow Data in component Hierarchy Parent Child @api child1 Child @api child2 child-property=’Set me’ child-property =’Set me too’ ● Child Components must declare Public API with @api decorator ● Child Component can assign default value to the public property but it cannot change the value of the property. ● Only Parent can set the public property.
  18. 18. Flow Data in component Hierarchy Parent Child1 dispatchEvent (child1Event) Child2 dispatchEvent (child2Event) Child1Handler Child2Handler ● Data must be passed up using Events. ● Events are created using the Event or CustomEvent standard JavaScript classes ● Child components create and dispatch events. ● Parent component handles events dispatched by child components.
  19. 19. Flow Data in component Hierarchy lwc-brother lwc-sister ● Use singleton library that follows the publish – subscribe pattern ● Salesforce has published such library - pubsub a service component that follows the pattern ● This type of communication is also used for talking with Aura Components on the same level. aura-cousin
  20. 20. Lets cook LWC!! Recipe - To-do-List
  21. 21. To-do-list Task: Desc Priority to-do-list Add Item to-do-form to-do-app Filter by Priority
  22. 22. To-do-List-Components Task: Desc Priority Add Item to-do-app to-do-form to-do-list Filter by Priority
  23. 23. Ingredients (Tools) ● One - Salesforce CLI - installed ● One - Visual Studio Code - Installed ● One - Salesforce Extension package - Installed ● One - Development org - with enabled My Domain in Org and DevHub
  24. 24. Seeking Help!! ● Lightning Component Library ● Playground ● TrailHead Sample Gallery ● Build Lightning Web Components Trail
  25. 25. Preparation (Steps) 1. Create SFDX Project a. Sfdx force:project:create --projectname toDoForm b. Select SFDX:Create Project and provide name 1. Create Scratch Org a. sfdx force:org:create -s -f config/project-scratch-def.json -a "wit" b. Using VS Code - SFDX:Create a Default Scratch Org Project 1. Create Lightning Web Component a. sfdx force:lightning:component:create --type lwc -n toDoForm -d force- app/main/default/lwc b. Using VS Code - Select SFDX:Create a Lightning Web Component Project
  26. 26. to-do-form Task: Desc Priority Add Item to-do-form toDoForm toDoForm.html toDoForm.js toDoForm.js-meta.xml
  27. 27. Lets cook (coding time )!! Task: Desc Priority Add Item to-do-form
  28. 28. Serving steps Drag toDoApp Component on the page you want to see your component
  29. 29. To-do-app Recipe is Ready to Serve!!
  30. 30. Q & A
  31. 31. Thank You !!

×