React at Meta Connect 2024

Blair Vanderhoof

At Meta, React and React Native are more than just tools; they are integral to our product development and innovation. With over five thousand people at Meta building products and experiences with …

Overview

The article discusses the integration of React and React Native at Meta, highlighting their significance in product development and innovation. It showcases various projects, including the re-built Instagram and Facebook for Meta Quest, the Meta Horizon mobile app, and the Meta Spatial Editor, emphasizing performance improvements and developer experiences.

What You'll Learn

1

How to leverage React Native for building immersive mixed reality applications

2

Why code sharing technologies enhance development efficiency in large projects

3

How to optimize app performance using React Native DevTools

4

When to use the Meta Spatial SDK for creating 3D experiences

Prerequisites & Requirements

Familiarity with React and React Native concepts
Experience with Android development tools(optional)

Key Questions Answered

How did Meta re-build Instagram and Facebook for mixed reality?

Meta re-built Instagram and Facebook for mixed reality on Meta Quest by leveraging React Native to create immersive experiences. This approach allowed for rapid iteration and the integration of new input types and gestures, ensuring high-quality interactions that align with the brand's focus on user experience.

What performance improvements were achieved with the Meta Horizon app?

The Meta Horizon app demonstrated significant performance improvements, exceeding expectations by initializing React Native at app start, which allowed for faster load times and smoother interactions. This optimization was benchmarked against the Facebook Marketplace app, showcasing the app's efficiency.

What technologies support code sharing in Meta's projects?

Meta utilizes several technologies for code sharing, including StyleX and React Strict DOM. These tools enable teams to reuse complex features from existing platforms, reducing development time and allowing for a focus on new interactions specific to Meta Quest.

How does the Meta Spatial Editor enhance 3D experience development?

The Meta Spatial Editor allows developers to create immersive experiences for Meta Horizon OS using familiar Android languages and tools. It enables visualization and editing of scenes directly, which is crucial for developing engaging 3D environments, leveraging the glTF standard for asset management.

Key Statistics & Figures

Number of people using React at Meta

Over five thousand

This statistic highlights the scale at which React is integrated into Meta's product development processes.

Technologies & Tools

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

Frontend

React

Used for building user interfaces across various platforms at Meta.

Frontend

React Native

Utilized for developing mixed reality applications and enhancing mobile app experiences.

Backend

Meta Spatial SDK

Enables developers to create immersive experiences for Meta Horizon OS.

Frontend

Stylex

Facilitates code sharing and styling across different applications.

Frontend

React Strict Dom

Supports complex feature integration and code sharing in Meta's projects.

Key Actionable Insights

1
Utilize React Native for rapid development of mixed reality applications to enhance user engagement.
React Native's capabilities allow for quick iterations and robust animations, making it ideal for creating immersive experiences that leverage unique input methods in mixed reality environments.

2
Implement code sharing strategies to streamline development processes across multiple platforms.
By reusing code from existing applications, teams can focus on enhancing user experiences rather than duplicating efforts, leading to faster project timelines and improved product quality.

3
Leverage performance profiling tools like React DevTools to identify and address bottlenecks in app performance.
Using tools to profile applications can lead to significant performance enhancements, especially in complex applications where responsiveness is critical for user satisfaction.

Common Pitfalls

1

Failing to optimize network queries can lead to slow application performance.

This often occurs when network requests are initiated too late in the rendering process. By moving network fetches to earlier stages, as demonstrated in the Meta Horizon app, developers can significantly enhance load times and responsiveness.

Related Concepts

Mixed Reality Development

Performance Optimization In Mobile Apps

Code Sharing Techniques In Software Engineering