Rebuilding the Shopify Admin: Deleting 28,000 lines of JavaScript to Improve Dev Productivity

6 minute read This September, we quietly launched a new version of the Shopify admin. Unlike the launch of the previous major iteration of our admin, this version did not include a major overhaul of the visual design, and for the most part, would have gone largely unnoticed by the user. Why would we rebuild our admin without providing any noticeable differences to our users? At Shopify, we strongly believe that any decision should be able to be questioned at any time. In late 2012, we started to question whether our framework was still working for us. This post will discuss the problems in the previous version of our admin, and how we decided that it was time to switch frameworks.

Shopify logo
Shopify
•
Jaime Woo
•7 min read•intermediate•
--
•View Original
AngularCoffeeScriptJavaScriptMVCRailsRuby

Overview

The article discusses Shopify's decision to rebuild its admin interface by removing 28,000 lines of JavaScript code to enhance developer productivity. It highlights the challenges faced with the previous in-house framework, Batman, and the benefits of transitioning to a simpler architecture with server-side rendering.

What You'll Learn

1

How to identify and address performance issues in a JavaScript framework

2

Why simplifying codebases can improve developer productivity

3

When to consider switching frameworks in a software project

Prerequisites & Requirements

  • Understanding of JavaScript frameworks and their performance implications
  • Experience with server-side rendering concepts(optional)

Key Questions Answered

What were the main challenges faced with the Batman framework?
The Batman framework led to significant memory leaks, performance issues, and a complex codebase that hindered developer onboarding and productivity. The duplication of business logic across both client and server sides created ambiguity and maintenance difficulties, ultimately necessitating a framework change.
How did Shopify improve its admin interface?
Shopify improved its admin interface by removing Batman and adopting a simpler architecture with ERB views and server-side rendering. This transition reduced the JavaScript codebase significantly, enhancing developer productivity and allowing for faster feature rollouts.
What was the impact of the new admin on developer productivity?
The new admin architecture led to quicker turnaround times for new features and improved onboarding for developers. The reduction in code complexity allowed for better team collaboration and ownership of different sections of the admin interface.
What specific improvements were made to the codebase?
The codebase saw a reduction of 2.5MB in the minified JavaScript bundle, with over 28,000 lines of CoffeeScript replaced by under 15,000 lines. Additionally, the JavaScript test suite was cut from nearly 30,000 lines to under 7,500 lines, and over 4,000 lines of Ruby were eliminated.

Key Statistics & Figures

Reduction in minified JS bundle size
2.5MB
Decreased from 4.1MB to 1.6MB
Lines of CoffeeScript removed
over 28,000 lines
Replaced with under 15,000 lines, reducing client-side code by about half
Lines of CoffeeScript in test suite
under 7,500 lines
Reduced from just shy of 30,000 lines
Lines of Ruby eliminated
over 4,000 lines
Significant reduction contributing to a cleaner codebase

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
Javascript
Previously used in the Batman framework and now in a lightweight custom binding system
Backend
Ruby On Rails
Used for server-side rendering in the new admin architecture

Key Actionable Insights

1
Regularly evaluate the frameworks and technologies used in your projects to ensure they meet current needs.
As seen with Shopify's transition from Batman, frameworks can become burdensome over time. Periodic assessments can help identify when a shift is necessary to maintain productivity.
2
Focus on reducing code duplication to enhance code maintainability and developer onboarding.
Shopify's experience shows that simplifying the codebase not only speeds up development but also makes it easier for new developers to understand and contribute effectively.
3
Encourage open communication within teams to challenge existing solutions and foster innovation.
Shopify's culture of questioning the status quo led to significant improvements in their admin interface, demonstrating the value of a collaborative and open-minded approach.

Common Pitfalls

1
Relying on complex frameworks without regularly assessing their effectiveness can lead to decreased productivity.
As demonstrated by Shopify's experience with Batman, frameworks can become outdated or burdensome, necessitating a reevaluation of their use to maintain efficiency.