unbundled web components part 1: Context of WCs @ PSU

Benny Powers, uh-maz-ing web components developer asked me the other day on twitter about how we ship web components and if I had a blog post for it. "Yes let me pull it up!" I thought, only to find no... I didn't. So here we are. Let's dive into a topic I've been asked about a lot which is how and why Penn State ships web components in an "unbundled" state.

This is going to start off a series of posts about this topic to make it more digestible given how complex the problem space is.

Background

• Our team has over 290 npm packages for web components and tooling
• We use 100's of web components across 100's of sites / domains and want to expand this to 10s of 1000s of sites
• We have multiple static sites, CMSs, and vendor managed products that we want to normalize capabilities / UX
• We have small / ad-hoc teams, some times of one person though #HAXTheWeb has 4 core developers and multiple interns
• One of our key user audiences (faculty / staff) generate content / write light HTML to present material for another audience (students)

We work on a project called HAXTheWeb, an effort to build a Headless Authoring e*X*perience. Think of it like a WYSIWYG editor, made out of web components, that understands how to edit other web components using a small schema.

Design principles

• Sustainability: HAX Content should work with or without the editor by treating the DOM as an API. Writing to properties, attributes, and slots, we can create a sustainable HTML lego brick of sorts that works forever.
• Longevity: Web components are a forever format, meaning that if we ever switch off HAX, change our CMS or alter where content loads from, it shouldn't matter. We need content written once to be in a format that will work anywhere
• Remix: When HAX edits a web component, that web component should work in any system without requiring HAX.
• Developer Experience: We want developers to write design / visual assets that they can use anywhere. HAX will learn how to edit this element, the element will not learn HAX or be written in a HAX specific way beyond web components + a method that returns JSON.

And now, onto the show

With that said, this series will unpack the unbundling movement and how the #HAXTheWeb team is transforming how web components are deployed, at scale, at a major institution.