Migrating Pinterest profiles to React

Pinterest logo
Pinterest
•
Pinterest Engineering
•3 min read•beginner•
--
•View Original
JavaScriptPythonReact

Overview

The article discusses Pinterest's migration of its web framework from Backbone to React, focusing on the challenges and techniques used during the transition, particularly for Pinner profiles. It highlights the infrastructure preparation, the Denzel-React bridge, and the introduction of Higher Order Components for data fetching.

What You'll Learn

1

How to enable Nunjucks rendering on a NodeJS server for React migration

2

Why using a Denzel-React bridge facilitates incremental UI conversion

3

How to implement Higher Order Components for data fetching in React

Prerequisites & Requirements

  • Familiarity with React and server-side rendering concepts
  • Experience with Node.js and Nunjucks(optional)

Key Questions Answered

What challenges did Pinterest face while migrating to React?
Pinterest faced the challenge of migrating a constantly changing service used by millions without freezing product development. This was likened to changing an airplane's engines mid-flight, highlighting the complexity of the migration process.
How does the Denzel-React bridge work?
The Denzel-React bridge allows engineers to incrementally convert UI components to React by using React.render() and integrating React-specific bindings into Nunjucks templates, facilitating a smooth transition from legacy components.
What performance improvements were observed after migrating Pinner profiles to React?
After converting Pinner profiles to React, Pinterest observed a consistent increase in performance and engagement metrics, each improving by 20 percent, indicating the effectiveness of the migration.

Key Statistics & Figures

Performance improvement
20 percent
Observed after converting Pinners' profiles to React
Engagement improvement
20 percent
Measured alongside performance improvements post-migration

Technologies & Tools

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

Frontend
React
Used for building the new user interface components
Backend
Node.js
Enabled server-side rendering with Nunjucks
Templating Engine
Nunjucks
Facilitated client-side rendering and universal rendering

Key Actionable Insights

1
Implementing server-side rendering with Nunjucks on a NodeJS server can significantly enhance the migration process to React.
This approach allows for universal rendering, which is crucial for maintaining performance during the transition from Backbone to React.
2
Using Higher Order Components (HOCs) like withResource can streamline data fetching in React applications.
HOCs promote reusability and composability, making it easier to manage data across different components.
3
Incremental migration strategies, such as the Denzel-React bridge, can minimize disruption during large-scale framework transitions.
This method enables teams to continue developing new features while gradually updating existing components.

Common Pitfalls

1
Failing to account for ongoing product development during migration can lead to significant disruptions.
It's essential to implement a strategy that allows for continuous updates and feature releases while transitioning to a new framework.

Related Concepts

Server-side Rendering
Higher Order Components
Incremental Migration Strategies