Web Components in 2019: Part 4

We explore third-party libraries, LitElement and Lightning Web Components, that supplements Web Components.

This article is part of a series starting with Web Components in 2019: Part 1.

Updating TypeScript Configuration

note: The example in this article is available in the part4 branch of the larkintuckerllc/lwc-2019 GitHub repository.

In preparation of exploring enhancements to Web Components using third-party libraries, we are required to update the TypeScript configuration; tsconfig.json:

Observations:

• Previously, we were targeting ES5 to be compatible with IE11. This worked because we included the polyfill custom-elements-es5-adapter.js in the file public/index.html file. Unfortunately, this polyfill does not appear to work with any of the third-party libraries we will explore (we also remove it from that HTML file since it is not helpful). By changing the target to ES2015, we avoid this particular problem (at the cost of losing support for IE11)
• TypeScript’s default module resolution does not support Node.js and NPM (weird but an easy fix)
• Finally, the third-party libraries use TypeScript decorators to streamline the code

LitElement

We first consider the LitElement library (sponsored by Google). The library is sufficiently simple, especially if one is coming from React, and as such will defer the core learning to their tutorial.

Here we simply refactor our counter example using LitElement and make some observations.

First we install the dependencies:

npm install lit-element

Update the HelloWorld component; src/index.ts:

and update the HelloView component; src/helloView.ts:

Observations:

• This implementation is vastly simpler (by being more declarative) than the previous index.ts and helloView.ts
• One less-obvious feature is that with LitElement, class methods are automatically bound to the class; in the previous example we used class properties to address this
• Because we are using JavaScript template literals (with expression interpolation); we have to bring the CSS and HTML markup back into JavaScript

note: While I was going to complain that there was not tooling to support the checking of either the CSS or HTML markup in the JavaScript, I found these Visual Studio Code tools: es6-string-css and lit-html.

Looking at this example (and LitElement’s additional lifecycle methods), we can see that it has much of what makes other front-end frameworks, e.g., React, a powerful tool.

What is still missing?

• Confirmed support for IE11; seems to be a number of issues floating around this
• (from before) Solutions for Cross-Cutting Concerns: React has advanced patterns, Higher Order Components, Render Props, and Hooks, for handling cross-cutting concerns. With LitElements, it is unclear how approach these sorts of problems
• A robust community (like React’s)

Lightning Web Components

Another library is Lightning Web Components (LWC) (sponsored by Salesforce). The usage of this library is very similar to LitElement; albeit a bit more complicated; see their tutorial on learning it.

One distinction from LiteElement, is that the only documented way of developing with LWC is to use their project generator tool (lwc-create-app). This means that we cannot use it in the build environment we just developed.

note: This LWC example is available for download.

For completeness, we create our example with LWC (again using lwc-create-app) and make observations:

src/modules/my/helloWorld/helloWorld.html

src/modules/my/helloWorld/helloWorld.js

src/modules/my/helloView/helloView.css

src/modules/my/helloView/helloView.html

src/modules/my/helloView/helloView.js

Observations:

• Like LitElement, LWC has a very simple (and declarative) syntax
• Unlike LitElement, we cannot use JavaScript operations in the template; instead we rely on template directives and class getters to perform advanced operations
• The HTML template and CSS are split out into separate files (nice experience in the editor)

Much like LitElement, LWC provides additional lifecycle methods; all though there are fewer of them that provided by LitElement (unclear if this is a problem or not).

LWC does supports IE11.

LWC is likely to grow to have a robust community; LWC is the preferred solution (starting in 2019) for Salesforce on-platform development.

While not well documented, LWC also does provides a mechanism for handling cross-cutting concerns with a similar pattern that hooks provides for React. The following article describes this feature Cross-Cutting Concerns in Lightning Web Components (Solved).

What is still missing?

• Support for TypeScript
• Documentation on using LWC outside of using lwc-create-app

Wrap Up

Hope you found this helpful.