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
470
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
2k
WEBフロントエンドの学習の仕方
himenon
1
110
DockerとPythonで理解する TaskQueueサーバー
himenon
1
670
GKE始めるにあたって 最初に知っておきたかったこと - 酔いどれGCPUG 2018/03/02
himenon
0
350
便利なPythonのPackageが最近でたらしいのでそれについて話します
himenon
0
240
Other Decks in Programming
See All in Programming
"config" ってなんだ? / What is "config"?
okashoi
0
210
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
Site Reliability Engineering for GMO
pyama86
6
740
OpenTelemetry のサービスという概念について
azukiazusa1
2
1.1k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
31
21k
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
コードレビューで学ぶ!Kotlinオブジェクト指向デザインパターン
akkie76
2
170
object-oriented-conference-2024
fuwasegu
8
2.7k
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
2
2.1k
OpenAPI を守るのは難しい
ohmori_yusuke
2
770
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Teambox: Starting and Learning
jrom
128
8.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Writing Fast Ruby
sferik
619
60k
Faster Mobile Websites
deanohume
296
30k
Building an army of robots
kneath
300
41k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
How to train your dragon (web standard)
notwaldorf
71
5.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
We Have a Design System, Now What?
morganepeng
42
6.7k
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/