38. Building with Web Components

Jamie White, a front-end engineer at Heroku, is in conversation with Ben Farrell, an award-winning designer working at Adobe. Ben has just written a book about web components, a way of designing websites that's been available roughly since 2013. Various polyfills and proprietary frameworks have achieved what web components is now trying to standardize: composable units of JavaScript and HTML that can be imported and reused across web applications.

Ben goes over his personal experience with web components, and the history of the components themselves, starting with Polymer, which was essentially an experiment from Google. The library essentially recreated what various browser vendors wished web components would become. Eventually, the standards caught up, and now modern browsers don't need as many polyfills in order to accomplish the gains web components provides to developers.

The key strength of web components for Ben is their reusability. For prototyping a UI element, he can write a block of code once, have it imported throughout a site, and continue to make modifications to that one piece of code as needs evolve. One such example of this is the web component called Shader Doodle, which abstracts a lot of WebGL "messiness" in favor of a simple interface. He is also working with others on the idea of constructable stylesheets as a means of also importing the same CSS rules and adopt them onto various web components.

In the near future, projects like lit-HTML and lit-element will render incompatibilities between various frameworks, such as React and Angular obsolete. At their core, they will be built on web standards, which will mean easier interoperability, breaking down these barriers between them.

Links from this episode

• Web Components in Action is Ben's book on designing, building, and deploying reusable web components from scratch
• Polymer is a set of libraries and tools to make developing web components easier
• lit-html and LitElement are additional tools to express HTML templating in JavaScript
• Shader Doodle is a web component for writing and rendering shaders
• Spectrum employs constructable stylesheets to provide a design framework
• Lightning Web Components is Salesforce's bundle of web components for its platform
• Web Components Essentials is a book by Cory Rylan to help teach the core fundamentals of web components
• Polymer's Slack workspace is available as a resource for more information