Unknown Title

Key Concepts

• CSS Scroll Snap: A CSS module that allows for well-controlled scrollable containers, replacing complex JavaScript-based carousel logic.
• Main Thread Blocking: A performance bottleneck where JavaScript execution prevents the browser from rendering frames, leading to "jank."
• Jank: Visual stuttering or lag in UI animations caused by dropped frames.
• View Transitions API: A browser-native API that enables smooth transitions between different states of the DOM without heavy external libraries.
• Code Debt: The accumulation of "Frankenstein" code (2,000+ lines) that becomes difficult to maintain and performant-heavy.

---

1. The Problem: Technical Debt and Performance Issues

Pinterest’s "Close-up" experience team faced significant challenges with their legacy carousel component. Over several years, multiple teams contributed to the codebase, resulting in a "Frankenstein" component consisting of over 2,000 lines of JavaScript.

• Performance Impact: The legacy implementation suffered from noticeable "jank" and lag during scrolling.
• Technical Root Cause: Because the carousel logic was handled via JavaScript, it frequently blocked the browser's main thread, preventing smooth frame rendering.

2. The Solution: Transitioning to CSS-Native Carousels

Calvin Chhour (Senior Software Engineer) and Anuja Shah (Engineering Manager) led an initiative to replace the JavaScript-heavy carousel with native CSS functionality.

• Methodology: The team utilized CSS Scroll Snap to handle the carousel behavior.
• Implementation: The transition was remarkably efficient, taking approximately one week to prototype.
• Code Reduction: The team successfully reduced the codebase from 2,000 lines of JavaScript to 200 lines of CSS—a 90% reduction in code volume.

3. Performance Metrics and A/B Testing

To validate the transition, the team conducted A/B testing by splitting the user base between the legacy JavaScript version and the new CSS-based version.

• Performance Gains: The CSS implementation removed the main thread dependency, resulting in significantly smoother scrolling.
• Page Load Time: The team observed a 15% improvement in overall page load times.
• Engagement: The performance improvements correlated with positive engagement wins, leading the team to roll out the feature to 100% of the user base.

4. Scaling and Cross-Team Collaboration

Following the success of the "Close-up" team, the new CSS carousel architecture was adopted across other Pinterest product areas:

• Home Feed
• Shop the Look
• Search
• Boards

5. Future Innovation: Native View Transitions

The team is now exploring the View Transitions API to enhance UI interactivity without relying on heavy third-party libraries.

• Technical Implementation: The process involves using the document.startViewTransition method.
• Advantage: This allows for complex, native-feeling animations that were previously avoided due to the performance cost of external libraries. As Chhour noted, "We don't do heavy libraries at Pinterest. We just lived without the experience [until now]."

6. Key Perspectives and Conclusion

• Engineering Philosophy: Anuja Shah emphasized that the web is capable of high-level innovation, stating, "Whatever you imagine, you can build it on the web."
• Strategic Takeaway: By leveraging native browser capabilities (CSS and native APIs) over custom JavaScript logic, Pinterest achieved a leaner, faster, and more maintainable codebase. This shift not only improved technical performance but also enabled the team to implement sophisticated UI features that were previously deemed too "heavy" for their performance standards.