Apex Lightning – Lightning Base Components vs Developing Lightning Web Components

apexlightning-web-components

I am looking at the lightning design system component blueprint documentation and reviewing the various ways we can use the Lightning Combobox.

For example, in the documentation, they go over Grouped Comboboxes (Cross-entity / Polymorphic) examples that leverage the combobox. The example code that they provide does not leverage the base lightning component combobox.

With the base component, can we develop the same functionality that that they provide in the docs? If not, when should we develop on our own vs leveraging the base components

Base Component

      <lightning-combobox
                name="status"
                label="Status"
                placeholder="Choose Status"
                value={value}
                onchange={handleChange}
                options={statusOptions}
            >

Component Blueprint From Documentation

<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-id-24">Relate To</label>
<div class="slds-form-element__control">
<div class="slds-combobox-group">
<div class="slds-combobox_object-switcher slds-combobox-addon_start">
<div class="slds-form-element">
<label class="slds-form-element__label slds-assistive-text" for="combobox-id-25" id="combobox-label-id-138">Filter Search by:</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" aria-controls="primary-combobox-id-1">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<button type="button" class="slds-input_faux slds-combobox__input slds-combobox__input-value" aria-labelledby="combobox-label-id-138 combobox-id-25-selected-value" id="combobox-id-25-selected-value" aria-controls="objectswitcher-listbox-id-01"
aria-expanded="false" aria-haspopup="listbox">
<span class="slds-truncate" id="combobox-value-id-111">Accounts</span>
</button>
<span class="slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_xx-small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
</span>
</div>
<div id="objectswitcher-listbox-id-01" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_x-small slds-dropdown_left" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="group" aria-label="Suggested for you">
<li role="presentation" class="slds-listbox__item">
<div id="object0" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="presentation">
<h3 class="slds-listbox__option-header" role="presentation">Suggested for you</h3>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div aria-checked="true" id="object1" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-is-selected" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-utility-check slds-current-color">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-truncate" title="Accounts">Accounts</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object2" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Reports">Reports</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object3" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Contacts">Contacts</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object4" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Files">Files</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object5" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Groups">Groups</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object6" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Leads">Leads</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="object7" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Notes">Notes</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slds-combobox_container slds-combobox-addon_end">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click" id="primary-combobox-id-1">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="slds-input slds-combobox__input" id="combobox-id-24" aria-autocomplete="list" aria-controls="listbox-id-20" aria-expanded="false" aria-haspopup="listbox" autoComplete="off" role="combobox" placeholder="Search..." />
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
<svg class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
</svg>
</span>
</div>
<div id="listbox-id-20" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-listbox__item">
<div id="option1" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Burlington Textiles Corp of America</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Burlington, NC</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option2" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Dickenson plc</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Lawrence, KS</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option3" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Edge Communications</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Austin, TX</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option4" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure slds-listbox__option-icon">
<span class="slds-icon_container slds-icon-standard-account">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
</svg>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">Express Logistics and Transport</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Portland, OR</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Best Answer

The blueprints are used for porting the Lightning Design System to other platforms, such as React, Vue, Svelte, etc. They don't include any JavaScript because those might not be compatible with the framework in question. You can also check out lwc-recipes and lightning-base-components. If you can't find something in these two repos, odds are, you'll have to write your own component. Most of them are not too bad, but it's more complicated than just copy-paste.

Standards

LWC is compliant with most ES2015 (aka ES6) and later standards that have seen good adoption across modern browsers. JavaScript APIs such as Class, Module, Shadow DOM, CustomComponent, decorators, mix-ins, and many more figure heavily into the architecture, as do modern HTML and CSS features. This brings a great deal of benefit for the developer. First, the main body of knowledge and skill required is modern JavaScript. It also brings a much simplified component bundle structure and developer experience where a given component is comprised solely of an HTML template, a JavaScript module, and a CSS file (where required).

Here's a screen shot of the component bundle (no CSS) in a project in VisualStudio Code.

Here's an example of the code from a Lightning web component:

HTML Template:

<template>

    <lightning-card title="RecordEditFormDynamicContact" icon-name="standard:contact">

        <div class="slds-m-around_medium">

            <lightning-record-edit-form
                object-api-name="objectApiName"
                record-id="recordId">
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Title"></lightning-input-field>
                <lightning-input-field field-name="Phone"></lightning-input-field>
                <lightning-input-field field-name="Email"></lightning-input-field>
                <div class="slds-m-top_medium">
                    <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
                </div>
            </lightning-record-edit-form>

        </div>

    </lightning-card>

</template>

JS Module:

import { LightningElement, api } from 'lwc';

export default class RecordEditFormDynamicContact extends LightningElement {
  @api recordId;
  @api objectApiName;
}

