Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf

3a206ec7df76023cca167a8886b69672?s=47 K.Himeno
December 01, 2019
Programming
2
320

 JSConf_JP_2019_Sponsor_Talk_of_Dwango.pdf

JSConf JP 2019のドワンゴのスポンサートークの資料です。
2019/01/12
https://jsconf.jp/2019/

3a206ec7df76023cca167a8886b69672?s=128

K.Himeno

December 01, 2019
Tweet

More Decks by K.Himeno

See All by K.Himeno
WEBフロントエンドの学習の仕方
3a206ec7df76023cca167a8886b69672?s=48 himenon
1
78
DockerとPythonで理解する TaskQueueサーバー
3a206ec7df76023cca167a8886b69672?s=48 himenon
1
530
GKE始めるにあたって 最初に知っておきたかったこと - 酔いどれGCPUG 2018/03/02
3a206ec7df76023cca167a8886b69672?s=48 himenon
0
200
便利なPythonのPackageが最近でたらしいのでそれについて話します
3a206ec7df76023cca167a8886b69672?s=48 himenon
0
230

Other Decks in Programming

See All in Programming
GitHub Actions を導入した経緯
41c9dedd1b4c53ace82e040bb09334fe?s=48 tamago3keran
1
430
GDG Seoul IO Extended 2022 - Android Compose
7589a5a8fec022e8af4e46525150a291?s=48 taehwandev
0
290
Reactive Java Microservices on Kubernetes with Spring and JHipster
7f408bc67dc9ae3b288ee92d16d3c4c2?s=48 deepu105
1
170
Branching out to Jetpack Compose
86f746f6c0c522ab2261bd55791d8a4a?s=48 chrisbanes
4
1.2k
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
130
シェーダー氷山発掘記
6a661bb5871208cad64912223bb0c637?s=48 logilabo
0
140
こそこそアジャイル導入しようぜ！
08c43eecaeb20bad17d63e0e6964d9c2?s=48 ichimichi
0
1.1k
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
37618b4d60cf3d1f43f7196253264edc?s=48 numeroanddev
0
230
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
E72f241475dfe632c6b1666debc16e8a?s=48 nearme_tech
0
120
設計ナイト2022 トランザクションスクリプト
6521324f6ab5266cdcde1dd05945a27b?s=48 shinpeim
11
2k
Java アプリとAWS の良い関係 - AWS でJava アプリを実行する一番簡単な方法教えます / AWS for Javarista
1370bcc20551cb822f51b212201de303?s=48 kanamasa
2
1.2k
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
0
170

Featured

See All Featured
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Designing the Hi-DPI Web
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
272
32k
Debugging Ruby Performance
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
65
10k
Build The Right Thing And Hit Your Dates
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
19
1.2k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
23
15k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
Building a Scalable Design System with Sketch
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
448
30k
Building Adaptive Systems
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
1.1k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
7.4k

Transcript

  1. JSConf JP 2019 Sponsor Talk 株式会社ドワンゴ 2019/12/01

  2. Introduction • Kosei Himeno • Frontend Engineer • ニコニコ生放送 開発改善グループ

    リーダー ◦ 主に、開発中の辛いところを改善して回ってます • GitHub: Himenon

  3. Niconicoのサービス

  4. ニコニコ動画 / 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/

  5. ニコニコ生放送 / Live Streaming niconico live is live streaming service.

    https://live.nicovideo.jp/

  6. N予備校 / Education FϥʔχϯάαʔϏε https://www.nnn.ed.nico/

  7. 少し話すこと • ニコニコ生放送の開発者に対するの環境改善の 事例について紹介

  8. PC版 SP版

  9. Repositories > Developer

  10. 鮮度を維持する • モノレポ化 ◦ Lernaの導入 • 自動バージョン更新 ◦ Renovateの導入

  11. とはいえ、リポジトリや ライブラリの境界は存在するため 鮮度が落ちる

  12. 問題の認識ができないと 老朽化が進む

  13. 影響範囲を可視化していく • 口頭だけでは伝わらないことが多い！ • 例を3つ紹介 1. npm-scriptsのメンテナンス 2. ファイルの依存関係が設計とどれくらい近いのか？ 3.

    変更を入れたライブラリの利用先の認識

  14. 例1：改修前のnpm-scripts

  15. 例1：改修後のnpm-scripts

  16. 例2：ファイルの依存関係を可視化

  17. 依存関係を可視化するライブ ラリはあったが...

  18. 依存関係を可視化するライブ ラリはあったが...

  19. 依存関係を可視化するライブ ラリはあったが... 人の手に負えるレベルではない （今後の課題でもある）

  20. 例3：GitHub Enterpriseにあるパッケージの利用先の依存関係 Library A package.json • dependencis • devDependencies Library

    B package.json • dependencis • devDependencies ??? package.json

  21. 例3：GitHub Enterpriseにあるパッケージの利用先の依存関係

  22. 例3：GitHub Enterpriseにあるパッケージの利用先の依存関係

  23. ここで利用したライブラリorアプリケーション • npm-scriptsの実行順序可視化 https://github.com/Himenon/npm-run-script-chain • ファイルの依存関係の可視化 https://github.com/Himenon/code-dependency • ライブラリの依存関係可視化 https://github.com/Himenon/dependents-view

  24. 他には

  25. 開発手順・ルールを共有する • レビューを一部自動化 danger-jsを強化したようなものがある（内製） ◦ 自動ラベル付け ◦ ラベルでCIのタスクを分岐など

  26. 問題を認識する • AnnotationをSlackに通知 TODO/FIXME/@ts-ignoreなど。 • ファイルサイズの遷移をレポーティングする Pull Request / Merge後などを選択できる

  27. PRコメントにファイルサイズの増減通知

  28. Botが自動レビュー

  29. 課題はまだまだ潜む • 課題を関係者（非エンジニアも含む）で互いに 理解し合うことが解決への第一歩 • 見える化・自動化を行いあらゆる改善の効率を上げてい く • 我々はまだまだ道半ば

  30. ニコニコ生放送のフロントエンド開発は多くの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 ...

  31. ドワンゴは大規模フロントエンドに チャレンジしたい人を募集しています。 https://dwango.co.jp/recruit/