34

Salesforce has just announced a new feature, Lightning Web Components. What is this? What does it have to do with Lightning Components and the Lightning Component Framework?

33

Lightning web components (LWC) are a new programming model for the Lightning Component Framework that is slated to be released in the Spring 19 release. This programming model was architected with three principles in mind.

  • Align with modern web standards
  • Interoperability with the original Aura-based Lightning component development model
  • Performance

Standards

LWC is compliant with most ES2015 (aka ES6) and later standards that have seen good adoption across modern browsers. JavaScript APIs such as Class, Module, Shadow DOM, CustomComponent, decorators, mix-ins, and many more figure heavily into the architecture, as do modern HTML and CSS features. This brings a great deal of benefit for the developer. First, the main body of knowledge and skill required is modern JavaScript. It also brings a much simplified component bundle structure and developer experience where a given component is comprised solely of an HTML template, a JavaScript module, and a CSS file (where required).

Here's a screen shot of the component bundle (no CSS) in a project in VisualStudio Code.

LWC bundle in VS Code

Here's an example of the code from a Lightning web component:

HTML Template:

<template>

    <lightning-card title="RecordEditFormDynamicContact" icon-name="standard:contact">

        <div class="slds-m-around_medium">

            <lightning-record-edit-form
                object-api-name="objectApiName"
                record-id="recordId">
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Title"></lightning-input-field>
                <lightning-input-field field-name="Phone"></lightning-input-field>
                <lightning-input-field field-name="Email"></lightning-input-field>
                <div class="slds-m-top_medium">
                    <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
                </div>
            </lightning-record-edit-form>

        </div>

    </lightning-card>

</template>

JS Module:

import { LightningElement, api } from 'lwc';

export default class RecordEditFormDynamicContact extends LightningElement {
  @api recordId;
  @api objectApiName;
} 

While this is a very simple component that simply surfaces two attributes (the @api decorated properties), you can already see how the JS code reflects modern standards in the import statement for including other JS modules, the export of the class of this module, the use of the class and extends syntax, and the use of JavaScript decorators.

Interoperability

In designing a new programming model for the Lightning Component framework, interoperability with existing Aura-based components is a must. With the GA of LWC, any component built using the LWC programming model can be used in an existing Lightning Component page. To prove this model, Salesforce have used LWC to build Lightning base components for the last year. Any of your existing Lightning Web Components that use a lightning:xxx base component is already using LWC.

Performance

Salesforce has yet to publish any benchmarks or performance data related to Lightning Web Components. But look for upcoming blog posts from the LWC engineering team.

Anecdotally, as more and more of the Lightning Experience UI has become composed of LWC over the past year, many customers have reflected back to Salesforce an experience of better performance.

Learn More

For more details about LWC, please see the introductory blog post on the Salesforce developer blog which has many links to documentation, sample code and applications, and of course, Trailhead.

Aagh! I don't want to read a whole blog, I just want to do something!

No problem. Just go to this quick start project on Trailhead and get the badge.

  • This looks so amazing, I wanna try it out. I have Spring 19 pre-release org , can I try it out there? – Pranay Jaiswal Dec 13 '18 at 14:50
  • 1
    Yes. The quick start is the best way to walk through. I'll add a direct link above for you or anyone who just wants to get on with doing something. – pchittum Dec 13 '18 at 15:03
  • Is there any way to view the LWCs in Developer Console? Or do we have to exclusively modify them in SFDX? – user62883 Dec 14 '18 at 11:38
  • 2
    @SCGB Support for LWC was not implemented in developer console. This would probably stand as its own question. Do you want to ask it? – pchittum Dec 14 '18 at 13:18
  • 1
    @TylerZika the Lightning Component framework now has two programming models: the new Lightning Web Components model, and the original Aura Components model. – bonehelmet Jan 22 at 21:27

protected by David Reed Mar 7 at 12:09

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.