Lightning Web Components by Abdul Gafoor
Download as PPTX, PDF0 likes100 views
This document provides an overview of developing Lightning Web Components (LWC) with the Salesforce Development Experience (DX). It discusses the need for LWC, how to set up the development environment with the Salesforce CLI and VS Code extensions, the anatomy of an LWC bundle, using decorators while developing components, deploying LWC to orgs, and comparing LWC to Aura components. The presentation encourages attendees to get hands-on experience with LWC through Trailhead modules.
Lightning Web Components by Abdul Gafoor
- 1. Develop Your First Lightning Web Component with DX
- 3. 3 Point to Point Integration Challenges Solution – Event Driven Architecture Understanding Platform Events Demo Q & A Need for Lightning Web Components (LWC) Environment required for LWC Developing Lightning Web Components Deployment of Lightning Web Components Q & A Agenda
- 5. Lightning Aura Components vs Lightning Web Components 5 Lightning Aura Component Lightning Web Component Aura Framework Shadow Dom Modern JavaScrip t Custom Elements Template s
- 6. Page driven architecture(Visualforce Pages) Evolution of Web Technologies Modern Web Standards(Lightning Web Components) Component based architecture(Aura Components) 6
- 7. What is a Lightning Web Component?
- 8. What is LWC? 8 ● A new programming model for building Lightning components ● Built using HTML and modern JavaScript ● Code runs natively in browsers ● Uses Modern Web Standards
- 10. Component Bundle 10 Component Bundle HTML file (myFirstComponent.html ) JavaScript file (myFirstComponent.js) js-meta.xml file (Configuration file) (myFirstComponent.js- meta.xml) CSS file (myFirstComponent.css) svg file (myFirstComponent.svg) Additional JavaScript files for Sharing Code (utility.js)
- 11. Set up environment for LWC
- 12. Set up environment for LWC 12 ● Install the Salesforce CLI ● Install a Code Editor(VS Code) ● Salesforce Extension Pack for VS Code ● Lightning Web Components Extension Pack for VS Code ● Enable My Domain in your Salesforce Org
- 13. 13Introduction to Salesforce DX ● Why DX? ○ Limitations of traditional development cycle. ● What is DX? ○ Standard Developer Experience ○ Git,Selenium, Eclipse, Sublime ○ Tool set ○ CLI
- 15. Types of Decorators 15 ● @api - used to set the variables or the properties as public ● @track - used to map the changing values of the properties and rerender the component when properties change (Private reactive properties) ● @wire - used to make a server-side call
- 16. Developing LWC 16 ● Creating LWC ● Using decorators while developing the component ● Adding CSS to the component ● Deploying the components ● Viewing the components in the Salesforce Org
- 17. Deploying LWC 17 ● Through VS-Code to Org ● Through Changesets
- 18. 18Aura Component and SFDX ● Create an Aura component ● Deploy using SFDX
- 19. Comparison between Aura and LWC 19 Features Aura LWC Quick action support Performance Response Time Component Based Support for Unit Test
- 20. What’s Next
- 21. Get Hands-on with Trailhead 21 Quick Start : Lightning Web Components Lightning Web Component Basics Modern Javascript Development
- 22. Q & A Time ! 22 Questions?
- 23. Additional Resources 23 ● Salesforce Documentation ● Salesforce CLI ● VS Code ● LWC-recipes ● Playground