With renewed interest in Web Components, we revisit the core and supporting technologies available in 2019.
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:
Having peaked my interest, I decided to step back and revisit the broader ecosystem of Web Components; starting with the core technology.
The software requirements are:
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):
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
- 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:
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:
- 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.
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:
- The basics of Web Components are described in the MDN article: Using custom elements — Web Components
We then create the supporting HTML in dist/index.html:
With all this place, we can run our web application by entering:
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:
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.