Revamping Your UI Framework: A Proven Approach to Success

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. For example, we chose Bootstrap 4 due to its:

• compatibility with IE 11
• 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.

// Example view resolver
function getView(version) {
  if (version === 'v2') {
    return renderNewView();
  } else {
    return renderOldView();
  }
}

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
• feature flags

These tools will significantly reduce the time and effort required to complete the project.

// Example automated name replacement script
const files = ['view1.html', 'view2.html',...];
files.forEach(file => {
  const filePath = `views_v2/${file}`;
  const fileContent = fs.readFileSync(filePath, 'utf8');
  const newContent = fileContent.replace('old-framework-class', 'new-framework-class');
  fs.writeFileSync(filePath, newContent);
});

Team Working Conventions

Establish clear working conventions with your team. Set:

• weekly goals
• task assignments
• 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.