Krdytkyu

Salesforce announced Lightning Web Components in Dec. 2018. In comparison to the existing Aura Framework:

• What are the benefits of using Lightning Web Components? / How much faster are they?


• Where are Lightning Web Components supported?


• How are LWC compatible to existing Aura Components?

What are the benefits of using Lightning Web Components? / How much
faster are they?

Lightning Web Components is the Salesforce implementation of that new breed of lightweight frameworks built on web standards. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond.Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including base lightning components,Lightning Data Service and User Interface API. You're getting more than what you have today with aura components aligning to web standards

How much faster are they? Honestly I don't have any metrics to define the speed yet neither are released by salesforce. Look for performance in the answer.

Where are Lightning Web Components supported?

How are LWC compatible to existing Aura Components?

An interoperability layer enables Lightning web components and Aura components to work together in an app.

You can write new Lightning web components and add them to apps that contain Aura components. Or, you can iteratively migrate on your schedule by replacing individual Aura components in your app with Lightning web components.

Compose Aura Components from Lightning Web Components:
You can compose Aura components from Lightning web components, but not the other way around. To communicate down the hierarchy, parents set properties on children. To decide when and how to nest a Lightning web component in an Aura component, it’s important to understand facets and slots.

In an Aura component, to refer to either Aura components or Lightning web components, use camel case with a colon separating the namespace and the component name.This Aura component is composed of lightning:card, which is a base Lightning component, and c:lwcHelloWorld, which is a Lightning web component.

<!-- auraComponent.cmp file -->



<aura:component implements="flexipage:availableForAllPageTypes">



    <lightning:card title="Aura Hello World" iconName="custom:custom30" />



    <c:lwcHelloWorld name="Earthling" />



</aura:component>

Send Events to an Enclosing Aura Component : To communicate from child to parent, dispatch an event. Lightning web components fire DOM events. An enclosing Aura component can listen for these events, just like an enclosing Lightning web component can. The enclosing Aura component can capture the event and handle it. Optionally, the Aura component can fire an Aura event to communicate with other Aura components or with the app container.

Use CSS Variables to Reference Aura Design Tokens Aura component styles cascade on Lightning web components.

Design tokens are named entities that store visual design attributes, such as margins and spacing values, font sizes and families, or hex values for colors.

Design tokens must be defined in an Aura component in the same DOM as your Lightning web component. Then, the Lightning web component can use CSS variable syntax to reference the Aura component’s design token.

Share JavaScript Code Between LWC and Aura :
To share JavaScript code between Lightning web components and Aura components, put the code in an ES6 module.

There is a lot more detailed info on the lwc developer guide interms of Aura coexistence.

What are the benefits of using Lightning Web Components?

LWC is built on web standards for almost all of the code involved, with a minimal amount of "custom code" that represents the core Aura runtime that underlies both technologies (as mentioned in the opening blog post). This means they are more secure (LWC adds CSS isolation, leverages native DOM support for better performance, and uses more web-standards JavaScript that can be optimized better).

Also, LWC automatically provides polyfills for older browsers, rather than having code silently (or often not-so-silently) fail on IE 11 and older versions of Safari/Chrome/Firefox. In addition, we have new component "types", such as service components; they have no UI so they use no markup, but can export methods for other components to import in just a single line of code. No more static resources just to share code within a set of components.

LWC itself has a richer API based on the UI-API for better performance and less Apex to write, and calling Apex is now a less painful experience. API support for third-party APIs is also improved, allowing you to call code in a safe, secure manner in ways that are not possible or required Apex code in Aura components.

Support is added for Jest, so you can now write unit tests for your client-side logic in a standard format. In Aura, you were expected to find your own testing framework, like Jasmine or something else. This will help improve your client logic, the same way that Apex unit tests can help improve your server-side logic.

LWC leverages a combination of knowledge of Aura and web components (the general standards), so developers with experience in web components can get in to LWC faster, and developers familiar with Aura will already know most of the major standard components already; you just need to translate them from the old syntax to the new. Porting most Aura components will be a straight-forward process, since they can be converted almost 1:1 (there are some major differences, but those are very limited).

So, better security, better testing, better browser compatibility, better performance, generally smaller components in terms of overall markup and script size, less need for Apex, less need for multiple Apex controllers, and strong leverage of already existing/established knowledge and skills from both Salesforce development and general web component development.

How much faster are they?

In the opening blog post, they say "we don't know, but it's better" (paraphrased, of course). Salesforce also mentions that customers have reported that Lightning Experience is faster than it was a year ago, and that's partly because the UI is now mostly LWC, and the all/most standard Lightning part of the Lightning Component library is LWC under the covers, which has contributed to faster Aura performance. So, anecdotally, it's better. But we're probably not going to know until someone with a lot of time on their hands converts a bunch of components and does a side-by-side comparison.

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

And, areas where LWC is not:

• 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.

How are LWC compatible to existing Aura Components?

The syntax itself is pretty different, so there will be significant portions of your code you'll have to rewrite to convert to an LWC. That said, if you're familiar with Aura, it's easy to convert most of an Aura component to LWC, and familiarity with React and other JavaScript web component frameworks will aid in helping understand LWC. Even better, LWC experience will make it easier to learn other standards-based web component frameworks, unlike Aura, which is proprietary in comparison.

LWC components can be placed in Aura components, but Aura components may not be used in LWC components. Both Aura and LWC components can coexist in the same page, and can, within some restrictions, communicate with each other via events. In other words, you'll want to start converting your code from the utility/widget portion of your components before converting main components, and you'll need to check the "supported experience" list above before trying to convert Aura components to LWC.

In many cases, you won't be able to use LWC immediately; you can always put those on a backlog or, just not worry about it, since Aura will be around for a while. The more components you convert to LWC, the better performance you can expect from your components overall. Converting your core UI components from Aura to LWC won't require any major inconvenience in your existing Aura components, because they look like Aura components in Aura.

Overall, LWC is pretty limited in this release, so you might want to use it primarily for minor UI components. There's a few "missing pieces" that you should be aware about. Besides a lack of support in certain areas (from the above list), we can't use auradocs in LWC (so, no way to document within the system), there's no way to declare event attributes, so there's mistakes that can be made.

If you like being on the cutting edge of technology, there's no major reason (outside of lack of support) for not jumping in LWC right now, as they are perfectly usable within the limitations; you'll have a nice head start as features catch up. As long as you go in knowing the limitations and reading the documentation carefully, you'll be fine. Everything in LWC is far simpler than Aura. There's fewer overall "gotchas" than Aura, and my personal experience so far is that there's a lot less to learn, because it's a very lean API, in a good way.