Web Components, Lit and Santa 🎅

Sam Thorogood

Let's talk about Web Components

Jemima Abu

Web Components in Action

Joren Broekema

Alex Korzhikov

Bringing Ionic (and Web Components) to React

Mike Hartington

Web Components in React

Matias Huhta

Deploy a Web Component App and Set Up a Continuous Integration Workflow

Philippe Ozil

Immutable Web Apps

Andy Desmarais

Web Components are awesome!

Dwane Hemmings

It's Time to De-Fragment the Web

Sami Jaber

The Good, The Bad, and The Web Components

Zach Leatherman

Authoring HTML in a JavaScript World

Tony Alicea

How the Shadow DOM has Got You Covered?

Mukul Ramchandani

React Day Berlin

React Day Berlin 2023

We learn about possibilities of what DOM can do but have you ever wondered what all possibilities Shadow DOM can have. Well, In this talk I will help you understand how the Shadow DOM has got you covered. We will further deep dive into how you can use React with Web Components.

React Summit US

React Summit US 2023

In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.

JS Nation

JSNation 2023

There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.

React Day Berlin 2022

Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.

JSNation 2022

Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.

Ever wondered how by placing "video" or "audio" into your HTML, you get a media player with controls included? Or how, depending on the type attribute, "input" can be a button, a place to enter text, select a date or file, color picker and more? What if you could create your own element? The answer: Web Components! 🤯 In this talk, we’ll take a look at what Web Components are, how to make one and include it into an application.

React Advanced

React Advanced Conference 2021

Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Finland

React Finland 2021

Likely you've heard of Web Components but do you know how to use them with React? If not, then this is the demonstration for you! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition

React Summit Remote Edition 2020

Ionic is a framework for building fast and powerful mobile, desktop, and web apps with web technology. Traditionally, Ionic has been built on top of one framework: Angular. But recently, Ionic added support for React, and aims to bring the same great development experience to the React ecosystem. In this talk, we’ll look at how an Ionic React app works and how this changes the React ecosystem (surprise, it's because of Web Components). <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

JSNation Live

JSNation Live 2021

Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅 <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

DevOps.js

DevOps.js Conf 2022

Join us for a workshop in which you’ll deploy a simple Node.js app built with Web Components and set up a Continuous Integration (CI) workflow. You’ll learn about the power of the Lightning Web Runtime (LWR) and GitHub Actions. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#web components