Exploring Salesforce Lightning Web Components: Part 1

Through concrete examples, we explore the recently released Salesforce Lightning Components.

Image for post
Image for post

Assumptions

This article starts with assumption that the reader is both interested and has a rudimentary understanding of Salesforce development.

In addition, this article specifically builds upon the Salesforce Trailhead project Quick Start: Lightning Web Components. It is assumed that the reader has completed this project.

So Where Are The Web Components?

The Lightning Web Components literature indicates that it is built upon Web Components:

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

Salesforce — Introducing Lightning Web Components

At the same time, building a representative Lightning Web Component consists of creating a HTML and JavaScript file (and an optional CSS file) that do not resemble the structure of a Web Component.

In contrast, the following is the JavaScript code that defines a web component; example provided as part of the series Web Components by Example: Part 1.

Observations:

  • While not shown in this simplified Web Component example, Web Components have a HTML Template specification much like the Lightning Web Component (HTML)

Let us compare Web Components and Lightning Web Components as they are used. First we use the Web Component:

Image for post
Image for post

And inspect it; observe the custom HTML tag, hello-world.

Image for post
Image for post

Next we use the Lightning Web Component:

Image for post
Image for post

and inspect it; observe the custom HTML tag c-hello-world:

Image for post
Image for post

Observations:

  • As we can see, both examples are web components; as per the custom HTML tags

Next Steps

In the next article, Exploring Salesforce Lightning Web Components: Part 2, we explore how and why Lightning Web Components are compartmentalized.

Written by

Broad infrastructure, development, and soft-skill background

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store