#441: Legacy Systems and UX Migration

How to manage legacy code base, UX migration, redesign and how to design with legacy systems. Issue #441 • Jan 30, 2024 • [View in the browser]( [Smashing Newsletter]( Labą dieną Smashing Friends, Legacy isn’t the most exciting matter in front-end or UX. We often speak about shiny new things, yet most products around run on legacy systems. These systems are slow, bulky, broken and unmaintained — but often business-critical, with a huge ecosystem of legacy dependencies on their own. In this newsletter, we look into legacy — how to rebuild, refactor, redesign and migrate, both for front-end engineers and for UX designers. If you are working with legacy systems, hopefully you’ll find a few useful gems in there. [Meets: the Future of Design Systems]( Smashing Meets [Future of Design Systems]( on Tuesday, Feb 27. In the Smashing universe, we’ve just announced a few new (and free) community events — on [The Future of Design Systems]( with Brad Frost and [The Magic of CSS]( with Kevin Powell. We’d be absolutely delighted to see you there. And as always, here’s a little reminder about a few thingies we’ve been tirelessly working for 2024: - [Free Workshop: Designing Search UX In 2024]( 🌎 with Vitaly Friedman — Feb 29 - [New Online Workshops]( on UX, design and front-end. - [SmashingConf Freiburg 2024]( 🇩🇪 — The Web, Sep 9–11 - [SmashingConf NY 2024]( 🇺🇸 — Front-End & UX, Oct 7–10 - [SmashingConf Antwerp 2024]( 🇧🇪 — UX, Oct 28–31 Have a productive week, everyone — and hopefully you won’t have to struggle with legacy too much! — [Vitaly]( --------------------------------------------------------------- 1. Understanding Legacy Code We all have to deal with legacy code, and let’s be honest, it’s hard. To help you tame messy codebases without breaking anything, Nicolas Carlo started “[Understand Legacy Code]( a collection of articles, guides, books, podcasts, and talks for refactoring code you’re afraid to change. [Understand Legacy Code]( Whether you’re about to dive into a large, undocumented codebase, aren’t sure if a pattern will make the code more maintainable, or you feel you’ve hit the point of no return where burning it all and starting all over seems like the best option, Nicolas has got your back. His guide also dives deeper into questions like what you can do to make others care about the technical debt that is piling up and how AI could help tame legacy codebases. One for the bookmarks. (cm) --------------------------------------------------------------- 2. Legacy System Modernization Legacy systems are everywhere, and even though their technology is outdated, they power critical day-to-day operations. Think of the pager still in use in healthcare today, for example, or federal organizations relying on old software. And while changing a legacy system also brings along risks, the effort is well worth it. [Legacy System Modernization]( A great starting point for tackling legacy systems and transforming an enterprise for a digital future is the [whitepaper]( that AltexSoft published. It dives deep into legacy system modernization, the challenges it brings along, and best practices for solving them. Another comprehensive [guide to a UX-based overhaul of legacy building products]( comes from UX design agency Koru. It helps you understand the business value of your legacy application and explores three different approaches to making it more efficient, scalable, and safer. (cm) --------------------------------------------------------------- From our sponsor Kiss Bugs Goodbye With Fully Automated End-To-End Test Coverage [QAWolf]( [QA Wolf]( gets web apps to 80% automated test coverage in less than 4 months. They build and maintain your automated test suite, plus provide unlimited parallel test runs. Skeptical? A case study shows how Salesloft [saves $750k/year]( in QA engineering + executes 300+ tests in parallel on every PR in minutes. ⭐ Rated 4.8/5 on G2. Trusted by Cohere, Napster, Gumroad, and many others. [Schedule a demo to learn more](. --------------------------------------------------------------- 3. Improving A Legacy Codebase Probably every developer has been there before: You’re confronted with a legacy codebase and need to turn it into a healthy, maintainable project that doesn’t hinder your work. Where do you begin? Jacques Mattheij shares a [roadmap]( that takes you through the complete process step by step — from making a backup to releasing your changes into production. [Five steps for managing legacy code]( Jack Franklin also wrote a practical [five-step guide to tackling legacy code](. It helps teams prioritize updates and follow an incremental approach instead of a “big bang” release. A great reminder that legacy code is not a failing of an individual or a team and that we should learn to embrace it as an interesting technical challenge. You want to dig even deeper into improving legacy codebases? Then Michael C. Feathers’ book [Working Effectively with Legacy Code]( and Martin Fowler’s [Refactoring: Improving the Design of Existing Code]( might be for you. (cm) --------------------------------------------------------------- 4. Upcoming Workshops and Conferences That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s a quick overview: - [Figma Workflow Masterclass]( Workflow with Christine Vallaure. Feb 1–9 - [Live Interface Design Patterns UX Training (Spring 2024)]( UX with Vitaly Friedman. Mar 8 – Apr 5 - [Resilient & Maintainable CSS]( Dev with Miriam Suzanne. Feb 26 – Mar 12 - [Scalable CSS Masterclass]( Dev with Andy Bell. May 9–23 - [Smart Interface Design Patterns Video Course]( UX 10h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 5. UX Migration Strategy For Legacy Applications Planning ahead and putting users first is key to successfully migrating a legacy application. To help you master the challenge, Tamara Chehayeb Makarem shares her [UX migration strategy for legacy applications](. It goes beyond simply moving existing features to a new system and instead helps you build a strategic system that supports your business goals. [UX Migration Strategy for Legacy Applications]( Tamara’s strategy consists of three steps. In the first step, you’ll identify the reasons for the migration and its impact on users. The second step involves choosing the best migration option for your context. Finally, the third step is all about outlining your goals and planning your strategic roadmap. A handy set of guidelines to help you ensure your new system is adopted and welcomed by users. (cm) --------------------------------------------------------------- From our sponsor Manage Your Projects And Resources With Our Modern Web Component Suite [Bryntum]( By integrating with Angular, React and Vue or plain vanilla JS apps, the web can be a powerful application platform. [Bryntum]( provides advanced UI components and dev tools for over 5000 companies in 70+ countries. [Download your trial today](. --------------------------------------------------------------- 6. Designing With Legacy Having faced legacy in all major career assignments, Peter Zalman knows from experience that there is no single correct approach to dealing with decades-old product legacy. But a few common patterns can help teams make the right decisions, as he points out in his article “[Designing With Legacy]( [Designing With Legacy]( In the article, Peter highlights the risks that a complete redesign and continuous improvements can bring along, putting special focus on an aspect that can easily be overseen: the users’ emotional attachment to the existing product. The article is also a great reminder that you’re not only dealing with a legacy product but also with a knowledge base that has grown over years and that can’t just be replaced with a shiny new design concept. A must-read to prevent you from hasty decisions that could do more harm than good. (cm) --------------------------------------------------------------- 7. News From The Smashing Library 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in February. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 8. Recent Smashing Articles - [CSS Blurry Shimmer Effect]( - [The AI Dilemma In Graphic Design: Steering Towards Excellence In Typography And Beyond]( - [The Complex But Awesome CSS border-image Property]( - [Top Front-End Tools Of 2023]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](