DEV Community

loading...
Cover image for unbundled web components part 1: Context of WCs @ PSU

unbundled web components part 1: Context of WCs @ PSU

btopro profile image Bryan Ollendyke ・2 min read

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)

HAX spray paint logo

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.

Discussion (0)

pic
Editor guide