Open Source at Facebook

Kathy KamHEAD OF OPEN SOURCE

PyTorch Buck Reason Yoga Zstandard Infer IGListKit Litho

HHVM fresco ComponentKit React Native Profilo Duckling pop Docusaurus

Proxygen Hack Presto Flow Immutable-JS GraphQL Flipper Hermes

React Redex RocksDb McRouter Jest osquery ProphetCreate React

App

450+ Projects

Linux

Blockchain

Security

Developer Operations

DataInfrastructure

Virtual Reality

Front End (Android, iOS, Web)

Development Tools

Languages

Artificial Intelligence

Focused on

Developers

Designed for

Scale

Built with

Community

Focused on

Developers

Designed for

Scale

Built with

Community

PyTorchDeep Learning Platform for

Research and Production

AI ML DL

AI/ML Primer

AI/ML Workflow

Deploy Model for Inference

Build & Train Model

Get & PrepareData

Translation Spark AR Oculus VR Blood Donations

Predictions Per Day

Research to Production at FacebookTHE PREVIOUS PROCESS

R E S E A R C H P R O D U C T I O N

Focused on

Developers

Designed for

Scale

Built in

Community

React NativeBuild Mobile Apps with React

60,000 apps include the React Native framework.

Source: Bugsnag

CASE STUDY

Marketplace

Benefits for Marketplace

• React Ecosystem

• Iteration Speed

• Cross-Platform Code Sharing

1 in 3People in the US use

Marketplace every

month

Marketplace StartupH2 2017

Startup Time

Fast H2 2017

Marketplace StartupH2 2017

network + server native render

js + renderreact native startup pre-render js

Marketplace Startup

network + server native render

js + renderreact native startup pre-render js

// index.js

const MarketplaceFeed = require('./MarketplaceFeed');

const MarketplaceItemDetails = require('./MarketplaceItemDetails');

const SafetyCheck = require('./SafetyCheck');

const CityGuides = require('./CityGuides');

// ...

// index.js

const MarketplaceFeed = require('./MarketplaceFeed');

const MarketplaceItemDetails = require('./MarketplaceItemDetails');

const SafetyCheck = require('./SafetyCheck');

const CityGuides = require('./CityGuides');

// ...

const MarketplaceFeed = require('./MarketplaceFeed');

Marketplace Startup

network + server native render

js + renderreact native startup pre-render js

Marketplace Startup

network + server native render

js + renderreact native startup pre-render js

Marketplace Startup

native render

js + renderreact native startup pre-render js

network + server

Marketplace StartupH1 2019

react native startup pre-render js

network + server

native render

js + render

HermesJavaScript Engine Optimized for

React Native

TTI

Time to Interaction

APK

Application Size

Memory

Memory Utilization

Primary Mobile Metrics

TTI

Time to Interaction

APK

Application Size

Memory

Memory Utilization

Primary Mobile Metrics

Stock RN: 4.30s

Hermes RN: 2.01s

Stock RN: 185mb

Hermes RN: 136mb

Stock RN: 41mb

Hermes RN: 22mb

2.29s 19mb 49mb

Focused on

Developers

Designed for

Scale

Built in

Community

ReactA Declarative Way to Build UI

React Developers

1,800,000+

Source: Chrome Web Store

Top contributors on GitHub

Source: octoverse.gi thub .co m /pro jec t s

Responded to almost 500 issues and closed about 300

Merged over 600 PRs

Focused on

Developers

Designed for

Scale

Built in

Community

Designed for

Scale

Built in

CommunityFocused on

Developers

Open Source TeamAdvocacy Tooling

Narrative and

RoadmapContent Engagement

Narrative and

RoadmapContent Engagement

Narrative and

RoadmapContent Engagement

Repo

Profile Page

Automated

Checkup

Stack

Overflow

Integration

DocusaurusEasy to create and maintain open

source documentation websites

Features

Markdown

Save time and

focus on your

project's

documentation

Features

Search

Make it easy for

your community

to find they need

Markdown

Save time and

focus on your

project's

documentation

Features

Search

Make it easy for

your community

to find they need

Localization

Translate your

docs into over 70

languages

Markdown

Save time and

focus on your

project's

documentation

Features

Localization

Translate your

docs into over 70

languages

React

Change the look

and feel of the

website using

React

Search

Make it easy for

your community

to find they need

Markdown

Save time and

focus on your

project's

documentation

Features

Versioning

Support users on

all versions of

your project

React

Change the look

and feel of the

website using

React

Localization

Translate your

docs into over 70

languages

Search

Make it easy for

your community

to find they need

Markdown

Save time and

focus on your

project's

documentation

opensource.facebook.com

For more information:

Thank You!