Peter Kröner

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.

Defeat that legacy monster! Guerilla refactoring with web standards
#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.

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

Matching moments

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The challenge of keeping up with modern CSS
07:46 MIN

The challenge of keeping up with modern CSS

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Featured Partners

Related Videos

See all videos
The year 3000, a brief history of Web Development25:30

The year 3000, a brief history of Web Development

Lorenzo Pieri

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

Frameworkless: How to use Web-Components in production?

Tobias Münch

Seven Myths, Three Reasons, One Goal46:48

Seven Myths, Three Reasons, One Goal

Stefan Priebsch

Interface Contracts in Microfrontend Architectures54:39

Interface Contracts in Microfrontend Architectures

Alexander Günsche

From boy scouting to redrawing the landscape30:01

From boy scouting to redrawing the landscape

Tim te Beek

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios24:47

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

Manfred Steyer

Best of the Worst – the most awful anti-features in JavaScript, ranked!27:06

Best of the Worst – the most awful anti-features in JavaScript, ranked!

Peter Kröner

Keep your code refactorable26:46

Keep your code refactorable

Gerrit Stapper

Related Articles

View all articles
DC
Daniel Cranney
The State of HTML 2024: What can we learn from it?
The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
The State of HTML 2024: What can we learn from it?

From learning to earning

Jobs that call for the skills explored in this talk.