Salesforce Lightning Web Components Overview
Download as PPTX, PDF1 like136 views
The document introduces Lightning Web Components (LWC) as a modern approach to building web applications on the Salesforce platform, emphasizing their performance, compatibility with existing Aura components, and adherence to web standards. It covers the syntax and structure of LWCs, programming practices, data access methods, and provides a roadmap for developers transitioning from Aura to LWC. Additionally, it outlines the setup process for development environments and highlights available resources for learning LWC.
![Data Access in Lightning AuraComponents
({
"echo" : function(cmp) {
var action = cmp.get("c.getContactByRecordId");
action.setParams({ recordId: cmp.get("v.recordId") });
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var value = response.getReturnValue();
cmp.set("v.contact", response.getReturnValue());
} else if (state === "ERROR") {
var errors = response.getError();
if (errors && errors[0] && errors[0].message) {
console.log("Error message: " + errors[0].message);
cmp.set("v.error", errors[0]);
}
}
});
$A.enqueueAction(action);
}
})](https://image.slidesharecdn.com/lwcdemo-200601153559/85/Salesforce-Lightning-Web-Components-Overview-29-320.jpg)
![Data Access in Lightning Web Components (1)
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email’;
const fields = [NAME_FIELD, EMAIL_FIELD];
export default class ShowContactData extends LightningElement {
@api recordId;
@wire(getRecord, { recordId: '0014E00000ySOIMQA4', fields })
contact;
}](https://image.slidesharecdn.com/lwcdemo-200601153559/85/Salesforce-Lightning-Web-Components-Overview-30-320.jpg)
Salesforce Lightning Web Components Overview
- 1. An Introduction to Lightning Web Components Presenter: Nagarjuna Kaipu
- 2. Agenda 1. Lightning Web Components – Introduction 2. Aura VS LWC and Compatibility 3. Lightning Web Components Syntax 4. Transition from Aura to LWC 5. VS Code IDE Setup 6. LWC in Action
- 3. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Why we need to go for LWC 1. It uses Core Web Components standards 2. Most of the code you write is standard JavaScript and HTML 3. Provides only what’s necessary to perform 4. It is built on code that runs natively in browsers 5. It is lightweight and delivers exceptional performance Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. What are Lightning Web Components
- 4. The World of Web Development has Changed Developers demand standard development models and tools they know and love Proprietary Frameworks Data Services UI Components Templates Rendering Optimization Modules Language Extensions Web Standards ECMAScript 5 Events Standard Elements Frameworks Specialized Services Data Services UI Components Web Standards Web Components Templates Custom Elements Shadow DOM Decorators Modules ECMAScript 7 Events Standard Elements Rendering 2014 2019 Web Standardization 2000 2005 2010 2015
- 5. Build High Performance Apps with Web Standards Ease of Use + Transferability of Skills Core language Events Standard elements Rendering Data services UI components Framework templates Rendering optimization Language extensions Framework Abstractions Web Standards Typical Frameworks Execute more code in the browser for a blazing fast experience Lightning Web Components Component Performance
- 6. Enhanced productivity with web standards Use the modern language of the web: ES6+, Custom Elements, classes, modules and imports Engineered 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 Generally Available Spring ‘19 (Feb) Every JavaScript developer can now code on Salesforce
- 7. Lightning Web Components Aura Components Run All Components Together - No Migrations Required Aura & Lightning Web Components are designed to work together
- 8. Lightning Web Components Enablement Approach Technical deep dives into tooling, testing, composition, and more! Lightning Web Component Foundation Component Composition Static Resources & 3rd Party JavaScript Pub Sub Communication DOM and CSS Development Tooling Lightning Web Component Anatomy Using Lightning Data Service Using Apex
- 9. Lightning Aura Components & Lightning Web Components work together… Compatibility
- 10. Recap of Lightning Aura Component Anatomy(1)
- 11. Recap of Lightning Aura Component Anatomy(2) File Description helloworld.auradoc Component documentation helloworld.cmp Component markup helloworld.cmp-meta.xml Metadata file, not used really helloworld.css CSS for styling, namespaced with .THIS helloworld.design Design time attributes helloworld.svg SVG for component icon helloworldController.js Controller, Javascript helloworldHelper.js Helper code, Javascript helloworldRenderer.js Custom rendering, Javascript
- 12. Lightning Web Component Anatomy (1)
- 13. Lightning Web Component Anatomy (2) File Description helloworld.html Component markup helloworld.js Component logic helloworld.css Component styling; scoped to shadow DOM helloworld.cmp-meta.xml Metadata file – used to change component behavior Its also have some Optional component like CSS, SVG Icon.
- 14. 1. Component name Must begin with a lowercase letter 2. Name must contain only alphanumeric or underscore characters 3. Can’t contain a hyphen (dash) 4. Must be unique in the namespace (No other Aura or LWC can have this name) 5. Can’t include whitespace 6. Can’t end with an underscore 7. Can’t contain two consecutive underscores 8. Folder and files names must have same “prefix name” Naming convention/Rules for components bundles
- 15. camelCase: Each word in the middle of the respective phrase begins with a capital letter. for example apexHours. PascalCase: It is same like Camel Case where first letter always is capitalized. for example ApexHours. kebab-case: Respective phrase will be transferred to all lowercase with hyphen(-) separating words. for example apex-hours. Different between camelCase, PascalCase and kebab-case Case Name camelCase PascalCas e kebab-case Exampl e helloWorld HelloWorld hello-world Where to use Folder File Names Property name in JS Class in Java Script Component reference in markup HTML attribure name
- 16. Lightning Web Components Syntax
- 17. • Use camel case to name your component and use kebab-case to reference a component in the markup • Many SLDS classes are now available as Lightning base components i.e. <lightning-card /> • Markup goes into a Shadow DOM • <template /> tag is used as parent • <slot /> tag is used to allow extensibility (slots may be named) – slot-attribute is used to target slots in other components HTML Markup (1)
- 18. HTML Markup (2) Component Syntax
- 19. HTML Markup (3)
- 20. • Java Script Class name should be in PascalCase • ES6 classes are used to define logic • ES6 module imports / exports are used to import and export logic JavaScript logic
- 21. • Needs to be created in the component bundle • Has the same name as the component • Uses standard CSS syntax • Unlike Aura, no need for .THIS • Selectors work inside the component • CSS is scoped to the Shadow DOM and is no longer namespaced CSS
- 22. Metadata XML • Metadata XML file is used to configure component and changebehavior To host on Salesforce using App Builder
- 23. Attributes
- 24. Attributes in Lightning Aura Components Attribute • Name • Type • Access • Default value
- 25. Attributes in Lightning Web Components Public attribute Private attribute Constructor used to compute default value to private attribute
- 26. @api attributes in Lightning Web Components (2)
- 27. @api attributes in Lightning Web Components (3) Best Practice is using constructor to set default value and connectedCallback
- 28. Data Access
- 29. Data Access in Lightning AuraComponents ({ "echo" : function(cmp) { var action = cmp.get("c.getContactByRecordId"); action.setParams({ recordId: cmp.get("v.recordId") }); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { var value = response.getReturnValue(); cmp.set("v.contact", response.getReturnValue()); } else if (state === "ERROR") { var errors = response.getError(); if (errors && errors[0] && errors[0].message) { console.log("Error message: " + errors[0].message); cmp.set("v.error", errors[0]); } } }); $A.enqueueAction(action); } })
- 30. Data Access in Lightning Web Components (1) import { LightningElement, api, wire } from 'lwc'; import { getRecord } from 'lightning/uiRecordApi'; import NAME_FIELD from '@salesforce/schema/Contact.Name'; import EMAIL_FIELD from '@salesforce/schema/Contact.Email’; const fields = [NAME_FIELD, EMAIL_FIELD]; export default class ShowContactData extends LightningElement { @api recordId; @wire(getRecord, { recordId: '0014E00000ySOIMQA4', fields }) contact; }
- 31. Data Access in Lightning Web Components (2) <template> <lightning-card> <div class="slds-m-around_medium"> <template if:true={contact.data}> <!– show for SUCCESS state --> </template> <template if:true={contact.error}> <!– show for ERROR state --> </template> </div> </lightning-card> </template> Showing success / error is much easier as it’s part of the template
- 32. import { LightningElement, track } from 'lwc'; import getContactList from '@salesforce/apex/ContactController.getContactList'; export default class ApexImperativeMethod extends LightningElement { @wire(getContactList) contacts; } Data Access in Lightning Web Components (3) Call method in server-side Apex Controller using @wire
- 33. import { LightningElement, track } from 'lwc'; import getContactList from '@salesforce/apex/ContactController.getContactList'; extends LightningElement {export default class ApexImperativeMethod @track contacts; @track error; handleLoad() { getContactList().then(result => { this.contacts = result; }).catch(error => { this.error = error; }); } } Data Access in Lightning Web Components (4) Call method in server-side Apex Controller using @track attributes and Promises
- 34. Decorator Description @api To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of a reactive property changes, the component’s template rerenders any content that references the property. @track To track a private property’s value and rerender a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties. @wire To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method. Introducing Javascript Decorators https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_decorators
- 35. Decorator Syntax <optional_arguments>) Syntax @decorator_name(<optional_method_to_decorate>, propertyOrFunctionBeingDecorated; Examples @track bar; @api foo; @wire(getRecord, {recordId: '0014E00000ySOIMQA4', fields}) contact; A decorator basically returns a new property or function withnew, decorated, functionality.
- 36. Reactive vs. non-Reactive Attributes • Reactive = Will make the template rerender when changed •Non-reactive = Will not make the template rerender when changed Reactive variable: $foo In the wire adapter’s configuration object, prefix a value with $ to reference a property of the component instance. The $ prefix tells the wire service to treat it as a property of the class and evaluate it as this.propertyName. The property is reactive. If the property’s value changes,new data is provisioned and the component rerenders. https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.data_wire_service_about
- 37. Transitioning from Lightning Aura Components to Lightning Web Components
- 38. Aura Component to Web Component Mapping
- 39. Composition Lightning Aura Components may contain Lightning Web Components
- 40. New, less verbose and error-prone, Syntax (1)
- 41. New, less verbose and error-prone, Syntax (2)
- 43. Replace proprietary syntax and Tools
- 44. Getting Started with Lightning Web Components
- 45. 1. Get a Salesforce Developer org) https://developer.salesforce.com/signup 2. Install and Configure Visual Studio Code or other IDE https://code.visualstudio.com/ 3. Install and Configure Salesforce DX https://developer.salesforce.com/platform/dx Getting Started
- 46. Install and Configure Visual Studio Code or other IDE Extensions • Salesforce Extension Pack • Lightning Web Components Recommended • Lightning Web Component snippets for Javascript typeahead https://github.com/forcedotcom/salesforcedx-vscode/tree/develop/packages/salesforcedx-vscode-lwc/snippets
- 47. Install and Configure Salesforce DX > sfdx plugins salesforcedx 44.0.7 > sfdx plugins:install salesforcedx@pre-release
- 48. • No use of stored actions anymore – transparent using @AuraEnabled(cacheable=true) • No Console API in Lightning Web Components yet • No Web Developer support • Visual Studio Code • Extensions (Salesforce Extension Pack, Lightning Web Components) • Trailhead Trailmix (https://sfdc.co/LWC_Trailmix) • Schema support • import FIELD_EMAIL from “@salesforce/schema/Contact.Email” The fine print
- 50. Quick Start: Lightning Web Components https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components Trail: Build Lightning Web Components https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-components Lightning Component Library https://developer.salesforce.com/docs/component-library Working with Aura and Lightning Web Components: Interoperability and Migration https://developer.salesforce.com/blogs/2019/02/working-with-aura-and-lightning-web-components-interoperability-and-migration.html The Future of Salesforce IDEs https://developer.salesforce.com/blogs/2018/12/the-future-of-salesforce-ides.html Resources
- 52. Questions?