Modernising Legacy Frontends: A Framework-Agnostic Facelift with Web Components

Every new system is a future legacy system in the making. As frontend engineers, we are often tasked with modernising ageing codebases while juggling delivery deadlines, budget constraints, and the ever-evolving landscape of frontend technologies. So, how do we breathe new life into legacy systems, without locking ourselves into yet another tightly coupled framework?

In this talk, I will share practical strategies for giving legacy frontend applications a framework-agnostic facelift using Web Components. Drawing from real-world experience, I will walk through how to build resilient, reusable user interface layers that can outlast the frameworks surrounding them. We will also explore how to navigate technical and contextual challenges, including search engine optimisation concerns and the nuanced impact of internet censorship policies. Whether you are maintaining a monolithic application or integrating into a micro-frontend ecosystem, this session offers a grounded approach to modernisation without compromise.

Transcript

2. Modernising Legacy Frontends: A Framework-Agnostic Facelift with Web Components Oluwatobi, Akanji Software Engineer (Frontend)
3. Frontend Development Scenarios Ideal versus Real
4. In the ideal scenario, • Upfront technology decisions • Standards are defined early • Preoccupied with building
5. In the real scenario, • Deal with technology choices made years ago (legacy systems) • Establish new standards around constraints • Focus on building and blending
6. Real Scenario Experience Task: Revamp the frontend of a Drupal site with content stretching as far back as 1997 Success Metrics: • No SEO score regression • Mirrors the new design system with reusable components • Completed within limited budget and time
7. Optimal Solution Mapping
8. Solution 1 Rebuild the whole site in Next.js Drupal Headless with Static Site Rendering Questions: • How will the site serve legacy content? • How feasible is a total rewrite given limited resources? • How will site security be handled seamlessly?
9. Solution 2 Maintain the current HTML structure but define CSS styling standards Questions: • How will legacy CSS clashes be resolved? • Can the components be reused in other web technologies? • How will new components needing interactivity, e.g Carousel, be handled?
10. Solution 3 Build the reusable components using web components and piece the components in Drupal Questions: • How will legacy CSS element selector clashes be resolved? • How can SEO benefits be realised? • How well can the team upskill considering constraints?
11. Solution 3 Build the reusable components using web components and piece the components in Drupal Reason Lower risk compared to other solutions Winning Solution
12. A web component is, • reusable, encapsulated piece of UI that works like a custom HTML element e.g. <my-button> • Shadow DOM; guards styles (no entry, no exit) • use <template> and <slot> for defining markup and content projection (like children in React). • Javascript
13. Problem Solved?
15. Law of Conservation of Energy “The energy of a closed system must remain constant—it can neither increase nor decrease without interference from outside” First Law of Thermodynamics
16. Law of Conservation of Energy “Energy can neither be created nor destroyed; it can only be transformed from one form to another” First Law of Thermodynamics
17. Wahala No Dey Finish “Problem can neither be created nor destroyed; it can only be transformed from one form to another” Nigerian Parlance
19. How will legacy CSS element selector clashes be resolved? Problem 1
20. Place the elements in the web component’s shadow dom and they are untouchable by rogue CSS. Fantastic! div { } p { }
21. How can SEO benefits be realised? Problem 2
22. • Parse the Javascript using Google bot ◦ crawl budget • Use Prerender to maintain a cached “prerendered” site ◦ cost on a site with content since 1997? <custom-component> </custom-component>
23. FreePik https://www.freepik.com/free-photos-vectors/chinese-red-dragon
24. • Site needs to be deployed in China • China’s popular search engine, Baidu, works best with static content The Great Firewall of China
25. Fix SEO Deployment Requirement • Use slots <slot> • Slots allow external content to be inserted into a component's Shadow DOM; SEO friendly • But external content can be modified by rogue CSS ◦ Back to Problem 1 ▪ How will legacy CSS element selector clashes be resolved?
27. Other Problems • Minimise Cumulative Layout Shift (CLS) on page display before Javascript rendering is completed ◦ Solution: Implemented minimal global CSS per component to style component pending JS render completion • Legacy CSS element selector clashes ◦ Solution: Hunted them down and modified the selectors
28. Even ThoughtWorks flagged web components as problematic in 2023 & 2024
30. More Problems • Form Elements ◦ Solution: ▪ Maintained forms which gives developers implementation autonomy using slots. ▪ Tested the form components in Vanilla JS, React, and Server-Side Rendered (SSR) technologies e.g. Laravel
31. Are you faced with similar constraints and problems?
32. Web Component Frameworks
33. UI Components Storybook
34. • Beyond Frameworks • Beyond Constraints • Beyond Problems Build Beyond Borders
35. References • https://www.thoughtworks.com/radar/techniques/web-co mponents-for-ssr-web-apps • https://prerender.io/blog/how-prerender-renders-javascrip t-websites/
36. Twitter: @AkanjiTobiS Oluwatobi, Akanji Software Engineer (Frontend) THANK YOU! LinkedIn: Oluwatobi Akanji