Lightning Web Components (New Programming model for building Lightning Components)

Salesforce has recently introduced a new developmental model for building Lightning Components called Lightning Web Components which can coexist and interoperate with the original Aura Programming model, and deliver unparalleled performance!

In this blog post, we are going to build a basic Lightning Web Component using VS Code IDE with Salesforce CLI prerelease sfdx plugin.

Prior to that for this demo I have already signed up for a free 'Spring '19 - Pre-Release' org and upgraded my SFDX plugin to pre-release version by running below command in my Terminal (This step is required only until February 9th, 2019).

"sfdx plugins:install salesforcedx@pre-release"

Next we need to add the "Lightning Web Components" extension for VS Code.

In my VS code IDE, once I create my project and authorize my pre-release org now I should see a new folder called 'lwc' created under force-app-->main-->default folder!

Now go ahead and create a new Lightning Web Component (FirstLightningWebComp) by right clicking on 'lwc' folder or by using cmd + shift + p

The Lightning Web Component bundle that I have created above (FirstLightningWebComp) has 3 files as below.....

FirstLightningWebComp.html

FirstLightningWebComp.js

FirstLightningWebComp.js-meta.xml

FirstLightningWebComp.html

<template>
<lightning-card title="HelloWorld" icon-name="custom:custom14">
    <div class="slds-m-around_medium">
        <lightning-helptext
                content="Please enter US address!">
        </lightning-helptext>
        <lightning-input-address
            address-label="Address"
            street-label="Street"
            city-label="City"
            country-label="Country"
            province-label="Province/State"
            postal-code-label="PostalCode"
            street="1 Market St."
            city="San Francisco"
            country="US"
            country-options={countryOptions}
            province-options={provinceOptions}
            postal-code="94105"
            required>
        </lightning-input-address>
    </div>

    <div>
        <lightning-map
            map-markers={mapMarkers}>
        </lightning-map>
    </div>
    <div class="slds-m-around_medium">
        <p>New Div</p>
        <lightning-carousel>
                <lightning-carousel-image
                    src = "/resource/1545163583000/Cody"
                    header = "First card"
                    description = "First card description"
                    alternative-text = "This is a card">
                </lightning-carousel-image>
                <lightning-carousel-image
                    src = "/resource/1545163583000/Cody"
                    header = "Second card"
                    description = "Second card description"
                    alternative-text = "This is a card">
                </lightning-carousel-image>
                <lightning-carousel-image
                    src = "/resource/1545163583000/Cody"
                    header = "Third card"
                    description = "Third card description"
                    alternative-text = "This is a card">
                </lightning-carousel-image>
            </lightning-carousel>     
    </div>
</lightning-card>
</template>

Here in my .html file I have used three base components (lightning-input-address/lightning-map/lightning-carousel).

FirstLightningWebComp.js

import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track
    provinceOptions = [
        { label: 'California', value: 'CA' },
        { label: 'Texas', value: 'TX' },
        { label: 'Washington', value: 'WA' },
    ];

    countryOptions = [
        { label: 'United States', value: 'US' },
        { label: 'Japan', value: 'JP' },
        { label: 'China', value: 'CN' },
    ];
    mapMarkers = [
        {
            location: {
                // Location Information
                City: 'San Francisco',
                Country: 'USA',
                PostalCode: '94105',
                State: 'CA',
                Street: '50 Fremont St',
            },
    
            // Extra info for tile in sidebar & infoWindow
            icon: 'standard:account',
            title: 'Julies Kitchen', // e.g. Account.Name
            description: 'This is a long description'
        },
        {
            location: {
                // Location Information
                City: 'San Francisco',
                Country: 'USA',
                PostalCode: '94105',
                State: 'CA',
                Street: '30 Fremont St.',
            },
    
            // Extra info for tile in sidebar
            icon: 'standard:account',
            title: 'Tender Greens', // e.g. Account.Name
        }
    ]
}

Here this .js file works as a controller to handle .html file related events.

FirstLightningWebComp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Finally I go ahead and "Deploy Source to Org" and pull my new Lightning Web Component on my Home page to display results.

Once I have the Lightning Web Component on the Home page, below is how it looks.

Lightning Web Components Resource Links:

Blog by Zayne Turner - Developer Tools for Lightning Web Components

Blog by Christophe Coenraets - Lightning Web Components Recipes, Patterns and Best Practices

Trailhead Module: Quick Start: Lightning Web Components

Lightning Web Components Dev Guide

Thank you!