進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Discover Lightning Web Components

Lightning bolt icon used to indicate that the content is for Lightning Experience

Attention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This module is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

After completing this unit, you’ll be able to:
  • Explain the Lightning Web Components programming model.
  • List the benefits of using Lightning web components.
  • Find what you need to get started developing Lightning web components.

An Open Door to a More Adaptive Programming Model

It’s time to bring together your Salesforce knowledge and familiarity with standard technologies like HTML, JavaScript, and CSS to build the next generation of Salesforce apps. Use these common standards to build components for your Salesforce org while maintaining compatibility with existing Aura components.

The Lightning Web Components programming model is focused on both the developer and user experience. Because we’ve opened the door to existing technologies, you use the skill you’ve developed outside of Salesforce to build more performant Lightning web components. All of this is available to you without giving up what you’ve already accomplished with Aura components.

Note

Note

Did you notice a capitalization difference in that last paragraph? If so, you have a keen eye. We capitalize all the words when we refer to the Lightning Web Components model. We only capitalize the first word when we refer to the components, themselves, as Lightning web components.

Also, the Lightning Components model you’ve been using is now called the Aura Components model and creates Aura components.

Important steps to take before you go further in this module

  1. You should have a basic understanding of Salesforce DX projects and Salesforce CLI. You’ll also need to use a properly configured org in your Trailhead account. You can learn about all of this by completing Quick Start: Lightning Web Components.

    You also need to enable Dev Hub from the Setup menu in your org.

  2. Get a GitHub account.

Why Are We Introducing the Lightning Web Component Model?

Modern browsers are based on web standards, and evolving standards are constantly improving what browsers can present to a user. We want you to be able to take advantage of that.

As part of this effort, the World Wide Web Consortium (W3C) evolved a new standard for web components. We’re aligning our components to that new standard—Lightning Web Components are an implementation of the W3C web components standard. As web component standards mature, our model will seek alignment with those standards to provide both backward compatibility and progressive enhancements. Our components use more native browser features so they’re incredibly fast and portable. And your HTML and JavaScript skills transfer directly into component development.

You’ll find it easier to:

  • Find solutions in common places on the web.
  • Find developers with necessary skills and experience.
  • Use other developers’ experiences (even on other platforms).
  • Develop faster.
  • Utilize full encapsulation so components are more versatile.

And it’s not like web components are new. In fact, browsers have been creating these for years. Examples include <select>, <video>, <input> and any tag that serves as more than a container. These elements are actually the equivalent of web components. Our goal is to bring that level of integration to our model.

Simple Component Creation

The beauty of adhering to web standards is simplicity. You don’t need to ramp up on quirks of a particular framework. You simply create components using HTML, JavaScript, and CSS. Lightning web component creation is one, two, three steps. I’m not kidding. It’s really that simple. You create (1) a JavaScript file, (2) an HTML file, and optionally (3) a CSS file.

  • HTML provides the structure for your component.
  • JavaScript defines the core business logic and event handling.
  • CSS provides the look, feel, and animation for your component.

Those are the essential pieces of your component.

Here’s a very simple Lightning web component that displays “Hello World” in an input field.

HTML

<template>
    <input value={message}></input>
</template>

The template tag is a fundamental building block of a component’s HTML. It allows you to store pieces of HTML.

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

We get into the import statement and class declaration details later, too.

CSS

input {
   color: blue;
}

At minimum, all you really need is an HTML file and a JavaScript file with the same name in the same folder (also with a matching name). You deploy those to an org with some metadata and you’re good to go. Salesforce compiles your files and takes care of the boilerplate component construction for you automatically.

Lightning Web Components Playground

Let’s head over to the playground. We’ve created a space where you can try out your components, tinker with them, and see instant results.

  1. Go to https://developer.salesforce.com/docs/component-library/tools/playground

    When you first get there, you see an example you can explore. It includes styles from the Lightning Design System CSS framework. These styles provide a look and feel consistent with Lightning Experience. It also contains some standard Lightning web components, such as lightning-combobox. Notice it has an additional main.js file, just for the purposes of displaying the component in the playground.

  2. For now, we want to test just the very basics. In the playground, click New.
  3. Copy the above HTML, JavaScript, and CSS examples into the corresponding app files in the playground.
  4. Click Run.

    Congratulations! You’ve created a component.

  5. Click Save to generate a unique URL for your playground project.

    Keep track of the URL for your playground component in case you want to go back to it. The playground doesn’t manage your examples for you, but each time you save your project it generates a unique URL.

If you go back to the initial playground page, you’ll see the default example again, and you can start a new project.

Lightning Web Components and Aura Components Do Work Together

Wondering if you can keep your existing Aura components? Yes you can! You can use Lightning web components without giving up your existing components. You’ll likely migrate your existing components to the Lightning Web Component model eventually, but we’re introducing Lightning web components without taking anything away from the existing support of the Aura components. Aura components and Lightning web components live well together.

In fact, Aura components can contain Lightning web components (though not vice-versa). But a pure Lightning web components implementation provides full encapsulation and evolving adherence to common standards.

Cool Stuff You Can Use

To develop Lightning web components efficiently, use the following tools and environments.

Dev Hub and Scratch Orgs
Scratch orgs are disposable Salesforce orgs to support development and testing. Dev Hub is a feature that manages your scratch orgs. Both are part of the Salesforce DX tool set. Salesforce DX is an integrated set of development tools built and supported by Salesforce.
Salesforce Command Line Interface (CLI)
The Salesforce CLI provides a quick way to run operations for creating and configuring scratch orgs, and also for deploying components. This is also part of the Salesforce DX tool set.
Lightning Component Library
The reference for both Aura and Lightning web components and how to use them is found at https://developer.salesforce.com/docs/component-library/overview/components.

You can view the library through your org’s instance, too, at http://<instance>.lightning.force.com/docs/component-library. By viewing the library through your instance, you see only the correct version for your org. And, as you create your own custom components, they appear in the library too.

GitHub
We share extensions, samples, and more through GitHub repos. Get a GitHub account to make sure you can take advantage of these offerings.
Visual Studio Code Extension
We’ve focused on Visual Studio as a development tool, providing an integrated environment for you to build your components. The Salesforce extension to Visual Studio provides code-hinting, lint warnings, and built-in commands: https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-lwc.
Lightning Web Components Recipes
We provide a GitHub repo to help you see how Lightning web components work. You can clone, tinker, and publish this mix of samples to your own scratch org and see them in action. Get it at https://github.com/trailheadapps/lwc-recipes.
E-Bikes Demo
This GitHub repo is another great way to see how Lightning web components work. The e-bikes demo is an end-to-end implementation of Lightning web components to create an app. Try this example in your own scratch org. Get it at https://github.com/trailheadapps/ebikes-lwc.
Lightning Data Service (LDS)
Access data and metadata from Salesforce via Lightning Data Service. Base Lightning components that work with data are built on LDS. Customize your own components to take advantage of LDS caching, change-tracking, performance, and more.
Lightning Locker
Lightning web components that belong to one namespace are secure from components in a different namespace through Security with Lightning Locker. Lightning Locker also promotes best practices that improve the supportability of your code by only allowing access to supported APIs and eliminating access to nonpublished framework internals.

A Look Ahead

Welcome to the world of Lightning web components

We’ll keep using the Lightning Web Components Playground for another unit until you’re ready to deploy files to a scratch org. Using the playground, we’ll see what you can do with the HTML and JavaScript files.

retargeting