WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 25, 2021

Frameworkless: How to use Web-Components in production?

Tobias Münch

Are you tired of painful framework migrations and ecosystem churn? Discover how native web components deliver lightning-fast, production-ready applications without the technical debt.

Pause
Mute Enter Fullscreen
#1 about 4 min

Motivation for adopting frameworkless web components

How avoiding large dependency trees and adopting vanilla JavaScript can reduce bloat and improve app security.

#2 about 5 min

Core browser standards supporting custom web components

Managing encapsulation and content distribution through the shadow DOM, the custom elements registry, and HTML templates.

#3 about 5 min

Web component lifecycle callbacks and rendering strategies

Handling DOM insertion and UI updates using standard lifecycle callbacks and localized rendering techniques.

#4 about 2 min

Passing complex data objects to web components

How to transmit structured data directly as component properties to avoid execution overhead from stringification.

#5 about 7 min

Architectural lessons and legacy application migration strategies

Structuring domain-driven designs and gradually enhancing legacy applications with custom element wrappers for long-term maintainability.

#6 about 17 min

Live coding an editable web component list application

Building a frameworkless interactive list featuring edit states, custom event dispatching, and shadow DOM styling.

#7 about 2 min

Evaluating trade-offs between vanilla components and lightweight frameworks

Balancing the long-term code maintainability of plain web standards against the immediate productivity boosts of slim compilers.

#8 about 8 min

Question and answer session on compatibility and framework comparisons

Clarifying legacy browser support, CDN deployment strategies, and the business considerations for choosing standards over major frameworks.

Matching moments

7:10 min

Building framework-less architectures with native custom web components

Christian Liebel Christian Liebel · World Congress 2022

3:51 min

Audience questions on accessibility and framework tradeoffs

Rowdy Rabouw Rowdy Rabouw · World Congress 2022

3:44 min

The role of web components in modern web development

Keith Cirkle · Coffee With Developers

2:39 min

Addressing developer questions on framework capabilities and architectural alternatives

Christian Liebel Christian Liebel · World Congress 2022

2:40 min

Implementing microfrontends entirely with custom elements

Alexander Günsche Alexander Günsche · LIVE

4:56 min

Understanding standard technologies behind web component architecture

Manuel Mauky · World Congress 2023

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
almost 5 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Related videos

Extending HTML with Web Components thumbnail
41:54
World Congress 2022 • over 4 years ago

Extending HTML with Web Components

Rowdy Rabouw

The Naked Web Developer: Your Browser Is Your Framework thumbnail
42:46
World Congress 2021 • over 5 years ago

The Naked Web Developer: Your Browser Is Your Framework

Avichay Eyal

Building a framework-independent component library thumbnail
19:46
World Congress 2025 • about 1 year ago

Building a framework-independent component library

Tobias Scholz

Keith Cirkle of GitHub on React Fatigue thumbnail
49:32
Coffee With Developers • almost 2 years ago

Keith Cirkle of GitHub on React Fatigue

Keith Cirkle

The Lean Web thumbnail
46:46
JS Congress • almost 5 years ago

The Lean Web

Chris Ferdinandi

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios thumbnail
24:47
World Congress 2025 • about 1 year ago

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Manfred Steyer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.