Web Components in 2019: Part 1

With renewed interest in Web Components, we revisit the core and supporting technologies available in 2019.

Motivation

Back in late 2017, I wrote a series of articles on Web Components starting with Web Components by Example: Part 1. At that time, my conclusion was that, while noble, Web Components had not lived up to their promise. While interoperable with my go-to front-end framework, React, they did not add sufficient value to add them to the mix.

In 2019, however, a number of corporate players, notably Salesforce, adopted Web Components in a big way; that got my attention. At a matter of fact, it appears that Salesforce and Google have teamed up to push the technology forward.

Sufficiently intrigued, I explored Salesforce’s implementations through a series of articles:

• Exploring Salesforce Lightning Web Components: Part 1: Exploring Salesforce’s on-platform solution
• Lightning Web Components (The Open Source Version): Exploring the off-platform open source solution

Having peaked my interest, I decided to step back and revisit the broader ecosystem of Web Components; starting with the core technology.

Prerequisites

It is assumed that the reader has a basic understanding of HTML, CSS, and JavaScript. While the examples are written in TypeScript, only a passing familiarity of it is required.

The software requirements are:

• Node.js: This article is written with version 10.16.0
• An editor; Visual Studio Code recommended
• Web browser; Google Chrome recommended

TypeScript Project

We first create a TypeScript project:

note: While TypeScript adds a bit of complexity to the initial setup (yes this section is longish), it will pay off in the end with much tighter code.

In a new folder, enter (accepting all defaults):

npm init

Install the development dependencies:

npm install typescript --save-dev
npm install prettier --save-dev
npm install tslint --save-dev
npm install tslint-config-prettier --save-dev
npm install tslint-plugin-prettier --save-deve

Observations:

• The typescript library provides the TypeScript compiler among other things
• The prettier library is an opinionated code formatter
• The tslint library is a TypeScript linting library. There is an active effort in 2019 to replace TSLint with ESLint; just not there yet
• The tslint-config-prettier library resolves conflicting rules between TSLint and Prettier
• The tslint-plugin-prettier library runs Prettier as a TSLint rule

To generate a TSLint configuration, we enter:

./node_modules/.bin/tsc --init

While the generated tsconfig.json file is rather intimidating, we only need to update two configuration entries (self-explanatory):

We also supply a Prettier configuration with three self-explanatory settings:

We supply a TSLint configuration:

Observations:

• Much of the configuration is simply following the installation instructions for tslint-config-prettier and tslint-plugin-prettier
• Most of the other configuration entries are self-explanatory except for interface-name; here we configure TypeScript to accept interface names that do not start with the letter I

Finally, we update package.json with a script to lint and transpile the TypeScript in the src folder:

note: While not required, the two Visual Studio Code plugins are useful: prettier-vscode and TSLint.

Hello World Component

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

As we still want to support IE11 (yuck), our TypeScript configuration transpiles to ES5 JavaScript. Likewise we will need to include a Web Components polyfill:

npm install @webcomponents/webcomponentsjs

Because we will be running our web application from the dist folder and use script tags to load the polyfill, we need to copy the node_modules/@webcomponents/webcomponentsjs folder to the dist folder.

We next create our first Web Component in src/index.ts:

Observations:

• The basics of Web Components are described in the MDN article: Using custom elements — Web Components
• Notice that while this particular code is TypeScript, it is actually indistinguishable from ES2015 JavaScript

We then create the supporting HTML in dist/index.html:

Observations:

• The custom-elements-es5-adapter.js polyfill is required because we are transpiling TypeScript to ES5 JavaScript

With all this place, we can run our web application by entering:

npx http-server

Opening the web application in a web browser, we see the expected result:

And under the hood, we see that we indeed have a Web Component:

Next Steps

Now that we have a basic example, let us expand on it with some additional Web Component features in the next article Web Components in 2019: Part 2.