DEV Community

Code[ish]

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.

Episode source