Lightning Web Components (The Open Source Version)

A first take on Lightning Web Components.

Just as I was finishing up a fairly comprehensive eight-part series, Exploring Salesforce Lightning Web Components: Part 1, on Salesforce Lightning Web Components, I found out that Salesforce released (seemingly just in the last few days) an open source version: Lightning Web Components (LWC).

Rather than re-writing those eight articles, my plan here is to refer to them for the concepts and reimplement the examples in LWC (the open source version).

All of the examples in this article are available for download.

Prerequisites

The latest LTS version of Node.js; 10.16.0 as of this writing.

A text editor, strongly recommend Visual Studio Code.

Installation

While one can install the lwc library directly, actually building a project with it would take a non-trivial amount of work, e.g., creating the right webpack configuration, etc.

Rather, we will use their recommended approach of using the project generator.

npx lwc-create-app my-app

Noticed that npm reported 1 moderate and 1 high vulnerability in the project’s dependencies. Unfortunately, the recommended automatic fix did not work. For good measure, I took the time to log an issue for this.

Developer Tools

The LWC documentation specifically calls out installing the Prettier code formatting library.

Interestingly enough, Prettier was already installed as a dependency of the lws-services package; there are also already Prettier configuration files provided in the project. It, however, is good to be explicit here.

npm install --save-dev prettier

It is helpful to install an editor extension to support Prettier, e.g., the VSCode extension, Prettier — Code formatter.

In the same vein, the project already has ESLint and a configuration installed; just adding the dependences to our project to be explicit.

npm install --save-dev eslint
npm install --save-dev @salesforce/eslint-config-lwc

It is helpful to install an editor extension to support ESLint, e.g., the VSCode extension, ESLint.

Finally, it is useful to integrate Prettier error reporting into ESLint.

npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier

and update the ESLint configuration file; .eslint.json:

Finally, there are a number of scripts provided in package.json; the immediately relevant one (provides a hot-reloading development build through a local web server) can be run as:

npm run watch

Web Components, Lightning Web Components, and Compartmentalization

In the first two articles in the series, Exploring Salesforce Lightning Web Components: Part 1 and Exploring Salesforce Lightning Web Components: Part 2, we learn that LWC build upon Web Components which provides a level of compartmentalization.

Observations:

• Notice the my-app and my-greeting HTML tags and their Shadow DOM (shadow-root)

Data Binding and Directives

In the third article, Exploring Salesforce Lightning Web Components: Part 3, we look at how LWC provides for data binding and related patterns.

The following are the reimplemented examples:

• Data binding
• Binding to computed values
• Conditionals
• Iteration
• Iteration and Tracking

JavaScript Specifics

In the fourth article, Exploring Salesforce Lightning Web Components: Part 4, we focus on some JavaScript specifics.

The following is the reimplemented example for the Common section: Common and HelloWorldCommon.

As the Salesforce Lightning Web Components does not support importing third-party libraries, we had to resort to using third-party JavaScript libraries that updated the global Window object. This is not the case for the open-source LWC; so there is no need to reimplement the second example in the article.

For the Directly Manipulating DOM example, we can install d3 as normal

npm install d3

and import and use it as in the ManipulateDom example.

Using Components Together

In the next article, Exploring Salesforce Lightning Web Components: Part 5, we begin to explore using components together.

The following are the reimplemented examples:

• Composing Components (Contact and HelloWorldContact)
• Events (Counter and HelloWorldCounter)

Advanced Component Composition Patterns

In the next article, Exploring Salesforce Lightning Web Components: Part 6, we explore some more advanced component composition patterns.

The following are the reimplemented examples:

• Calling Child Methods (Player and HelloWorldPlayer)
• Using renderedCallback Instead (RefactoredPlayer and HelloWorldRefactoredPlayer)
• Cross Cutting Concerns and Slots (Frame and HelloWorldFrame)

Global State Solution

In the two articles, Exploring Salesforce Lightning Web Components: Part 7 and Exploring Salesforce Lightning Web Components: Part 8, we explore patterns for inter-component communication between sibling components.

The example in the first article is Salesforce specific and thus not applicable for our open-source environment; beside we found it lacking anyway. So rather we implement the version using Redux instead. Because we can now import third-party libraries, we first install it:

npm install redux

With this, we implement the example with four components: HelloWorldRedux, Child1, Child2, and Store.

Wrap Up

Turns out the main difference between Salesforce Lightning Web Components and the open-source Lightning Web Components (other than the obvious lack of Salesforce integrations in the later) is that the open-source solution supports importing third-party libraries.

Hope you found this helpful.