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.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
04:23 MIN
Applying the strangler fig pattern to legacy apps
Interface Contracts in Microfrontend Architectures
04:00 MIN
The web's foundational principle of backward compatibility
Future-Proof CSS
02:29 MIN
How to migrate legacy projects to a clean architecture
Building software that scales with Typescript
01:16 MIN
Using web components to migrate legacy applications
Frameworkless: How to use Web-Components in production?
03:06 MIN
Project status, roadmap, and future web standards
Web-Fragments: incremental micro-frontends migration approach for enterprise
07:21 MIN
Contrasting minimalist code with modernizing legacy applications
The weekly developer show: Boosting Python with CUDA, CSS Updates & Navigating New Tech Stacks
05:41 MIN
Q&A: Gaining buy-in and modernizing legacy applications
An Architect’s guide to reducing the carbon footprint of your applications
02:05 MIN
Balancing consistency with rebuilding over refactoring
Micro Components - a different approach to a simpler component-based webThere has been a lot of heated discussion lately in the web community about component based development. One side argued that Web Components are a standard we should follow whereas others complained that they still lag behind in what frameworks offer...
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 ...
Chris Heilmann
Dev Digest 133 - Back to FrontNews and ArticlesWeAreDevelopers LIVE WebDev Day is on Wednesday, 18/11/2024. Learn about Design-first APIs for UI components, the JavaScript event loop, the Secret sauce behind pattern matching and Vision for websites as well as win a chance to take...
25:30
46:39
46:48
54:39
30:01
26:51
26:46
58:52
