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
160
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
230
2018年、IE6対応サイトを作る
boiyama
4
970
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
チームをCQRS
boiyama
1
1.4k
フロントエンドのサーバーレス SSR編
boiyama
0
660
Serverless for Front-end Server-Side Rendering
boiyama
1
87
Learning Elm in JS
boiyama
1
520
JSでElmを学ぶ
boiyama
0
80
Other Decks in Technology
See All in Technology
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
160
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
810
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
410
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
670
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
2.7k
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
510
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
280
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
0
210
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
460
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.7k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
65
14k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
How GitHub (no longer) Works
holman
305
140k
How STYLIGHT went responsive
nonsquared
92
4.8k
The Invisible Side of Design
smashingmag
294
49k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Statistics for Hackers
jakevdp
790
220k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
The Mythical Team-Month
searls
216
42k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
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