Meet the Developers - React @ Meta Edition (Blair Vanderhoof)

For today's interview, we have Blair Vanderhoof, a front end engineer on the Facebook Marketplace Team at Meta. His team works to continually improve the Facebook Marketplace app so users can find, buy, and sell items.

Tell us about yourself.

My name is Blair Vanderhoof. I’ve been at Meta for 9 years as a front end developer. I’ve worked with JavaScript and built out UI at various startups–and big companies like Skype–for nearly 17 years and have always had a passion for all things front end.

I originally started at Meta building the send-money feature in Messenger for Facebook.com and Messenger.com, a user experience written entirely in React.js and Flux. React was in its early days in 2014, but still incredible to work with, especially with the opportunity to build a 0-to-1 feature on the main website. I had previously been using Backbone.js for 3 years at Skype and this was my first time building something beyond a simple to-do app using React.js. Originally, the team had chosen to build out the UI using XHP, our server side rendering language at the time, but given my desire to really build out a fantastic and interactive money-sending experience, I chose to use React.js and make the experience entirely client driven: from entering a debit card and formatting data as you typed, to creating a custom input to show the amount, and adapting the UI to work with Messenger.com theming.

After launching the send-money feature on the web in 2015, I started working on Facebook Marketplace for mobile, which was an early adopter of React Native. I have continued to work on Facebook Marketplace for the past 7 years, building out rich features, complex UX, and continually improving UI performance using React Native.

In what capacity have you been using React?

I have been using React to develop rich and interactive applications not only on the web, but also most recently on mobile using React Native. React Native is the best of both worlds: You get to create UI for millions of users on mobile, and leverage innovative design patterns like gestures and animations, all while using JavaScript and React.js. I’ve built everything from seller tools like our seller hub surface on Facebook Marketplace to complex interactions such as the shared transition and dismissal gesture for our product details page. I try to use React whenever possible and rarely write native code as I prefer to have full control over the UI using JavaScript.

What are some of the projects that you’ve worked on at Meta that use React?

At Meta, I built the send-money feature in Messenger from the ground up both on Facebook.com and for reuse on Messenger.com. I’ve also built many features and surfaces for Facebook Marketplace on mobile using React Native, such as our product details page transition animation, seller hub, feed item UI, “You” surface, and many others. React Native enables me to move incredibly fast given all the benefits of React.js, such as declarative UI, hooks for code reuse and sharing data fragments from Relay, and data sharing patterns via context.

Why did your team choose to use React and how does using React help you and your team achieve your development goals?

React already had great adoption at Facebook when I joined in 2014, but there was still an option to build out UI in XHP, a server side framework. At the time, most of the team was used to XHP for UI, so it took some convincing that a pure client-side React driven UI was warranted. Originally the proposed UI for the send-money feature was simple enough to be rendered server side, but given my passion for building rich applications, I tried to extend the scope and design to accommodate more fluid interactions such as inline formatting of debit cards, managing cards on file, and validation of inputs. After showcasing how delightful a client-side experience could be in React, we expanded the team to other engineers who added more capabilities to the feature set, such as adding memos and integrating our UI into other commerce use cases.

For Facebook Marketplace, the team had already started building out the feature set using React Native and became an early adopter of the framework, working directly with the React Native infra team to support new use cases and grow the feature set. React Native has been instrumental in the growth of Facebook Marketplace and our ability to move fast, yet design rich and interactive UIs that help meet the needs of both buyers and sellers.

What have you been excited about or incredibly proud of lately?

I’ve been most excited about our recent efforts in Facebook Marketplace to revamp our codebase to modern React and best practices. Facebook Marketplace dates back to 2015, and at that time, React.Class was the dominant way to create components. That, coupled with early usage of Relay, resulted in a lot of code that was difficult to maintain and grow as our product expanded and more engineers contributed. Recently, we’ve started dedicated efforts to rebuild from scratch core surfaces using the most modern and best practices of React possible. This includes creating many reusable functional components, avoiding monolithic files, making heavy use of hooks to reuse both Relay fragments and stateful logic, and context to thread data to leaf components without prop drilling. Our code is becoming much simpler and hooks are a big reason why.

Is there something especially exciting about being a React developer at a company like Meta?