While this is a very simple component that simply surfaces two attributes (the @api decorated properties), you can already see how the JS code reflects modern standards in the import statement for including other JS modules, the export of the class of this module, the use of the class and extends syntax, and the use of JavaScript decorators.

Interoperability

In designing a new programming model for the Lightning Component framework, interoperability with existing Aura-based components is a must. With the GA of LWC, any component built using the LWC programming model can be used in an existing Lightning Component page. To prove this model, Salesforce have used LWC to build Lightning base components for the last year. Any of your existing Lightning Web Components that use a lightning:xxx base component is already using LWC.

Performance

Salesforce has yet to publish any benchmarks or performance data related to Lightning Web Components. But look for upcoming blog posts from the LWC engineering team.

Anecdotally, as more and more of the Lightning Experience UI has become composed of LWC over the past year, many customers have reflected back to Salesforce an experience of better performance.

Learn More

For more details about LWC, please see the introductory blog post on the Salesforce developer blog which has many links to documentation, sample code and applications, and of course, Trailhead.

Aagh! I don't want to read a whole blog, I just want to do something!

No problem. Just go to this quick start project on Trailhead and get the badge.

Developer Console – Lightning Web Components Development Guide

https://developer.salesforce.com/blogs/2018/12/developer-tools-for-lightning-web-components.html

Developer Tools for Lightning Web Components

In case you missed it, we recently announced a new programming model for Lightning component development, called Lightning Web Components. If you need to catch up, you should check out Christophe Coenraets’ introductory post for an overview of what’s at the heart of this new model and how it can benefit your apps. This new way of building in Lightning will be generally available with the Spring ’19 release.

Lightning Web Components development introduces new tooling standards and conventions into the world of Salesforce development. Along with a new programming model, the Spring ’19 release also brings more resources for developers working in Lightning. In this post, we’re going to look more closely at the available tools and resources and step through a few essentials for getting up and running with Lightning Web Components development.

Tools you’ll need to get started

To develop Lightning web components, you’ll need to install the Salesforce CLI. From there, you’ll want to make sure you’re running the right release of the salesforcedx plugin—which enables interaction with Salesforce orgs, among many other things. If you’re reading this prior to February 9th, 2019, after you install the CLI, you’ll need to upgrade to the pre-release version of the salesforcedx plugin by runnning sfdx plugins:install salesforcedx@pre-release. After February 9th, just make sure you’re using sfdx plugins:install salesforcdx@latest to get the current release. (Note: You may find that you need to uninstall the plugin before you can upgrade your version.)

You can find detailed update instructions here.

You’ll also want to look at setting up an integrated development environment (IDE). We highly recommend Visual Studio Code and the Salesforce Lightning Web Components Extension for VS Code. This combination provides powerful connections to the Salesforce CLI from within VS Code, plus additional features specific to developing Lightning web components for Salesforce. (More on the Salesforce Lightning Web Components Extension below.)

If you’re using VS Code, we also recommend installing the Salesforce Extension Pack, which bundles together a ton of useful features for Salesforce development projects. If you’re new to VS Code, you should check out our recent webinar about getting up and running with VS Code and the Salesforce Extensions.

There are also great IDEs available from Salesforce partners that support Lightning web components development, like Illuminated Cloud.

You’ll have the best development experience if you combine the Salesforce CLI with one of the IDEs that supports Lightning web component tooling.

Tools included in the Salesforce Lightning Web Components extension

Currently the Lightning Web Components Extension is not bundled with the Salesforce Extension Pack, so you’ll want to make sure to download the extension if you plan to use VS Code to develop Lightning web components.

With the Salesforce-provided extension, you get some additional tools to help optimize your developer experience with web components. This includes:

ESLint – An open-source utility that performs static analysis of JavaScript code to identify common issues with styling, patterns, etc. Also known as ‘linting’. @salesforce/eslint-plugin-lwc – Enforces Salesforce-specific linting rules, which are also enforced by the platform on deployment of Lightning component bundles. We’ll have more on the options for customizing the behavior of your linting tools in a future post. Language Services for Lightning Web Components – Provides autocompletion/intellisense for Lightning Web Components, warnings in the ‘Problems’ tab for invalid syntax, as well as invalid syntax highlighting in HTML/JS files as you work. Code snippets for JavaScript – Pre-defined code snippets to make writing Lightning web components with JavaScript easier. Start typing ‘lwc-‘ within a Lightning web component JavaScript file to see the list of available snippets.

What about using the developer console with Lightning Web Components?

You can only develop Lightning web components using the Salesforce CLI and an IDE (or text editor). The developer console is a convenient tool that’s used daily by many Salesforce developers. You can still use it to access Apex classes, Visualforce pages and Aura bundles; however, it’s not a full-blown IDE. Also, in its current form, the developer console can’t provide integrated support for much of the tooling that ships with the Lightning Web Components Salesforce Extension, like ESLint.

