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
JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf
Search
K.Himeno
December 01, 2019
Programming
2
560
JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf
JSConf JP 2019のドワンゴのスポンサートークの資料です。
2019/01/12
https://jsconf.jp/2019/
K.Himeno
December 01, 2019
Tweet
Share
More Decks by K.Himeno
See All by K.Himeno
ニコニコ生放送におけるWebフロントエンドBFFサーバーのKubernetes移行事例の紹介
himenon
8
2.2k
WEBフロントエンドの学習の仕方
himenon
1
120
DockerとPythonで理解する TaskQueueサーバー
himenon
1
730
GKE始めるにあたって 最初に知っておきたかったこと - 酔いどれGCPUG 2018/03/02
himenon
0
380
便利なPythonのPackageが最近でたらしいのでそれについて話します
himenon
0
250
Other Decks in Programming
See All in Programming
subpath importsで始めるモック生活
10tera
0
310
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
flutterkaigi_2024.pdf
kyoheig3
0
150
Quine, Polyglot, 良いコード
qnighy
4
650
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
220
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
140
RubyLSPのマルチバイト文字対応
notfounds
0
120
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
cmp.Or に感動した
otakakot
3
200
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
960
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Code Reviewing Like a Champion
maltzj
520
39k
Raft: Consensus for Rubyists
vanstee
136
6.6k
A better future with KSS
kneath
238
17k
GitHub's CSS Performance
jonrohan
1030
460k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Become a Pro
speakerdeck
PRO
25
5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Embracing the Ebb and Flow
colly
84
4.5k
Transcript
JSConf JP 2019 Sponsor Talk 株式会社ドワンゴ 2019/12/01
Introduction • Kosei Himeno • Frontend Engineer • ニコニコ生放送 開発改善グループ
リーダー ◦ 主に、開発中の辛いところを改善して回ってます • GitHub: Himenon
Niconicoのサービス
ニコニコ動画 / Video on-demando niconico douga was the first website
to overlay user comments over video to create a new viewing experience https://www.nicovideo.jp/
ニコニコ生放送 / Live Streaming niconico live is live streaming service.
https://live.nicovideo.jp/
N予備校 / Education FϥʔχϯάαʔϏε https://www.nnn.ed.nico/
少し話すこと • ニコニコ生放送の開発者に対するの環境改善の 事例について紹介
PC版 SP版
Repositories > Developer
鮮度を維持する • モノレポ化 ◦ Lernaの導入 • 自動バージョン更新 ◦ Renovateの導入
とはいえ、リポジトリや ライブラリの境界は存在するため 鮮度が落ちる
問題の認識ができないと 老朽化が進む
影響範囲を可視化していく • 口頭だけでは伝わらないことが多い! • 例を3つ紹介 1. npm-scriptsのメンテナンス 2. ファイルの依存関係が設計とどれくらい近いのか? 3.
変更を入れたライブラリの利用先の認識
例1:改修前のnpm-scripts
例1:改修後のnpm-scripts
例2:ファイルの依存関係を可視化
依存関係を可視化するライブ ラリはあったが...
依存関係を可視化するライブ ラリはあったが...
依存関係を可視化するライブ ラリはあったが... 人の手に負えるレベルではない (今後の課題でもある)
例3:GitHub Enterpriseにあるパッケージの利用先の依存関係 Library A package.json • dependencis • devDependencies Library
B package.json • dependencis • devDependencies ??? package.json
例3:GitHub Enterpriseにあるパッケージの利用先の依存関係
例3:GitHub Enterpriseにあるパッケージの利用先の依存関係
ここで利用したライブラリorアプリケーション • npm-scriptsの実行順序可視化 https://github.com/Himenon/npm-run-script-chain • ファイルの依存関係の可視化 https://github.com/Himenon/code-dependency • ライブラリの依存関係可視化 https://github.com/Himenon/dependents-view
他には
開発手順・ルールを共有する • レビューを一部自動化 danger-jsを強化したようなものがある(内製) ◦ 自動ラベル付け ◦ ラベルでCIのタスクを分岐など
問題を認識する • AnnotationをSlackに通知 TODO/FIXME/@ts-ignoreなど。 • ファイルサイズの遷移をレポーティングする Pull Request / Merge後などを選択できる
PRコメントにファイルサイズの増減通知
Botが自動レビュー
課題はまだまだ潜む • 課題を関係者(非エンジニアも含む)で互いに 理解し合うことが解決への第一歩 • 見える化・自動化を行いあらゆる改善の効率を上げてい く • 我々はまだまだ道半ば
ニコニコ生放送のフロントエンド開発は多くのJSのライブラリで支えられている ajv chalk chokidar commitizen csp-header dependency-cruiser directory-tree dot-prop enhanced-resolve
gray-matter ip lru- cache markdown-table mdast mobx normalize-package-data parse-diff pidusage pluralize portfinder react recursive-readdir resolve resolve-pkg rimraf rtcpeerconnection-shim sanitize- html screenfull sort-package-json stdout-stream svgo true- case-path vue webpack ...
ドワンゴは大規模フロントエンドに チャレンジしたい人を募集しています。 https://dwango.co.jp/recruit/