Lightning Web Components (Generally Available)

Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end users, they both appear as Lightning components.

Where: This feature is available in Lightning Experience, Lightning Communities, and all versions of the mobile app in all editions. To create a Lightning web component, use Enterprise, Performance, Unlimited, and Developer editions.

Why: Lightning Web Components brings the latest advancements in JavaScript and web standards to the Lightning Component framework. Since we introduced the Lightning Component framework in 2014, the web stack has evolved into an application development platform. Many features that required frameworks are now standard. We developed the Lightning Web Components programming model to take advantage of this evolution. Salesforce engineers helped lead the way on TC39, which is the committee that defines ECMAScript (JavaScript).

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in all browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, the Lightning Web Components programming model is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

You can also use the components, tools, and services that make it easy to develop on the Lightning Platform: Base Lightning Components, Lightning Design System, Lightning App Builder, Community Builder, Lightning Data Service, and Lightning Locker.

This Lightning web component is a fully editable form built with six lines of JavaScript.An editable record form showing a contact.

Let’s look at some code. Each Lightning web component is made up of an HTML template and a JavaScript class. This component contains a base <lightning-record-form> component, which is built on Lightning Data Service. The component attributes are object-api-name, record-id, and fields.
<!-- recordFormDynamicContact.html -->

<template>

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

        <div class="slds-m-around_medium">
            <lightning-record-form object-api-name={objectApiName}
                                   record-id={recordId} 
                                   fields={fields}>
            </lightning-record-form>
        </div>

    </lightning-card>

</template>

The component’s JavaScript class declares the recordId, objectApiName, and fields properties, which are bound to the HTML template.

Properties decorated with @api are public and reactive. When their values change, the component rerenders with the new values. This component gets the values for its public properties from the Lightning record page that contains it. Cool!
// recordFormDynamicContact.js

import { LightningElement, api } from 'lwc';

export default class RecordFormDynamicContact extends LightningElement {

    @api recordId;
    @api objectApiName;
    fields = ['Name', 'Title', 'Phone', 'Email'];

}

How: Use the Salesforce CLI to synchronize Lightning Web Components source code between Salesforce and your favorite code editor. We recommend Visual Studio Code because the Salesforce Extension Pack includes Salesforce CLI commands, code completion, and linting, which make coding faster and more fluid.

You can also experiment in the Playground, our interactive code editor. Write JavaScript, HTML, and CSS code, and preview the output as you develop. Save playground apps and share them with other developers in your org.Code editor and output pane of the Playground.