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
88
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
MIMEと文字コードの闇
hirachan
2
1.4k
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.8k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
340
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
120
AIエージェント入門
minorun365
PRO
31
17k
日経のデータベース事業とElasticsearch
hinatades
PRO
0
230
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
150
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
1
340
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
140
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
140
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Become a Pro
speakerdeck
PRO
26
5.2k
4 Signs Your Business is Dying
shpigford
182
22k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
For a Future-Friendly Web
brad_frost
176
9.6k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
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