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
About Christopher Lorenzo
Chris has worked at Comcast since 2007 – currently as a Distinguished Engineer. He enjoys building/motivating teams and ramping up new projects including Xfinity Home and Xfinity xFi using the latest patterns and web primitives. Outside of Comcast I am a Google Developer Expert in Web Technologies and I love hiking and chilling on the beach.
More About Chris »
About John Riviello
John Riviello created his first hypertext document on the Internet in 1996 and has been obsessed with building for the web ever since. He spends his days as Engineering Fellow and Lead Frontend Developer at Comcast, where he works on the Xfinity customer websites and web applications. He is a Google Developer Expert in Web Technologies and
the author of the LinkedIn Learning course “CSS to Sass: Converting an Existing Site.” In his free time, he prefers surfing waves over surfing the Internet.