Modernizing the Pinterest carousel: 90% less code with native CSS

Key Takeaways

[music] >> How do you build a web that inspires 600 million users? My name is Calvin. I'm a senior software engineer at Pinterest. I'm [music] tech lead for web on the close-up experience team. I'm Anuja. I'm the engineering manager for the close-up experience team. [music] Carousels are pretty core to the use case of Pinterest. We use carousels because it kind of is a good way to mix things up, break up the monotony of some of the other layouts. It [music] started off with maybe one team building the carousel over the few years. It probably became this Frankenstein of 2,000 lines of code with these different little flavors [music] from all different teams that were added, which was getting very difficult to maintain. When I was swiping through these carousels, it was like clunky, noticeable lag. You feel the jank in every scroll, and I heard there's a CSS carousel coming out. I was like, "Okay, well, I know [music] where we can use that." Converting the close-up carousels from JavaScript to CSS was pretty easy. The initial attempt didn't take too much work, a week at most. When I first prototyped it, it was way smoother right away. All the bits and pieces of the carousel were no longer blocked on the main thread. What we wanted to do is run AB tests so we can grab some metrics and see how it was actually performing. We run a small >> [music] >> portion of our user base on the new experience, and the rest still using the old [music] code, which was the 2,000 lines of custom carousel code. >> We saw massive performance gains as well as some engagement wins as well. We were able to reduce 2,000 lines of JavaScript to [music] 200 lines of CSS, which is a 90% drop. >> We also saw 15% improvements in just page [music] load time in general. Once we saw that, we decided to ship the experiment all the way to 100%. The next step was trying to [music] replace any of the existing use cases of the carousel on the Pinterest webpage. [music] We worked with the home feed team, the shop the look team, the search team, the boards team. >> Now, when a user goes to the carousel, there's not going to be jank. Everything is really performing all the time. There are so many new experiences that are going to be possible with CSS, so it's kind of exciting to see the direction being set. I was experimenting with other features like view transitions. Before, if you wanted to get animation like this, you'd have to bring in some other heavier libraries. We don't do heavy libraries at Pinterest. We just live without the experience. Trying it out for the first time is like very easy. Drop in property name CSS, and it was working. And [music] you have to call start view transition. It's really cool to see the native animations with not too much work. [music] We've been able to truly experiment and innovate on web this year. The web is capable of anything. Whatever you imagine, you can [music] build it on the web.