Slide 1
Slide 1 text
Facebookのフロントエンド開発
2017.12.21 We Are JavaScripters! @14th
Slide 2
Slide 2 text
My Profile
@boiyaa
@boiyaaaaaa
Persol P&T
Front End Engineer
最近ITスペシャリストとい
うクソダサい肩書きが付
きました。
Slide 3
Slide 3 text
最近のフロントエンドまわりの仕事ではReactを中心にFacebook
の肩に乗っているので、
Facebookでのフロントエンド開発について調べてきました。
Slide 4
Slide 4 text
StackShareによると、
ライブラリ：React, Flux, Relay
ユニットテスト：Jest
プロジェクト管理：Phabricator
CI: Jenkins
IDE: Nuclide
https://stackshare.io/facebook/facebook
Slide 5
Slide 5 text
カスタマイズしたMercurialの単一リポジトリに全てのコードを格納
https://www.infoq.com/jp/news/2014/01/facebook-scaling-hg
Slide 6
Slide 6 text
・・・
Slide 7
Slide 7 text
・・・開発環境の記事がなかなか見つからない。。
Slide 8
Slide 8 text
OSSの技術についての記事は多いのですが、
Facebook自体の開発については、色々な記事でちょっとずつ言
及されている感じで、まとめるのがかなり大変。
↓
弟に聞くか
Slide 9
Slide 9 text
My Bro’s
Profile
facebook.com/sota050
Facebook, Inc.
Front End Engineer
年収は兄の5倍
Slide 10
Slide 10 text
早速弟に確認
チームでの開発について公に出せる情報ある？
→技術的なツールやワークフローの話ならOK
Slide 11
Slide 11 text
ということで聞いてきました
Facebookの開発現場の作法
Slide 12
Slide 12 text
Q. パッケージ管理はやっぱりYarnなの？
A. 全社でYarnを使っている。
しかしながら、Facebookは必要なモジュールを基本全部内製
していて、しかも単一リポジトリなので落とせば全部入ってるか
ら、あまり使う機会がない
Slide 13
Slide 13 text
Q. Facebook製のものしか使えないの？
A. 強制はされていない。
基本的に開発者を信頼しているので、好きなものを選んでい
いし、実際Reduxを使ったことはある。
ただ、内製IDEのNuclideが、自社構成だと効率がいいように
作られているので、ほとんどのメンバーがNuclide使って自社
スタックで開発している。
Slide 14
Slide 14 text
Q. コードの品質管理はどうしてる？
A. Flowで型チェック
ESLintはeslint-config-fbjsと同じ。社内ルールをOSS化したも
のがeslint-config-fbjs
テストはJest
また、誰でも全てのコードにアクセスできるので、Phabricator
を通じて他の人もコードレビューする。
Slide 15
Slide 15 text
Q. YarnとかJestって結構最近のだけど全部書き換えたの？
A. Facebookではそういう意思決定がよくある。
1週間でソースがほとんど変わることがよくある。
これもFacebook製ツールのCodemodを使っている。
Slide 16
Slide 16 text
Q. バンドラは何使ってるの？
A. モジュールバンドラは内製。
webpackのように1ファイルにまとめたりはしていない。
ユーザー個々の画面状態にあわせて必要なモジュールを動
的にロードしている。
Slide 17
Slide 17 text
この辺も気になるところです
環境面とか。機材、デスク、食堂、備品とか
どんな開発チームをマネジメントしてるのかとか
日本に仕事ないかとか
↓
本人呼んでるので直接聞いてみましょう
Slide 18
Slide 18 text
最後に、Facebookの開発者になる方法
必須
● 英語力
● インタビューの練習
● インターン
● アルゴリズムの知識
Sotaのパターン
→LTに収まらないので忘年会で聞いてみてください
Slide 19
Slide 19 text
Thank you for your attention