Lightning Web Components – and now what??

The 13rd of December this year, Salesforce announced the release of Lightning Web Components (LWC). This is something in which Salesforce has been working very hard, and which is surrounded by an aura of mystery. Because of that, in this blog I will try to explain the keys of this announcement.

LWC is a new framework, different from aura, that will allow you to write Web Components, which most of modern browsers support. But don’t worry, if there is something not yet supported by a Salesforce approved browser, LWC framework will do the work to translate the Web Components into something that is understandable by the browser. You don’t have to worry about that.

Classic Lightning Components, now commonly denominated as Aura Components, will continue working and being supported by Salesforce. This is, you don’t have to rewrite your Aura Components to be Lightning Web Components.

However, rewriting Aura Components to be Lightning Web Components is not too complicated, and you will get some benefits:

• You will get a better performance, because the LWC framework takes advantage of many more browser capabilities than the Aura framework, and, in consequence, is much more lightweight.
• A front-end developer coming from a different technology will get up to speed very quickly, as the new syntax and component structure is much more standard than the Aura one. Also development will be quicker.
• You will be able to work with great features as the new @wire service, that will allow you to to read data from the wire adapters defined in the UI Api namespace.
• You will be able to run offline unit tests with jest and the Lightning Testing Service.

Salesforce has rewritten all their base Aura Components, which under the hood are Lightning Web Components now. This has been possible because Lightning Web Components can be used within Aura Components. So, any base Aura Component that you use (eg: lightning:card), will be now just an Aura wrapper that contains a Web Component behind the scenes, something like:

<!-- lightning:card .cmp file -->
<aura:component>
   <c:lwcLightningCard name="Lightning Card" />
</aura:component>

This means, that you can do the same with your custom components. However, using an Aura Component within a Lightning Web Component is not possible and won’t be in the future.

From a point and click perspective, there is no difference between an Aura Component or a Lightning Web Components. An admin that builds pages in Lightning App Builder will see the same as before, just reusable components, no matter with which technology they have been implemented.

Finally, I want to mention that this is a proven framework, which has been piloting for months, and the LWC framework capabilities are almost the same than those from the Aura framework. This is, if something was available for Aura components (eg: being able to build a recordId aware Aura Component), normally it will be available in Lightning Web Components too.

There are some exceptions, as using Lightning Web Components in Lightning Out and thus Visualforce, however you can workaround this embedding a Lightning Web Component in an Aura Component and then use Lightning Out. In addition, Salesforce plan to release these capabilities soon (safe harbor).