Quick Start: Lightning Web Components

Lightning WebComponent

Introducing of Lightning Web Component

Now, you can build Lightning Components using two programming models:

  1. Lightning Web Components (use core Web Components standards)
  2. Aura Components

What is Lightning Web Component or LWC?

A lightning web component that includes an HTML file, a JavaScript file, and a metadata configuration file. Lighting Web Components are custom HTML elements built using HTML and modern JavaScript. The files must use the same name so the framework can auto-wire them.

helloWorldHtmlJsMetaXML
helloWorldHtmlJsMetaXML

Power of LWC:

  • HTML Templates

The power of Lightning Web Components is using template tag. Content inside a template tag will not be rendered. The content can be visible and rendered later by using Javascript.

  • CSS

In Lightning web Components, you can use Lightning Design System or Custom Css.

  • JavaScript

In Lightning Web Components, JavaScript files are in ES6 modules.

  • Composition

You can add components to Aura Component, Aura App and Lightning Web Component.

  • Access Static Resources, Labels, Internationalization Properties, and User IDs
  • Component Lifecycle

Why Lightning Web Componets(LWC)?

  • In 2014, Web Standards had limited functionality. So, various framework came to fulfil the gap like ReactJs, CommonJs etc.
  • Aura framework was also part of that initiative where they push web standards to build enterprise applications.
  • Fast Forward to today and much has changed.
    • Web Standards had a rich set of functionality, supported by Native Browsers.
    • Templating, CustomElements, ShadowDom, classes to name few.
  • So, why Salesforce turns to modern JavaScript and introducing Lightning Web Components.
  • Lightning Web Components takes the best of modern JavaScript and provides only what’s necessary to perform well in browsers supported by Salesforce.

Let’s see how to Create Lightning Web Component

Step 1) Setup Salesforce Dx in VSCode

  1. Install Salesforce CLI.
  2. Download and install VSCode.
  3. Install required Extension.
    1. Salesforce Extension Pack.
SalesforceExtensionPack
  1. Lightning Web Components.
LightningWebComponent
  1. Salesforce CLI Integration.
SalesforceCLIIntergration

Step 2) Upgrade to Pre-release Org

  1. Sign up for Pre-release Developer edition at https://www.salesforce.com/form/signup/prerelease-spring19/.
  2. Upgrade Pre-release version of Salesforce CLI

sfdx plugins:install salesforcedx@pre-release

saleforce plugins install
  1. Enable the domain in your developer org.
DeployOrg

Step 3) Create SalesforceDX Project

  1. Open VSCode. Press “CTRL+SHIFT+P” and then enter “SFDX:Create Project with Manifest”. Then enter a project name and select folder.
CreateProjectWithManifest
LWCRecepiesProjName
  • Authorize an Org

Press “CTRL+SHIFT+P” and then enter “SFDX:Authorize an Org”.

sfdx authroize an org
AuthroizeOrgName

Step 4) Finally, Create your first Lightning Web Component.

  1. Press “CTRL+SHIFT+P” and then enter “SFDX: Create Lightning Web Component”.
SfdxCreateLightingWebComponent
  1. Then Select “lwc” folder.
selectLWCFolder
  1. Then enter your Lightning Web Component Name. Please use camelCase for Lightning Web Components.It’s the best practice.
createHelloWorldComponent
  1. Let’s see your Lightning Web Component under “lwc” folder.
helloWorldHtmlJsMetaXML

Step 5) Now, Lightning Web Component created. Let’s see how to use Lightning Web Component.

  • Put this code into helloWorld.html

  • Put this code into helloWorld.js

  • Put this into helloWorld.js-meta.xml

Step 6) Finally, deploy your component into Developer Org.

DeploySourceToOrg

Step 7) Go to your Developer Org.

  • Click App Launcher Icon and then Select Sales App.
selectSalesApp
  • Then Click at Setup Icon and select edit page.
clickSetupEditPage
  • Then Drag “helloWorld” Component at pageLayout. After that, click at Activation and choose “OrgDefault”.Next, Activate.
DragComponentAtPageLayout

Note: Domain is enabled in your Org. Else Custom Component will not be visible in your Org.

Here is your first Lightning Web Component.

HelloWorldAtPageLayout

Related Blogs: 

How to interact one Lightning Web Component with Aura Component

How to create, update, delete and fetch records in Lightning Web Component

Resources:

Introducing Lightning Web Components: A new way to build Lightning Components with modern Javascript

Quick Start: Lightning Web Components

Salesforce Developer Guide: Introducing  Lightning Web Components

Salesforce Developer Guide: Create Lightning Web Components

Write a Response

Your email address will not be published.


Find Out How We Can Help

If you're ready to find out more about how SimplusLabs can help energize your workers, your customers, and your business with a different experience, let's talk.