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
620
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.3k
WEBフロントエンドの学習の仕方
himenon
1
130
DockerとPythonで理解する TaskQueueサーバー
himenon
1
750
GKE始めるにあたって 最初に知っておきたかったこと - 酔いどれGCPUG 2018/03/02
himenon
0
390
便利なPythonのPackageが最近でたらしいのでそれについて話します
himenon
0
260
Other Decks in Programming
See All in Programming
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.7k
Make Parsers Compatible Using Automata Learning
makenowjust
2
5.3k
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
110
Lambda(Python)の リファクタリングが好きなんです
komakichi
3
220
小田原でみんなで一句詠みたいな #phpcon_odawara
stefafafan
0
350
PHPで書いたAPIをGoに書き換えてみた 〜パフォーマンス改善の可能性を探る実験レポート〜
koguuum
0
170
The Implementations of Advanced LR Parser Algorithm
junk0612
1
390
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
2
460
生成AIを使ったQAアプリケーションの作成 - ハンズオン補足資料
oracle4engineer
PRO
3
250
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
110
タイムゾーンの奥地は思ったよりも闇深いかもしれない
suguruooki
1
720
The Evolution of the CRuby Build System
kateinoigakukun
0
720
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Optimizing for Happiness
mojombo
377
70k
Facilitating Awesome Meetings
lara
54
6.3k
How STYLIGHT went responsive
nonsquared
99
5.5k
We Have a Design System, Now What?
morganepeng
52
7.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
How to Ace a Technical Interview
jacobian
276
23k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
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/