Meta is a perfect company for a front end developer. Meta cares deeply about our front end engineering culture and gives opportunities to engineers who have a deep understanding of user problems and a passion for finely crafted code and UI. The opportunity to write React day in and day out is a really amazing benefit of working here. In addition, I get the support of every expert that works with React and React Native and additionally can give back by helping others in our community. It has been amazing to see not just React.js grow at Meta, but also the adoption of React Native and how its feature set and capabilities have improved over the years.

What’s energizing to you about working in the React space today?

I am most passionate about well written front end architecture that can scale. Designing code that can last and receive contributions from hundreds of engineers working on a common goal and product is a very difficult task, but one that can only be accomplished through years of experience and trial and error. React, and hooks especially, expose patterns for code reuse that were not possible at the time of React.Class without complicated wrappers such as higher-order components.

In addition to creating well crafted code that scales, I have been very passionate about animations, transitions, and gesture handling in React. I am continually improving the shared transition experience when tapping products on Facebook Marketplace where the image animates into our product details page. This makes use of the standard Animation library in React Native coupled with the PanResponder API to handle swipe-to-dismiss gestures that scale the image back to where you originally tapped for a delightful browsing experience. I am excited to continue making these complex interactions feel effortless to the user and to continually improve the performance and fidelity of these experiences.

What are some of the misconceptions about React or open source software development that you have encountered in your career?

In the front end developer community outside of Meta, I’ve seen many discussions around React being too complicated and introducing too many new features that have marred the original simplicity of the framework that many had grown to love. For myself, I have learned to enjoy the new APIs that have been introduced and go through the learning process to fully understand how they work and how to leverage them to make my development process more efficient. Hooks, for example, were definitely a tricky concept at first to understand, but I became an advocate very quickly as they essentially removed the need to ever write a terse class-based component again. Recent additions to React such as useTransition and suspense have added more opportunities to make my code performant and scalable without custom hacks and unmaintainable solutions. Overall, I have been impressed with the growth of the React framework and the features introduced always solve for real problems that I’ve faced when developing applications.

What are you excited to see in the future of React?

I’m honestly satisfied with what React offers today. Anything introduced in the future is just an extra bit of delight to improve my developer experience. However, I am always in anticipation of being surprised in the same way I was when hooks were announced. I look forward to many years of stability and performance using React to build complex client driven UI.

What resources are helpful in getting started using React? How about contributing?

The new documentation resources on React’s website are amazingly well written. I’d strongly recommend getting started with the tutorials and early concepts to understand how React works. However, the best way to learn React is by writing an application or feature with it. Take a hobby project or some open-source work you’ve built using vanilla JS or another framework, and rewrite the code using React. I think you’ll pick up the concepts much faster, especially coupled with the easily accessible documentation on the website. For contributing to React open source, I’d suggest finding an open issue in the repo that catches your eye, and seeing if you can debug through the problem and find a solution. Submitting something, even if it is not perfect, is a great way to get exposed to OSS work on a mature framework like React–especially working through comments and feedback requests that help elevate your solution.

Where can people find you and follow your work?

These days I have been primarily focused on making Facebook Marketplace an amazing experience at Meta, but you can find me on GitHub at https://github.com/bvanderhoof.

We would like to thank Blair for taking the time to do this interview. It was amazing to learn how React is being used to improve several major applications and how we are learning from all the things we build here and contributing back to the React community. We hope you found this interview useful and it gave you some insight into how and where React is being used at Meta.

About the Meet the Developers - React @ Meta series

React is one of the most popular open source projects and has consistently been ranked as one of the “most loved” web frameworks for the last several years. We at Meta believe that React is an outstanding library that helps developers build user interfaces easily and at scale. Used by millions of developers worldwide, in everything from simple websites to enterprise applications, React is an open source library with a place for everybody.

This blog is a part of our Meet the Developers series, where we invite the engineers and developers who use React on a regular basis to share their experiences and tell us about the amazing products that they are building using React here at Meta. Look out for more interview blogs where we meet with many more engineers and hear their thoughts on this topic.

To learn more about Meta Open Source, visit our open source site, subscribe to our YouTube channel, or follow us on Twitter, Facebook, and LinkedIn.

This article was written in collaboration with Blair Vanerhoof, a Software Engineer at Meta.