You’ll get the best developer experience using more robust tools like VS Code and the Salesforce Extensions, or Illuminated Cloud. Your users will also benefit because these tools can help you identify and avoid common issues in your code as you write, and before you even try to deploy to development environments.

What about using the Force.com IDE to develop Lightning Web Components?

In case you missed it, we recently announced that we’re ending support of the Force.com IDE on October 12, 2019. For some time, updates to the Force.com IDE have been limited to critical security fixes, not new functionality like support for Lightning web components development.

Along with the end-of-life announcement, we explained the reasons why we’ve shifted to a different model for developer tooling, including: commitment to building in the open, letting the developers who use our tooling participate in defining features and driving priority, and building consistent developer experiences across our tools, and using the best of modern tooling.

If you haven’t yet migrated to using the Salesforce CLI and another IDE, now is the time to install the CLI and explore one of the IDEs mentioned above.

Where can I use and deploy Lightning Web Components? Do I have to develop in scratch orgs?

You can use Lightning web components in any Salesforce org. In fact, behind the scenes, you’ve been using Lightning web components in Lightning Experience for some time. You can develop and deploy your own Lightning web components to any org that has been upgraded to the Spring ’19 release. Lightning web components are compatible with managed packages, unlocked packages, change sets, and Metadata API deployments.

You can use any kind of non-production environment to develop Lightning web components. But you’d never try to develop in production anyway, right? 😉

Developing in a scratch org means you can test out your ideas and code quickly, since scratch orgs are built to be quickly created, used during the most iterative part of the development cycle, and are short-lived. But you can also develop Lightning web components in sandboxes and Developer Edition environments.

Lightning Component Library, Playground and Locker Service resources

The Lightning Component Library is a one-stop resource for documentation, developer guides and interactive, lightweight code snippet development tools. You can access the Library two ways: as a part of the resources available on the Salesforce Developers website, and through a relative URL from within a Salesforce org, available once you’ve logged in. Appending /docs/component-library/documentation to the org’s base URL will take you to the library.

The Developer Guide has in-depth documentation about Lightning web component syntax and design patterns, as well as information about compatibility with Aura, using Lighting web components with Aura components, and resources for migrating components built in Aura to Lightning web component syntax.

In a Spring ’19 version of the Library, you’ll also notice some brand new tools including the Playground. The Playground provides a fast, lightweight way to generate code snippets and experiment with Lightning web component composition.

You can also save and share snippets created in the Playground. Keep in mind these snippets are just that—pieces of code. The Playground is not the place to build fully functional component bundles for deploying into an org. (You’ll use the Salesforce CLI and tools listed above to develop in a Salesforce org.)

From the Lightning Component Library, you can also access tools to help you evaluate performance and compatibility with Locker Service: the Locker API Viewer and the Locker Console. The Locker API Viewer shows standard DOM APIs and the counterparts available from Locker Service. The Locker Console provides a lightweight debugger to evaluate code performance and API compatibility with various Locker security contexts.

If you’re using the relative URL to access the Lightning Component Library, you can also see custom components in an org (both Aura and Lightning web components) as a part of the ‘Component Reference’ tab. If you’ve written documentation for your Aura component bundles, it will appear here. In Spring ’19, custom documentation is limited to Aura components.

What other useful tips should I know about?

If you’re using VS Code, you should definitely explore the various user settings that let you customize the look, feel and behavior of your IDE. You can do an enormous amount of customization with these settings.

I’ve benefitted from customizing how my code editor behaves. When working with JavaScript files, I found myself getting unexpected and unhelpful autocompletions when I typed semicolons or periods. So I’ve customized how my editor accepts autocomplete suggestions. I also needed to make sure that I’d reenabled parameter hints (which should be on by default) to allow Lightning web component specific information to appear on hover over while working in VS Code.

You can also enable project-specific configurations for the Salesforce CLI, like retrieving test code coverage when you issue test run commands or controlling how notifications about CLI command results display. The documentation for the Salesforce CLI Integration (which is included as a part of the Salesforce Extensions) outlines quite a few helpful settings. See the ‘Edit Your Workspace Settings’ section.

As you develop Lightning web components, you’ll also want to explore the developer tools built into your browser. In a future post, we’ll go more in-depth about getting the most out of those tools.

Conclusion

The introduction of Lightning web components also brings Salesforce developers a wealth of new tools and resources. Whether it’s building and sharing snippets in the Playground, tailoring VS Code and the Salesforce Extensions to your preferences, or exploring the many resources in the Lightning Components Library, you should definitely take some time to explore the many tools available.

Go forth, have fun, and build modern apps.