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.
Salesforce is committed to developing open web standards and is a member of the World Wide Web Consortium (W3C).
Why Lightning Web Components?
Standard Development
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.
Better Execution
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.
ECMAScript ES6+
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.
ECMAScript (or ES) is a trademarked scripting-language specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. It was created to standardize JavaScript, so as to foster multiple independent implementations.
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.
Service Components
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.
Mixins
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
Better Security
– JavaScript Strict Mode Enforcement
In JavaScript, strict mode is enforced in modules but optional in regular programs. However, Lightning Locker implicitly enables JavaScript strict mode everywhere. You don’t need to specify “use strict” in your code. JavaScript strict mode makes code more secure, robust, and supportable.
When strict mode is enabled and unsafe actions are taken, JavaScript throws errors that would otherwise be suppressed.
– 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:
$A
Aura
Sfdc
sforce
– 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.
Better Testing
Install Jest for Testing Lightning Web Components
Better browser compatibility
Better performance
Rendering is so much faster in LWC due to browser API support.
Smaller components in terms of overall markup and script size
Reusability
Less need for Apex
– lightning-record-form, lightning-record-edit-form, and lightning-record-view-form
– Components use @wire in their JavaScript class to read data from one of the wire adapters in the lightning/ui*Api modules.
Avoiding multiple Apex controllers
Supported Browsers
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+
Supported JavaScript
To develop Lightning web components, use the latest versions of JavaScript.
Lightning Web Components JavaScript support includes:
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)
A huge benefit of the Lightning Web Components programming model is that you write standard JavaScript code.
Where are Lightning Web Components supported?
Lightning Experience
Salesforce App
Lightning Communities
Lightning App Builder
Community Builder
First-Generation Managed Packages
Second-Generation Managed Packages
Unlocked Packages
Unmanaged Packages
Change Sets
Metadata API—LightningComponentBundle
Tooling API—LightningComponentBundle, LightningComponentResource
Where are Lightning Web Components not supported?
Lightning Out
Lightning Components for Visualforce
Standalone Apps
Salesforce Console (Navigation Item API, Workspace API, UtilityBar API)
URL Addressable Tabs
Flows
Snap-ins Chat
Lightning for Gmail, Outlook Integration
Apex Continuations
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
Chatter Extensions
These limitations only apply to Spring 19. Better support is expected in the following releases.
Playground
https://developer.salesforce.com/docs/component-library/tools/playground.
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.