Defeat that legacy monster! Guerilla refactoring with web standards

Can you defeat a legacy monster with `document.write()`? Learn how to weaponize web standards and incrementally refactor even the most stubborn codebases.

#1about 2 minutes

Understanding the nature of legacy project monsters

Legacy projects are often more than just broken software; they can be an enemy that grows stronger with every new feature added.

#2about 5 minutes

How good intentions lead to broken legacy projects

Projects become legacy messes over time because initial technology and pattern choices are made with incomplete information about the future.

#3about 2 minutes

Adopting a guerrilla warfare mindset for refactoring

Instead of negotiating with an unmaintainable system, declare a war of attrition to subvert it by exploiting its reliance on web standards.

#4about 4 minutes

Creating modern code islands with web components

Web components allow you to build encapsulated features with private state and DOM, creating a safe space away from the legacy project's influence.

#5about 5 minutes

Weaponizing old and obscure browser features

The browser's commitment to backward compatibility means even ancient features like the BGCOLOR attribute can be used as tools to fight legacy constraints.

#6about 3 minutes

Injecting components using the document.write hack

When a legacy framework blocks custom elements, you can use the ancient `document.write` method inside a script tag to inject them directly into the HTML parser.

#7about 3 minutes

A step-by-step battle plan to defeat legacy monsters

Combine modern web components with old browser hacks to incrementally add new functionality, connect it via message passing, and ultimately replace the old system.