React Native Accessibility - San Diego React and React Native Meetup
Open Source at Facebook - FINOS 2019/2019 Slides...React Change the look and feel of the website...
Transcript of Open Source at Facebook - FINOS 2019/2019 Slides...React Change the look and feel of the website...
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!