Essentials to Know to Get Started with Lightning Web Components

Lightning Web Components was born to succeed Aura/Lightning components.

Launched by Salesforce in Feb’19, Lightning Web Components is an open source framework built on latest web standards. It also uses custom elements, templates, decorators, modules, and all others available in ECMAScript 6 and beyond.

Lightning Web Components (uppercase) or LWC is the programming model used to create Lightning web components. Lightning web components (lowercase) are custom HTML elements built using HTML and modern JavaScript with LWC.

Use of modern language and standards (HTML, JavaScript, and CSS) makes LWC very easy to learn. If you were used to web development like me, this should be a snap.

Let’s see some essentials to know to get ready for Lightning Web Components development.

First thing to know is that will need to use the latest versions of JavaScript

You can use any JavaScript feature that are browser-supported.

If you are new to JavaScript or want some refresher, complete the Modern JavaScript Development Trailhead module.

For a complete Lightning Web Components learning journey, check out this list of Trailhead LWC modules.

You can’t develop Lightning web components in the Developer Console

Salesforce recommands Salesforce DX tools but you can use any other code editor, then deploy your code in your org.

Check out this Lightning Web Component Local Development Setup# and Installation to develop locally a Lightning Web Components app.

To create a Lightning Web Components project, use the open-source create-lwc-app tool.

Pay attention to Name rules

Now that you’ve set up your tools to create your first Lightning web component. The first thing you will do is name your component’s folder and files.

Remember to always use the JavaScript Naming Conventions:

Names must be written as camelCase : this means that Lightning web component name should always start with a lower case letter. And the first letter of each following word in upper case
Hyphens are not allowed : underscore is only special character allowed
Whitespace are not allowed : use underscore if you want to add a separator
Can not end with underscore and can not contain 2 consecutive underscores in the name
And especially, the name must be unique in the namespace

And you know what? These rules also apply to your Custom Event name 🙂 Your best bet is to always use the same naming convention for all of your code.

Define Component metadata in {component}.js-meta.xml file

Specify if you want to use the component in Lightning App Builder and in managed packages.
Define in what types of Lightning pages your component can be exposed on. Here you can also configure your component’s properties, give your component a title and also a short description.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>My First Lightning web component</masterLabel> <!-- The title of the component. -->
    <description>This is a component created to get started with LWC.</description>
                  <!-- A short description to help you and others know what the component is. -->
    <targets>
        <target>lightning__RecordPage</target> <!-- Expose on Lightning Record Page -->
        <target>lightning__AppPage</target> <!-- Expose on Lightning App Page -->
        <target>lightning__HomePage</target> <!-- Expose on Lightning Home Page -->
        <target>lightningCommunity__Page</target> <!-- Expose on Lightning community page -->
        <target>lightningCommunity__Default</target> <!-- Used together with lightningCommunity__Page. Enables configurable properties -->
    </targets>
</LightningComponentBundle>

Pass data between components

To communicate up the component hierarchy (Child to Parent), use events. Using event, you can pass data from child to parent.

To communicate down the component hierarchy (Parent to Child ), pass properties to a child using HTML attributes. If both components are LWC, call child component public methods directly. You do not need to fire an event.

One framework, any platform

The Lightning Web Components framework doesn’t have dependencies on the Salesforce platform. If you have to display a view of your app in Salesforce and another view in any other application, you can use Lightning Web Components to build both sides of the application.

Use the same JavaScript framework whether you are building on Salesforce or any other platform.

LWC is an open source framework

Salesforce has announced the open sourcing of the Lightning Web Components framework since May’19. Feel free to explore the source code and contribute as well.

Have fun learning!