Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Facebookのフロントエンド開発
Search
boiyama
December 21, 2017
Technology
7
4.4k
Facebookのフロントエンド開発
We Are JavaScripters! @14th【初心者歓迎LT大会】
https://wajs.connpass.com/event/72611/
用のスライドです
boiyama
December 21, 2017
Tweet
Share
More Decks by boiyama
See All by boiyama
Reproのビジネスサイドを支えるJS
boiyama
0
170
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
250
2018年、IE6対応サイトを作る
boiyama
4
970
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
チームをCQRS
boiyama
1
1.5k
フロントエンドのサーバーレス SSR編
boiyama
0
680
Serverless for Front-end Server-Side Rendering
boiyama
1
95
Learning Elm in JS
boiyama
1
530
JSでElmを学ぶ
boiyama
0
89
Other Decks in Technology
See All in Technology
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
650
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
440
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
170
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
110
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.2k
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
9
1.5k
Pwned Labsのすゝめ
ken5scal
2
460
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
1k
How STYLIGHT went responsive
nonsquared
98
5.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Scaling GitHub
holman
459
140k
How GitHub (no longer) Works
holman
314
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Automating Front-end Workflow
addyosmani
1368
200k
Code Reviewing Like a Champion
maltzj
521
39k
Transcript
Facebookのフロントエンド開発 2017.12.21 We Are JavaScripters! @14th
My Profile @boiyaa @boiyaaaaaa Persol P&T Front End Engineer 最近ITスペシャリストとい
うクソダサい肩書きが付 きました。
最近のフロントエンドまわりの仕事ではReactを中心にFacebook の肩に乗っているので、 Facebookでのフロントエンド開発について調べてきました。
StackShareによると、 ライブラリ:React, Flux, Relay ユニットテスト:Jest プロジェクト管理:Phabricator CI: Jenkins IDE: Nuclide
https://stackshare.io/facebook/facebook
カスタマイズしたMercurialの単一リポジトリに全てのコードを格納 https://www.infoq.com/jp/news/2014/01/facebook-scaling-hg
・・・
・・・開発環境の記事がなかなか見つからない。。
OSSの技術についての記事は多いのですが、 Facebook自体の開発については、色々な記事でちょっとずつ言 及されている感じで、まとめるのがかなり大変。 ↓ 弟に聞くか
My Bro’s Profile facebook.com/sota050 Facebook, Inc. Front End Engineer 年収は兄の5倍
早速弟に確認 チームでの開発について公に出せる情報ある? →技術的なツールやワークフローの話ならOK
ということで聞いてきました Facebookの開発現場の作法
Q. パッケージ管理はやっぱりYarnなの? A. 全社でYarnを使っている。 しかしながら、Facebookは必要なモジュールを基本全部内製 していて、しかも単一リポジトリなので落とせば全部入ってるか ら、あまり使う機会がない
Q. Facebook製のものしか使えないの? A. 強制はされていない。 基本的に開発者を信頼しているので、好きなものを選んでい いし、実際Reduxを使ったことはある。 ただ、内製IDEのNuclideが、自社構成だと効率がいいように 作られているので、ほとんどのメンバーがNuclide使って自社 スタックで開発している。
Q. コードの品質管理はどうしてる? A. Flowで型チェック ESLintはeslint-config-fbjsと同じ。社内ルールをOSS化したも のがeslint-config-fbjs テストはJest また、誰でも全てのコードにアクセスできるので、Phabricator を通じて他の人もコードレビューする。
Q. YarnとかJestって結構最近のだけど全部書き換えたの? A. Facebookではそういう意思決定がよくある。 1週間でソースがほとんど変わることがよくある。 これもFacebook製ツールのCodemodを使っている。
Q. バンドラは何使ってるの? A. モジュールバンドラは内製。 webpackのように1ファイルにまとめたりはしていない。 ユーザー個々の画面状態にあわせて必要なモジュールを動 的にロードしている。
この辺も気になるところです 環境面とか。機材、デスク、食堂、備品とか どんな開発チームをマネジメントしてるのかとか 日本に仕事ないかとか ↓ 本人呼んでるので直接聞いてみましょう
最後に、Facebookの開発者になる方法 必須 • 英語力 • インタビューの練習 • インターン • アルゴリズムの知識
Sotaのパターン →LTに収まらないので忘年会で聞いてみてください
Thank you for your attention