Salesforce Lightning is the next generation of the CRM platform and user experience. With a convenient new design, more productivity tools, AI functionality, Lightning assists in streamlining business processes. You can build personalised, responsive apps without writing a line of code and drive your employees’ productivity by using the Lightning component-based framework.
Lightning includes functionality for optimising Salesforce pages, accelerating app custom development and performance, and much more.
Benefits of Salesforce Lightning:
Improved user experience:
Lightning offers a more modern, intuitive, and responsive user interface, with a focus on productivity and efficiency.
Faster development:
Lightning components are reusable and can be easily assembled using drag-and-drop tools, reducing the time and effort needed to create custom interfaces and business logic.
Better performance:
Lightning is designed to be faster and more efficient than its predecessor, Salesforce Classic, with improved page load times and reduced network requests.
Integration with other systems:
Lightning components can be easily integrated with other systems and third-party applications using APIs and web services.
Visualforce and Lightning Components
Visualforce is supported in Lightning Experience and most of your existing Visualforce pages work without any revisions needed. But do some testing to confirm expectedVisualforce pages behavior.
Here are a few things to Remember:
(1) There are a few Salesforce Classic features and attributes that may not be compatible in Lightning Experience. Use the Lightning Experience Configuration Converter to evaluate the status of your org’s Visualforce pages and get workarounds for pages with issues.
(2) If your Visualforce pages use JavaScript, there are things you should check. Visualforce doesn’t “own” the whole page when shown in Lightning Experience, and because of that, your JavaScript code needs to play by some new rules.
(3) If your Visualforce pages use the built-in standard components, their look-and-feel matches Salesforce Classic, whether users access them in the new or classic interface. But it’s easy to assign Lightning Experience stylesheets so the same page gets classic styling in Salesforce Classic and Lightning styling in Lightning Experience. You can use the Lightning Experience Configuration Converter to automatically apply the stylesheets to desired pages.
(4) Check out the Salesforce Lightning Design System (SLDS) for a collection of design patterns, components, and guidelines for creating interfaces that fit in with Lightning Experience. The SLDS is available at www.lightningdesignsystem.com.
This tool generates a personalized Readiness Report that shows you which features and customizations are ready for Lightning Experience now and provides recommendations for addressing items that may need some attention. It also shows you which users will benefit from Lightning Experience now versus later and estimates the level of effort for your transition project.
(1) Activity Timeline
(2) Shared Activities
(3) Enhanced Notes - rich-text notes and relate to records
Lightning Component Framework is a UI framework for building single-page apps designed for the Salesforce platform, mobile and desktop devices. You can also model Lightning components (reusable custom HTML elements) by using HTML and innovative JavaScript.
It is a new programming model for building Lightning components. It uses web standards breakthroughs, can coexist and interoperate with the Aura programming model, and delivers unparalleled performance.
Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript.
Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including:
Base Lightning Components -
a set of over 70 UI components all built as custom elements.
Lightning Data Service -
which provides declarative access to Salesforce data and metadata, data caching, and data synchronization.
User Interface API -
the underlying service that makes Base Lightning Components and the Lightning Data Service metadata aware, leading to substantial productivity gains.
Why Lightning Web Components?
To use modern browsers, Lightning Web Components uses core Web Components standards and provides only what's necessary to perform well in browsers supported by Salesforce. Because it's built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.
Lightning web component creation is 3 easy steps: (1) a JavaScript file, (2) an HTML file, and optionally (3) a CSS file.
HTML File -
Provides the structure for your component. HTML files all include the template tag. The template tag contains the HTML that defines the structure of your component.
JavaScript File -
defines the core business logic and event handling. JavaScript methods define what to do with input, data, events, changes to state, and more to make your component work.
It must include at least this code, where MyComponent is the name you assign your component class.
import { LightningElement } from 'lwc';
export default class MyComponent extends LightningElement {
}
The import statement indicates the JavaScript uses the LightningElement functionality from the lwc module.
The export statement defines a class that extends the LightningElement class. As a best practice, the name of the class usually matches the file name of the JavaScript class, but it's not a requirement.
CSS File -
provides the look, feel, and animation for your component.
NOTE: Lightning Web Components and Aura Components Do Work Together
Lifecycle Hooks -
Lightning Web Components provides methods that allow you to “hook” your code up to critical events in a component's lifecycle. These events include when a component is:
Created
Added to the DOM
Rendered in the browser
Encountering errors
Removed from the DOM
Respond to any of these lifecycle events using callback methods. For example, the connectedCallback() is invoked when a component is inserted into the DOM. The disconnectedCallback() is invoked when a component is removed from the DOM.
Decorators -
Decorators are often used in JavaScript to modify the behavior of a property or function.
To use a decorator, import it from the lwc module and place it before the property or function.
import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement{
@api message;
}
You can import multiple decorators, but a single property or function can have only one decorator. For example, a property can't have @api and @wire decorators.
Component Configuration File -
This file is with the extension .js-meta.xml. It provides metadata for Salesforce, including the design configuration for components intended for use in Lightning App Builder.
Lightning Web Components is focused on both the developer and user experience. Note that naming convention is to capitalize all the words when refer to the Lightning Web Components programming model. Also, the Lightning Components programming model you've been using is now called Aura Components. The components themselves are called Aura components.
You should have a basic understanding of Salesforce DX projects and Salesforce CLI.
Additional Reference:
Trailhead - Discover Lightning Web Components
Trailmix - Lightning Web Component (LWC)
Developer Salesforce - Introducing Lightning Web Components
Developer Salesforce - Lightning Web Components Get Started
ApexHours - Lightning Web Components Training
Salesforce Lightning: An Overview, Components, and Tutorials
Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.
You should have a basic understanding of Salesforce DX projects and Salesforce CLI. You'll also need to use a properly configured org in your Trailhead account and VS Code with the Salesforce Extension Pack.
NOTE: If you're using a Developer Edition org you've attached to your Trailhead account, you need to deploy My Domain in Setup (Trailhead Playground orgs automatically have My Domain deployed).
Step 1 - Create a Salesforce DX Project
Project consists of several local configuration files, as well as the code you want to deploy. In Salesforce terms we call this code metadata, which is the foundation of the Salesforce Platform.
Trailhead - Developer Beginner (Platform basics, Salesforce development, Apex basics, Apex trggers, Flow builder, Formulas & validations)
Trailhead - Create a Simple Lightning Web Component Using VS Code/CLI and Scratch Org/Dev Hub
Trailhead - Quick Start: Lightning Web Components
Trailhead - Create Lightning Web Components
Refer to the additional references and respurces below for the exam preparations.