Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Zero Dependency Components: Introduction to Web Components

Zero Dependency Components: Introduction to Web Components

As much as I love JavaScript, it’s always the most expensive part of your site.

Come learn about Web Components with friends!

Web Components are native browser APIs that let you develop rich UI components with 0KB of added bundle size! In this workshop I want to convince you that you might not need a framework.

We will walk through Web Component implementations of the sample components from

  • Hello World
  • Timer
  • Todo List
  • Markdown Preview

As we develop these components we will highlight various pieces of the Web Components:

  • customElements
  • <template>
  • The Shadow DOM
  • ES6 Modules

After we get off the ground with Web Components, we'll dive down the rabbit hole with Svelte. Svelte is "The magical disappearing UI framework." It is a project that abstracts over Web Components by compiling Svelte code down to vanilla Web Components without any runtime. So it is still 0KB!

If that sounds wacky, come along for the ride to see how it works!

If you aren't comfortable with ES6, that is OK. Bring a buddy! Pairing is encouraged.

Prerequisites: You should be comfortable with HTML/CSS/JS. #UseThePlatform

Preparation: Please bring a laptop with a modern browser and your favorite editor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment