Design Systems Education: Web Components

I'm a big fan of the Design System Office Hours podcast from Davy and PJ. I recently listened to their Design Systems Education episode.

"Davy and PJ discuss the challenges and strategies for design system training, especially when it comes to Figma. We explore the line between providing direct tool training and focusing on how the design system integrates with those tools."

While I was on a walk listening, I kept nodding along. All of it is so relatable. But in particular I can relate to the education piece falling onto the Design System team.

I, too, really enjoy recording videos for training. But as they mentioned, it's annoying how tools and features change in a short amount of time. After a few months, your content is suddenly outdated. What a bummer.

Then I got to thinking about the engineering side of this problem. One huge advantage of building your Design System with Web Components – and to be clear, I'm talking the built-in-the-browser Web Components – is that browsers don't have a lot of churn. Less frequent changes would mean not needing to re-record videos every few months. That sure sounds nice!

And while this Bluesky post from Dave Rupert was about a different topic, he uses a phrase I'll now use forever:

If you’ve heard me talk about #webcomponents, you’ve probably heard me talk about how improvements and changes are slow… slow like brisket. Low heat applied over a long time (in this case 9mo after issue identified) but now all boats float and the platform we all build on got better.

mmmmm brisket (literally took a brisket cooking class a month ago, still thinking about it).

Back on track – I do believe Web Components with Design Systems are a bit of an insurance policy overall. And when it comes to the education piece of Design Systems, it's even more insurance. Core browser technology is cooked low and slow, like a brisket. You're guaranteed a great amount of stability over time. And as the browsers get better, guess what? So does your stuff!

Compare that to the churn you get when you pick something like React. I'm not saying React is "bad", of course, it's just the reality. Frameworks move at a much faster pace, which is what some organizations want/need.

This article from Jim Nielsen is along similar lines, in my mind, to this topic.

Learn more about the platform and use it as much as you can. It'll make you a better developer. Not only is it great for your Design System, it's also good for your career.

So if your Design System is built on "the platform", your education content won't be outdated as quickly. Sure, there will be new ways to do things, but the core fundamentals will be the same. And that has a lot of advantages. I'll report back in another year or two, as I'm currently setting up education content for our Web Component Design System, Glide.

If you'd like to learn more about why I think Web Components are great for Design Systems, I have an article for you. Or if you want a quick intro to Web Components, I've got that too. And as always, if you want to chat about Design Systems or Web Components, Bluesky or LinkedIn is a great way to get a hold of me.

Anyway, that's all I've got. See ya next time!