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.5k
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
260
2018年、IE6対応サイトを作る
boiyama
4
980
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
チームをCQRS
boiyama
1
1.5k
フロントエンドのサーバーレス SSR編
boiyama
0
700
Serverless for Front-end Server-Side Rendering
boiyama
1
110
Learning Elm in JS
boiyama
1
550
JSでElmを学ぶ
boiyama
0
97
Other Decks in Technology
See All in Technology
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
400
serverless team topology
_kensh
3
170
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
290
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
7
4.5k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
9k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
Dify on AWS 環境構築手順
yosse95ai
0
110
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2.3k
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
230
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
260
Wasmの気になる最新情報
askua
0
180
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Unsuck your backbone
ammeep
671
58k
Building an army of robots
kneath
305
46k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
How GitHub (no longer) Works
holman
315
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
A designer walks into a library…
pauljervisheath
209
24k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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