Salesforce is committed to developing open web standards and is a member of the World Wide Web Consortium (W3C).
Why Lightning Web Components?
Developers familiar with Web Components are mostly familiar with LWC out-of-the-box. Aura is proprietary, so the more you know about web standards, the more you’ll have of a skill that can be used outside Salesforce, too!
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
LWC leverages built-in browser security features from WC standards, so there’s less custom code. This means they run faster and are more consistent in how they enforce security. Also, events have a more limited scope, so there’s much less processing required to handle events.
New Security Features
We get better CSS isolation, script isolation, DOM isolation, and a more limited event scope, all of which leads to more consistent component design.
We now have better support for ES6 and ES7, not available in Aura. You can do more in less code. It also transpiles code to work with IE 11 and other browsers that are missing some features.
More Consistent Data Binding
Two-way data binding, which has always been kind of buggy in Aura, is gone. This forces developers to coordinate how data moves between components. This also means that data binding will work as expected, without the “gotchas” from Aura.
You can now write components that have no UI. They simply provide reusable methods that you can use in other components. This is much more efficient than Static Resources.
You can import accessible methods from other components (as per above), and also import specific Apex methods, even from multiple classes. In addition, the Apex methods can be cached for improved performance.
Advantages of Lightning Web Components
– DOM Access Containment
A component can only traverse the DOM and access elements that it created. This behavior prevents the anti-pattern of reaching into DOM elements owned by other components. Lightning web components can’t use the window or document global properties to query for DOM elements. For example, use this.template.querySelector() instead of document.querySelector().
– Secure Wrappers
For security, Lightning Locker restricts the use of global objects by hiding an object or by wrapping it in a secure version of the object. For example, the secure version of window is SecureWindow. Locker intercepts calls to window and uses SecureWindow instead.
– Restricted Access to Salesforce Global Variables
Lightning web components don’t have access to:
– Content Security Policy Overview
The Lightning Component framework uses Content Security Policy (CSP), which is a W3C standard, to control the source of content that can be loaded on a page. CSP helps prevent cross-site scripting (XSS) and other code injection attacks. All CSP rules work at the page level, and apply to all components and libraries.
– Call APIs from Apex
To call an API from Apex, use a named credential, which specifies the URL of a callout endpoint and its required authentication parameters.
Install Jest for Testing Lightning Web Components
Better browser compatibility
Rendering is so much faster in LWC due to browser API support.
Smaller components in terms of overall markup and script size
Less need for Apex
– lightning-record-form, lightning-record-edit-form, and lightning-record-view-form
Avoiding multiple Apex controllers
Lightning Web Components supports the same browsers as Lightning Experience.
Supported Browsers for Lightning Experience
These versions of the supported browsers take full advantage of Lightning Web Components performance enhancements.
BROWSER NAME VERSION
Google Chrome™ 59+
Microsoft® Edge 15+
Mozilla® Firefox® 54+
Apple® Safari® 11.x+
ES6 (ECMAScript 2015)
ES7 (ECMAScript 2016)
ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)
Where are Lightning Web Components supported?
Lightning App Builder
First-Generation Managed Packages
Second-Generation Managed Packages
Tooling API—LightningComponentBundle, LightningComponentResource
Where are Lightning Web Components not supported?
Lightning Components for Visualforce
Salesforce Console (Navigation Item API, Workspace API, UtilityBar API)
URL Addressable Tabs
Lightning for Gmail, Outlook Integration
EMP API, Conversation Toolkit API, Omni Toolkit API, Quick Action API
Standard Action Overrides, Custom Actions, Global Actions, List View Actions, Related List View Actions
These limitations only apply to Spring 19. Better support is expected in the following releases.
2 thoughts on “Lightning Web Components in Salesforce”
Would you please help me how to pass two filter value like from a picklist value I want to show only related to two picklist value
I don't have any sample code reference for this.