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
670
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
140
DockerとPythonで理解する TaskQueueサーバー
himenon
1
760
GKE始めるにあたって 最初に知っておきたかったこと - 酔いどれGCPUG 2018/03/02
himenon
0
400
便利なPythonのPackageが最近でたらしいのでそれについて話します
himenon
0
260
Other Decks in Programming
See All in Programming
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
230
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
970
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
110
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
XP, Testing and ninja testing ZOZ5
m_seki
2
250
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
170
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.2k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
580
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
株式会社 Sun terras カンパニーデック
sunterras
0
200
Build your own WebP codec in Swift
kishikawakatsumi
2
890
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Visualization
eitanlees
148
16k
Designing Experiences People Love
moore
142
24k
Typedesign – Prime Four
hannesfritz
42
2.8k
How to Think Like a Performance Engineer
csswizardry
27
2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Producing Creativity
orderedlist
PRO
347
40k
Making Projects Easy
brettharned
118
6.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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/