Sharing Components Across Frameworks

Have you been asked to take a component from one project and “just” put it into another project built with an entirely different JavaScript framework? Do you work at a diverse company with teams using Angular, React and Vue and are wondering how you can stop duplicating effort? Do you have framework fatigue and want to skip the cycle of learning yet another framework? If so, then Web Components are what you have been searching for!

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags which can be shared across frameworks. With libraries like Lit built by Google to extend Web Components, it is now possible to easily create fully featured components that work with Angular, React and Vue.

This workshop deep dives into Web Components and the latest updates from Lit, which provides lit-html & LitElement. You'll learn how to build your own components with both vanilla JavaScript and LitElement. We’ll create a library of shared components and integrate them into an existing React application.

Specific topics covered during the workshop are:

• High-level Web Components Overview
• Codelab: Build a Toast Web Component
• The building blocks of Lit: Tagged Template Literals, lit-html & LitElement
• Codelab: lit-html
• Codelab: LitElement Basics
• Codelab: LitElement Intermediate
• Codelab: Sharing Components
• Using WCs in production, using WCs with React, general WC usage