Revamping Your UI Framework: A Proven Approach to Success
Replacing your UI framework can be a daunting task, but with the right strategies, you can conquer this behemoth project. At Retail Zipline, we successfully migrated 650 views with a core team of three in under two months. Here’s how we did it.
Aligning with Company Goals
Before diving into the project, define your objectives. Ask yourself:
- Why replace the framework?
- Who does the project serve?
- Is it team-focused or customer-focused?
Having clear goals will guide your project and help you prioritize what to focus on.
Breaking Down the Work
Divide the project into smaller, manageable tasks. Identify what can be excluded entirely and what can be released in stages. This approach will help you ship faster and maintain momentum.
Choosing the Right Framework
Select a framework that meets your project’s demands and fits your team’s workflow. We chose Bootstrap 4 due to its compatibility with IE 11 and its ease of use for our small frontend team.
Setting Up for Success
Create a separate views_v2 folder and a view resolver that renders the new view and falls back to the old one. This setup allows you to work on the new framework without disrupting the existing application.
Automating the Upgrade
Manually rewriting every view is a tedious process. Develop tools to automate the process, such as a status checker, automated name replacement, and feature flags. These tools will significantly reduce the time and effort required to complete the project.
Team Working Conventions
Establish clear working conventions with your team. Set weekly goals, communicate task assignments, and define a “getting help” agreement to ensure everyone is on the same page.
Working Through the Project
Start small, focusing on a self-contained area to get familiar with the new framework. Break down tasks into manageable chunks, and prioritize migrating views. Keep PRs focused, and take the opportunity to organize your codebase as you see fit.
Consolidation and Completion
As you near the end of the project, consolidate emerging framework conventions and remove old views and tooling. This final step will give you a sense of accomplishment and a fresh, new codebase.
By following these steps, you’ll be well on your way to successfully replacing your UI framework and achieving your project goals.