Frameworkless: How to use Web-Components in production?

What if you could escape framework migrations forever? Learn how Web Components offer a standards-based solution for long-term stability and speed.

#1about 3 minutes

Why you should consider frameworkless web components

Web components offer a solution to dependency chain risks, performance overhead, and maintainability issues by relying on native browser standards instead of external frameworks.

#2about 5 minutes

Understanding the core standards of web components

The foundation of web components consists of key standards like the Shadow DOM for encapsulation, Custom Elements for defining new HTML tags, and HTML Templates with Slots for reusable markup.

#3about 3 minutes

Managing the web component lifecycle and attributes

Web components follow a defined lifecycle with callbacks like connectedCallback and disconnectedCallback, while attributeChangedCallback responds to changes in observed attributes.

#4about 3 minutes

Choosing rendering strategies and passing data

Components can be rendered by directly manipulating the DOM, re-rendering entirely, or using a virtual DOM approach, and complex data can be passed as object properties.

#5about 4 minutes

Structuring a production project with web components

A production application was structured using a domain-driven design approach, leading to the creation of a custom base component library to improve development pace.

#6about 1 minute

Using web components to migrate legacy applications

Web components can be used to incrementally modernize legacy applications by replacing old components one by one without a full rewrite.

#7about 1 minute

Weighing the advantages and disadvantages of web components

While web components offer high performance and no dependencies, they come with a steeper learning curve, slower initial development pace, and the responsibility of maintaining your own code library.

#8about 17 minutes

Live coding an editable list with web components

A practical demonstration shows how to build an interactive list component from scratch, covering rendering, state management, event handling, and component interaction.

#9about 2 minutes

Conclusion and when to use lightweight frameworks

While pure web components offer long-term stability, lightweight frameworks like Stencil.js or Slim.js can provide a practical compromise for faster development and added comfort.

#10about 8 minutes

Answering audience questions about web components

The Q&A session addresses topics like Internet Explorer compatibility, the role of frameworks like Stencil, bundle size concerns, and the strategic trade-offs of going frameworkless.