As much as we love rebuilding projects from scratch, often it’s way too expensive and way too time-consuming. Yet the
technical debt is there, so eventually we roll up our sleeves and launch a big-bang refactoring project, or perhaps a migration story from one system to another.
But where do we even start? And how do we architect our front-end to make the transition smooth? In this newsletter, we explore
refactoring and migration, with some case studies and tools to help you get off the good start. Our new free workshop on how to migrate from WordPress to a headless CMS, with Alba Silvente.
If you’re interested, we also have a
free online workshop by Alba Silvente and Christian Zoppi on How to Migrate From WordPress To A Headless CMS. In the workshop, Alba and Christian will show how to migrate content from WordPress and create reusable blocks and custom workflows with a headless CMS, powered by our good friends at storyblok.
In the meantime, let’s take a look at some useful case studies that hopefully will help you save time and avoid headaches.
— Vitaly ( @smashingmag) 1. Gorillas: A Navigation Case Study
A React-based solution that uses Next.js to build pages and deploy them statically with Netlify. That’s the foundation of the new
Gorillas website. The site itself is rather simple with only a couple of pages and not much interaction, its main goal is rather to showcase Gorillas’ branding as the service expands across Europe. However, there’s an aspect that is worth taking a second look at: navigation.
Kitty Giraudel shares an interesting
case study about how the navigation on the site came to be. Designed as a dropdown, it relies on
So you’d like to finally
Rather than partially migrating file by file and fixing type errors, the team went all-in by taking the entire codebase and
moving it to TypeScript at once and adding some
any types and
@ts-ignore comments to avoid compilation errors. Along the way, they built
ts-migrate, a tool for migrating a frontend app to TypeScript which you can use as well. The article also hightlights many fine details of migration and other tooling the team has built to avoid unexpected surprises.
You can also
watch a talk by Brie Bunge about the migration, or take a look at a simple guide for migrating from JS to TS, a brief overview of pros and cons along with a series of 15 video clips by Jeremy Likness. Hopefully, this should have you covered! (vf) 3. Automating Refactoring With VS Code
If you want to save you precious time or feel that the refactoring process itself is overwhelming, there’s a useful little VSCode extension that does the job for you:
You might have heard it: we run
online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. 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. Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.
For example, we have Rémi Parmentier’s workshop on
building modern HTML emails. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops. 5. Refactoring CSS And Going Headless
duplicate code, unused selectors, unnecessary hacks — we’ve all dealt with CSS codebases that had technical debt like this before. To prevent it from accumulating and causing severe issues down the line, it might be a good idea to consider refactoring.
If this idea sounds daunting to you, Adrian Bece wrote an article series in which he shares tips for tackling the challenge: from auditing a
CSS codebase’s health, discovering its weaknesses, and convincing management to invest time and resources into the process in part 1 to planning out the refactoring strategy in part 2.
If you’re wondering if it might make sense for your project to migrate to a headless setup to improve performance further and gain more control over the application, Alba’s article has got you covered. She shares a
step-by-step guide on how to migrate WordPress to Storyblok Headless CMS, why you might want to do it in the first place, the problems that could arise during the migration process and how to deal with them. (cm) 6. Tips For Migrating To Next.js
Do you plan to
migrate your React app to Next.js but you don’t know where to start? Bernadetta Fryczkowska wrote a helpful article in which she explains why and how to migrate to Next.js. Perfect for developers who aren’t familiar with Next.js yet, Bernadetta shares an overview of Next.js and its advantages before she guides you step by step through the migration process.
During the migration process, you might encounter specific use cases in your application that aren’t covered in the official documentation or a migration guide. For those instances,
Rinat Rezyapov’s article might be of great help. He shares his experience from migrating projects to Next.js and covers things like folder structure refactoring, importing charts and animations that use Web API, or storing authentication tokens. Two for the bookmarks. (cm) 7. Scaling Microsites With Next.js
How do you adapt non-SSR friendly code into a multi-tenanted service that scales to almost every microsite? This was the challenge that the team at Smallcase faced. Shubham Singh recently published a
case study in which they share insights into their migration to Next.js.
The case study dives deeper into the migration process itself and issues they faced along the way, their
new microsite architecture, and the overall benefits they observed with Next.js: improved SEO, better performance, improved Web Vitals, out-of-the-box TypeScript support, and improved developer velocity and productivity. A great overview of using Next.js at scale. (cm) 8. Front-End Case Studies
How does a framework or technology solve
real-world problems? And how does it work at a large scale? Case studies are the best way to get answers to questions like these. Andrey Romanov curated a list of technical talks and articles about real-world enterprise front-end development.
From companies ranging from Airbnb and Atlassian to Zynga and 1Password and topics covering everything from
migration and refactoring to managing design tokens and testing the accessibility of emails, the list is a treasure chest for every developer. (cm) 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).