Building and hosting a workshop on web components

Mar 26, 2022. 8min.

It’s early hours in the morning, I’m listening to some chill tunes, and I’m exhausted and happy about having held my first conference workshop yesterday on the topic of web components (also called custom elements).

Of the several hundred conference attendees to this year’s Booster Conference 2022 I’m delighted that many found their way to my workhop: Weaving web components in a bundler-free world.

Here’s a copy of my workshop abstract

Weaving web components in a bundler-free world. #

These days many web frameworks offer functionality for expressing reusable components. However, what is less known is that browsers have built-in support for defining web components.

Web components isn’t a new browser feature by no means. Some say that native web components has failed, and others say it’s only now with Internet Explorer 11 being phased out that we’ll finally see its potential fully realized. Additionally, we now have support for ES6 modules in all major browsers. Combine that with the concept of HTTP2 multiplexing and we have the stage set for a web development experience without a bundling step.

In this workshop we will:

Build native web components using test driven development. Work with native browser APIs.
See how web components can be embedded in frameworks such as React.
Finally, we’ll benchmark our work and discuss its implications.

My goal for this workshop is to give participants a head start into building and using web components, and to get an idea of how this technology might be put to good use.

Intended audience: To attend you should have a basic knowledge of how to work with HTML, CSS, JavaScript and the command line. And bring a laptop unless you’re pairing up with a friend who has one.

Many workshop attendants with their laptops — Yeah, it’s me in the front there with arms raised. Photo credit: Maja Jaakson.

How I built the workshop #

It was around November of last year that I pitched my workshop abstract and got it accepted. Following that I had to find a way to build a nice workshop experience that would deliver on all the abstract’s promises.

When pitching the abstract I reasoned that the allotted three hours could be divided into three workshop parts. However, I also knew that from having attended workshops that it can take time to find the workshop material and getting it setup on one’s machine.

I wanted to cater to a wide range of skill-levels so I wrote the parts to have one or more assignments that participants could work on at their own pace. People with prior experience on web components could work as fast as they wanted without waiting on others. Moreover, I stressed that participants didn’t have to stress about finishing all the assignments in the workshop time because they could also continue to work on them at home and take their time gleaning insights from the workshop code.

Finally, I think I managed to hit the ball out the park when I realized that I could present the assignments as nonsensical and witty stories.

Links to the workshop material #

Here’s the workshop code and material on Github. It’s licensed so that people can build upon it and even host their own workshops as long as they respect the license terms.
And here’s the running version of the workshop code.

What I learned #

In the future I’ll include a link to the workshop material in the abstract to save setup time.
Limiting the technology stack made it easy for participants to focus on the workshop content. In an early iteration I tried using the static site-generator Hugo as a basis, but I took it again because I didn’t want to confuse people with Hugo-specific concepts.
When introducing the workshop I need to explain where in the code they can go to find code examples of web components.
Taking time to show how to debug JavaScript code in the browser using thing’s like the debugger statement was very well received. People were also surprised how easy it’s to grab live HTML elements from the web page using the developer tools and start exploring methods on HTML nodes and manipulating them live.
Reading out aloud the witty assignments worked well to set the scene. Suddenly I was reminded of my time playing Dungeons and Dragons.
The text editor support for writing vanilla JavaScript is a bit lacking. Some participants fell prey to simple errors that were missing letters and such. Taking a look into the developer console in the browser quickly solved many issues though.
Optimal usage of screen real estate is important when presenting code to participants. I mirrored my laptop screen to a projector and divided workspace between my code editor and my browser showing the results. To ensure that participants far back in the room saw I tried to only use the top portion of the workspace, but that became quite cramped at times. Memo to myself: I should try to experiment on some improvements to this.
I must remember to leave code at the screen for a little while as participants remarked that I moved too fast for them to keep up. It helped that I alternated between writing some code and then walking around helping people while leaving the code up on screen.

What the participants learned #

How does it feel to have zero dependencies, and zero risk of supply-chain attacks? There’s no build-step to maintain that can house bugs and no venture capital funded frameworks or libraries to be abandoned. (Me, paraphrased from the workshop.)

With this workshop I hope I was able to expand people’s world-view a bit. I wasn’t trying to get people to drop all their current practices but instead introduce them to yet another perspective to web development. Also, I hope to have shown that our browsers are surprisingly capable.

I certainly saw some head scratching throughout the workshop but also more and more nodding heads. Towards the end people asked how they could start using web components in their work to which I answered that they can be used with most web frameworks (here’s the ReactJS docs on web components), and that they should start small with one or two experiments and take it from there. As shown in the workshop there’s no need to install a new framework or library to start experimenting.

conference organizers standing on the stage with attendees cheering and taking photos. — A big thanks to the organizers for their work.

A big thank you to the organizers #

Finally, I want to give a big thanks to the conference organizers who built an awesome Booster Conference 2022. Before, during and after my workshop I got a lot of good support from the volunteers. Moreover, I think this year was a stellar conference with lots of good presentations, interesting hallway conversations and some very fine coffee.