Lucien Immink

Why LIT is Fire

Ditch the virtual DOM. Lit delivers high-performance updates by using native browser features to build fast, lightweight web components that work everywhere.

Why LIT is Fire
#1about 4 minutes

Understanding the core principles of web components

Web components provide a standard way to create encapsulated, reusable UI elements using custom elements, HTML templates, and the shadow DOM.

#2about 6 minutes

Why template literals are a game changer for DOM manipulation

Template literals offer a secure and efficient alternative to traditional DOM manipulation by separating static strings from dynamic values at a native browser level.

#3about 5 minutes

Building your first reactive component with Lit

A step-by-step guide to creating a basic Lit component using decorators for properties and custom elements, highlighting its efficient, virtual DOM-free rendering.

#4about 5 minutes

Managing state, composition, and styling in Lit

Learn to build more complex UIs by composing components, managing internal state with the @state decorator, and applying encapsulated styles using CSS literals.

#5about 5 minutes

Exploring experimental features with Lit Labs

An overview of the Lit Labs ecosystem, which provides experimental packages for tasks like server-side rendering, animations, routing, and React integration.

#6about 3 minutes

Building high-performance lists with the virtualizer lab

The virtualizer lab enables rendering of massive lists with high performance by only rendering the items currently visible in the viewport.

#7about 3 minutes

Q&A on Lit's practical applications and architecture

Discussion covers how Lit handles CSS, its default use of the shadow DOM, and its suitability for separating UI from complex business logic in large applications.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

The Lean Web46:46

The Lean Web

Chris Ferdinandi

Frameworkless: How to use Web-Components in production?46:39

Frameworkless: How to use Web-Components in production?

Tobias Münch

Web development: where are we, and where are we going?32:56

Web development: where are we, and where are we going?

Laurie Voss

One Framework To Rule Them All: Faster Websites With Astro30:42

One Framework To Rule Them All: Faster Websites With Astro

Eddy Vinck

Component styling in a JS world — evolve your mental model41:28

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Engineer

Lightning AI
Charing Cross, United Kingdom

Remote
€53K
React
JavaScript
TypeScript
+1

Front End Engineer

Latent Labs
Charing Cross, United Kingdom

€59K
REST
WebGL
React
Next.js
+6