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
510
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.1k
WEBフロントエンドの学習の仕方
himenon
1
120
DockerとPythonで理解する TaskQueueサーバー
himenon
1
700
GKE始めるにあたって 最初に知っておきたかったこと - 酔いどれGCPUG 2018/03/02
himenon
0
370
便利なPythonのPackageが最近でたらしいのでそれについて話します
himenon
0
250
Other Decks in Programming
See All in Programming
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
最近追加した型の紹介とその振り返り
aki19035vc
0
180
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Trial
cairolibrary720
1
130
英語
s_shimotori
1
220
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
How to Think Like a Performance Engineer
csswizardry
4
590
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Web development in the modern age
philhawksworth
203
10k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Fireside Chat
paigeccino
25
2.8k
What's in a price? How to price your products and services
michaelherold
239
11k
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/