Facebookのフロントエンド開発

We Are JavaScripters! @14th【初心者歓迎LT大会】
https://wajs.connpass.com/event/72611/
用のスライドです

Transcript

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