Learn ECMAScript 2016 Before Creating Lightning Web Components

Lightning Web Components is very simple for Node JS and React Developers. However, it become complex for Salesforce developer who know only basic of JavaScript. Lightning Web Component creating by extending LightningElement class of lwc module. I will suggest you to learn ECMAScript 2015. By reading this blog and i sure after reading this blog you will became a LWC developer. To learn new technology learn fundamental of technology.

Here I will explain about ES5 and ES6 basic usage in Lightning Web Components

  1. named import
  2. default import
  3. default export
  4. named export
  5. Web Component
  6. module?
  7. class
  8. promise

 

Very BadBadAverageGoodExcellence (No Ratings Yet)
Loading...

Create Your First Lightning Web Component

Folder structure and naming convention of Lightning Web Components. 

  1. Component folder name must start with lowercase letter and it files.
  2. Folder Files name must be same as folder name.
  3. Component name must be unique in namespace.
  4. Component folder and it files must not include white space.
  5. If your component name have two word then capitalize other second word.
1
2
3
4
5
6
helloWorld
   ├──helloWorld.html
   ├──helloWorld.js
   ├──helloWorld.js-meta.xml
   ├──helloWorld.css
   └──helloWorld.svg

A Lightning Web Component must have one HTML(compponentName.html) file and two JavaScript Files(compponentName.js and compponentName.js-meta.xml).

Before creating Lightning Web Component you have to setup Salesforce CLI and Visual Studio Code IDE on you machine.

Follow Steps to install Salesforce CLI and VS Code:-

  1. Install the Salesforce CLI with npm
    • First install nodejs and run following command
      npm install sfdx-cli --global
  2. Java must be installed on your local machine for Visual Studio Code.
  3. Install Visual Studio Code and extensions for Salesforce DX.
  4. After installing VS Code open VS Code and install extensions inside VS Code see following screenshot. Installing Salesforce Extension Packinstall Salesforce Extension Pack in VS Code

Now ensure your development environment is ready on your local machine.

  • In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
  • Enter sfdx to filter for commands provided by the Salesforce Extensions.SFDX Commmand in VS Code

If Salesforce Extension Pack Installed inside VS Code, then you are able to create Lightning Web Components.

Lets Create your first helloWorld Lightning Web Compponent(LWC).

  • In VS Code to Open the Command Palette press Ctrl+Shift+P.
  • In Command Palette type for sfdx: authorize an ORG. 
  • Click on highlighted text it will open ORG type selection screen.
  • After Org Type Selection next screen for org name enter any your ORG name without white space and press enter key.
  • This will redirect to Salesforce login page.
  • After login in your Slaesforce org you can create LWC or classes.

Let’s create first your Lightning Web Component.
helloLWC.js

import { LightningElement } from 'lwc';
export default class HelloLWC extends LightningElement {
    helloWord='Hello, LWC!'
}

helloLWC.html

<template>
    <!-- Create Lightning Card-->
    <lightning-card title="Hello LWC">
        <div class="slds-p-around_small">
            <!-- Use javascript property -->
            {helloWord}
        </div>
    </lightning-card>
</template>

helloLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="HelloLWC">
    <apiVersion>45.0</apiVersion>
    <!--Set isExposed true to expose your comonent in salesforce lightning experience-->
    <isExposed>true</isExposed>

    <masterLabel>Hello LWC</masterLabel>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>
Very BadBadAverageGoodExcellence (No Ratings Yet)
Loading...

Supported and Unsupported Feature of Lightning Web Components

Lightning Web Components supports only to Lightning experiences and tools. It will not support in Salesforce Lightning Out so you can not use your Lightning Web components in Visualforce page directly like you are using Aura Component Lightning Out. But you can include Lightning Web Components in Aura Component then unsupported feature will support.

For example 

Create a Lightning Web Component named helloWorld, also create a Aura Component named TestComp.cmp. Now helloWorld Lightning Web Component use in side Aura Component.

Supported Experiences of Lightning Web Components

These Salesforce experiences and tools are supported.

  • Lightning Experience
  • Salesforce App
  • Lightning Communities
  • Lightning App Builder
  • Community Builder
  • First-Generation Managed Packages
  • Second-Generation Managed Packages
  • Unlocked Packages
  • Unmanaged Packages
  • Change Sets
  • Metadata API—LightningComponentBundle
  • Tooling API—LightningComponentBundle, LightningComponentResource

Unsupported Experiences and Tools

Lightning Web Components doesn’t currently support these Salesforce experiences and tools. To use a Lightning web component with these experiences and tools, wrap the component in an Aura component.

  • Lightning Out
  • Lightning Components for Visualforce
  • Standalone Apps
  • Salesforce Console (Navigation Item API, Workspace API, UtilityBar API)
  • Utility Bars
  • URL Addressable Tabs
  • Flows
  • Snap-ins Chat
  • Lightning for Gmail, Outlook Integration
  • EMP API, Conversation Toolkit API, Omni Toolkit API, Quick Action API
  • Standard Action Overrides, Custom Actions, Global Actions, List View Actions, Related List View Actions
  • Chatter Extensions

Reference Salesforce Document

Very BadBadAverageGoodExcellence (No Ratings Yet)
Loading...

Lightning Web Component

An Introduction to Lightning Web Component

Salesforce now provide two programming models to create component one is Aura Component and new framework is that Lightning Web Component(LWC). You can create Lightning Web Component(LWC) using custom HTML and modern  Javascript (ES6).

Lightning Web Components is lightweight and delivers exceptional performance because most of the code you write is standard JavaScript and HTML.  Before start learning Lightning Web Component we suggest to learn JavaScript Modular Programming, click on following link to start modular programming. http://exploringjs.com/es6/ch_modules.html

Huge benefit of Lightning Web Component programming model is that you write Standard JavaScript code. To develop Lightning web components, use the latest versions of JavaScript.

Lightning Web Component

Lightning Web Components JavaScript support includes:

  • ES6 (ECMAScript 2015)
  • ES7 (ECMAScript 2016)
  • ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
  • ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)
Very BadBadAverageGoodExcellence (No Ratings Yet)
Loading...