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 reactjs.org:
- 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.