Exploring Salesforce Lightning Web Components: Part 1
Through concrete examples, we explore the recently released Salesforce Lightning Components.
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)
- The first obvious difference is that the Lightning Web Component (JavaScript) is a class that extends LightningElement where-as the Web Component is a class that extends HTMLElement
- Another difference is that Lightning Web Components provide a mechanism for data bindings between the HTML and JavaScript, e.g., HelloWorld’s greeting property has data binding with elements in the HTML. The Web Component specification does not include this feature
Let us compare Web Components and Lightning Web Components as they are used. First we use the Web Component:
And inspect it; observe the custom HTML tag, hello-world.
Next we use the Lightning Web Component:
and inspect it; observe the custom HTML tag c-hello-world:
Observations:
- As we can see, both examples are web components; as per the custom HTML tags
- In looking at the lwc source, we can see that LightningElement extends HTMLElement
Next Steps
In the next article, Exploring Salesforce Lightning Web Components: Part 2, we explore how and why Lightning Web Components are compartmentalized.
