The main branch is your playground to follow along with the workshop.
This workshop is divided into modules and sections. To see the end result of each section, run git checkout {module}.{section}. Any project setup related to that section can be found in the README.
Web components are actually a collection of native browser API's including shadow DOM, custom elements, and HTML tags like <template> and <slot>. These API's allow developers to build highly reusable components without a dedicated framework tooling such as React, Angular, or Vue.
These well-supported API's have caused a slow but definite shift in how the web community approaches building UI for web, manifesting in one of two ways:
- Updating popular frameworks to use web component API's under the hood
- Building web components directly, but supplementing gaps like reactive properties, state management, and performant rendering with specific tooling for each challenge.
The second approach has itself created loose frameworks like Lit, Stencil, and Hybrids.
While it would be easy to simply advocate and teach these new frameworks, the goal of this workshop is to work as closely as possible with web components, addressing the core reactive UI problems head on, and usually with more than one solution. This approach will equip developers to pick tools for their projects that balance control, abstraction, elegance, maintainability, and testability.