More Related Content
What's hot (20)
Similar to Unification of the middle scale services by Nuxt.js (20)
![Ahead-of-Time Compilation with JDK 9 [Java Day Tokyo 2017 D1-A1]](https://cdn.slidesharecdn.com/ss_thumbnails/d1-a5javadaytokyo2017-171122015404-thumbnail.jpg?width=560&fit=bounds)
Unification of the middle scale services by Nuxt.js
- 1. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 2019年5月18日? ヤフー株式会社 笹沼 啓 沢田 晃一 Nuxt.js 中規模サービスを統 合した話
- 2. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 自己紹介 ? 氏名 笹沼 啓 （ささ ま じめ） ? 入社年数 入社３年目 ? 社歴 入社後から現在ま 電子書籍サービス 携わ る（JS 触れた 入社し から） ? そ 他 趣味 バレーボール（週１?２回）
- 3. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 自己紹介 ? 氏名 沢田 晃一 （さわだ こういち） ? 入社年数 / 所属 新卒入社12年目 / 名古屋オフィス勤務 ? 担当し きたサービス ニュース、天気、防災速報、地図、ミュージッ ク、ファンクラブ、電子書籍 ? そ 他 最近 趣味 ペット わんこ お出かけ
- 4. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 質問 こちらへ https://app2.sli.do/event/bswcoysn/live/questions slido.com #IF_A3
- 5. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Agenda 1. サービス紹介 2. サービス 構成 3. リリースま 挑戦 苦難 a. 風土 違い b. Atomic Designへ 挑戦 c. 実装する上 直面した課題 4. リリース後 改善 5. さら る改善を進めるため
- 6. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Agenda 1. サービス紹介 2. サービス 構成 3. リリースま 挑戦 苦難 a. 風土 違い b. Atomic Designへ 挑戦 c. 実装する上 直面した課題 4. リリース後 改善 5. さら る改善を進めるため
- 7. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ebookjapan ● ヤフー株式会社（以後、「ヤフー」） 株式会社イーブックイニシアティブジャパン（以 後、「EBIJ」）が協力?連携し 運営する電子書籍販売サービス ● それぞれ 会社が運営し いた電子書籍販売サービスを統合し、2018年10月 リ リース https://ebookjapan.yahoo.co.jp/
- 8. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ebookjapan ● 2016年6月、両社 資本業務提携契約が締結 ● 2017年冬、新サイト 開発開始 ● 2018年10月、新サイト リリース 約１年
- 9. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ebookjapan 60万冊を超える 取り扱い冊数を誇る 国内最大級 電子書籍販売サービス 常時2,000冊を超える 無料まんが 背表紙表示や新刊自動購入 独自 機能も豊富
- 10. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Agenda 1. サービス紹介 2. サービス 構成 3. リリースま 挑戦 苦難 a. 風土 違い b. Atomic Designへ 挑戦 c. 実装する上 直面した課題 4. リリース後 改善 5. さら る改善を進めるため
- 11. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. サービス 構成 - 役割分担 - ユーザー FE API DB ヤフー EBIJ 新規 新規
- 12. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. サービス 構成 - 役割分担 - FE ヤフー 新規 ● ヤフー資産が利用 きる ○ プラットフォームやビッグデータ ヤフーが 管理する資産を利用するこ が きる ● WEBデザイナーがいる ○ 専門職 し デザイナーがヤフー 存 在する（イーブック デザイナー いう専門 職が か た）
- 13. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. サービス 構成 - 役割分担 - ● 機能が豊富 ○ Yahoo!ブックストア 比べ eBookJapan 方が機能が豊 富だ た ○ 電子書籍サービスを運営する 上 必要 データも多く保持し いた。 API DB EBIJ 新規
- 14. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. サービス 構成 - FE環境 - ClientSide 出展：https://ja.nuxtjs.org/出展：https://jp.vuejs.org/index.html Vue.js × Nuxt.js ServerSide 出展：https://ja.wikipedia.org/wiki/Node.js Node.js × Express
- 15. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. サービス 構成 - FE環境 - Vue.js × Nuxt.js を選んだ理由 ● デザイナーが理解しやすい ○ Vueファイル HTML × CSS × JavaScript ○ デザイナーがFE開発 参加する予定だ た ● ライブラリをアップデートする手間削減 ○ タイト スケジュールを見越し ● ドキュメントが豊富 ● 採用事例が増え き 盛り上がりそう ○ React 二択 り、最終的 Vue.js × Nuxt.js
- 16. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. サービス 構成 - FE環境 - FE 規模
- 17. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Agenda 1. サービス紹介 2. サービス 構成 3. リリースま 挑戦 苦難 a. 風土 違い b. Atomic Designへ 挑戦 c. 実装する上 直面した課題 4. リリース後 改善 5. さら る改善を進めるため
- 18. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ヤフー 風土 違い EBIJ GOOD ● 社内プラットフォームが充実し いる ● データが豊富 ● 属人化を避け、誰 も きるよ う 体制作り BAD ● 制約が多い GOOD ● スピード感 ある対応や選択 ● 自由度が高い BAD ● 属人化や場当たり的 対応が 多い ● デザイン 注力するカルチャー が い
- 19. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 風土 違い スクラム 写真：アフロ
- 20. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ● アジャイル開発手法 一 ● 固定 短い期間（うち チーム 1Week） 単位 開発を区切り、そ 中 計画を立 る ● Developer 皆が平等。チーム 成果 ため 自発的 計画を立 る 必要があるため、自立したチーム りやすい ● デイリースクラムやレトロスペクティブを通じ 、チーム内 問題を発見しや すい（チーム 問題 チーム 解決） 風土 違い スクラム ？
- 21. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 風土 違い FEエンジニア （ヤフー） BEエンジニア （EBIJ） デザイナー （ヤフー） 企画 （EBIJ） スクラムマスター （ヤフー） Aチーム FEエンジニア （ヤフー） BEエンジニア （EBIJ） デザイナー （ヤフー） 企画 （ヤフー） スクラムマスター （EBIJ） Bチーム プロダクトオーナー ステークホルダー
- 22. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 風土 違い FEエンジニア （ヤフー） BEエンジニア （EBIJ） デザイナー （ヤフー） 企画 （EBIJ） スクラムマスター （ヤフー） Aチーム FEエンジニア （ヤフー） BEエンジニア （EBIJ） デザイナー （ヤフー） 企画 （ヤフー） スクラムマスター （EBIJ） Bチーム プロダクトオーナー ステークホルダー 所属関係 く同じチーム するこ 足 並みを揃え、相互理解を促進！
- 23. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Agenda 1. サービス紹介 2. サービス 構成 3. リリースま 挑戦 苦難 a. 風土 違い b. Atomic Designへ 挑戦 c. 実装する上 直面した課題 4. リリース後 改善 5. さら る改善を進めるため
- 24. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Atomic Designへ 挑戦 Atomic Design ？ パーツやコンポーネントご 分割し、それらを組み合わせ プロダクトを構築する いうUIデザイン手法 一 出展：Atomic Design Methodology
- 25. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ● 新規開発だ たため、途中 導入するより導入コストが抑えられる ○ す き いるも をATOMS 分解し いく 手間がかかるが、新し く追加し いく場合 コストを抑えられる ● デザイン 変更が多発するこ が予想されたため ○ デザイン 変更 も対応 きる変化 強いシステムが必要だ た ○ Atomic Design パーツが共通化され いるため、修正を最小限 抑えるこ が きる ● UI 一貫性を保 こ が きる ○ ページ 寄らず使われ いるパーツ 共通 、一貫性を担保 きる Atomic Designへ 挑戦 Atomic Designを使おう 思 た理由
- 26. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ● 新規開発だ たため、途中 導入するより導入コストが抑えられる ○ す き いるも をATOMS 分解し いく 手間がかかるが、新し く追加し いく場合 コストを抑えられる ● デザイン 変更が多発するこ が予想されたため ○ デザイン 変更 も対応 きる変化 強いシステムが必要だ た ○ Atomic Design パーツが共通化され いるため、修正を最小限 抑えるこ が きる ● UI 一貫性を保 こ が きる ○ ページ 寄らず使われ いるパーツ 共通 、一貫性を担保 きる Atomic Designへ 挑戦 Atomic Designを使おう 思 た理由 しかし、うまくいきません した…。
- 27. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Atomic Designへ 挑戦 原因1: デザイナー エンジニア 成果物 違い デザイナー FEエンジニア html, css ATOMSや MOLECULES デザイナーから html, cssが受け渡され、FEエンジニアがAtomic Design 沿 たVueファイル 分割し いた → 「分割」 いう不要 手間が発生
- 28. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Atomic Designへ 挑戦 原因2: デザイナー コミュニケーション不足 写真：アフロ ● メンバー 出入りが多か た ● デザイナー?エンジニアそれぞれ 体制 作りを進め しま た ● エンジニア主導 試し み 、後からデ ザイナー も取り入れ もらう もりだ たが、後回し しまい難しく た
- 29. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Atomic Designへ 挑戦 原因3: スクラム 相性 写真：アフロ ● スクラム ミニマム E2E プロダクトを毎スプリントリリースする手法 ● Atomic Design よう 共通化 対する優先度が低か た 出展：Atomic Design Methodology
- 30. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Atomic Designへ 挑戦 Q: うするべきだ た か？ A: 最初からデザイナー 協力し Atomic Designを導入する ● デザイナーがAtomic Design 沿 分割したVueファイル（template style み）を作成し、FEエンジニアがscriptを加える ● リポジトリを分けるこ 、デザイナーがPRを出しやすく るかも デザイナー FEエンジニア Atomic Design 分割したVue （template, style み） Vue （script付き）
- 31. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Agenda 1. サービス紹介 2. サービス 構成 3. リリースま 挑戦 苦難 a. 風土 違い b. Atomic Designへ 挑戦 c. 実装する上 直面した課題 4. リリース後 改善 5. さら る改善を進めるため
- 32. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - 大 小を兼 過ぎ いるデータ - FE API 「作品名」が欲しい！ い！「作品」 （作品名?著者? ジャンル?連載誌?etc） レスポンス 必要過多 データが…
- 33. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - 大 小を兼 過ぎ いるデータ - ↓「作品」 レスポンスサンプル ※ 本当 データ これ 10倍 かく 複雑だ た
- 34. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - 大 小を兼 過ぎ いるデータ - 本来 API側 必要 データだけを返すよう すべき しかし、 必要 APIを作成する 精一杯だ た… FE側 mixinsを使 get処理をま めるこ ！ 写真：アフロ
- 35. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - 大 小を兼 過ぎ いるデータ - mixins/publication.js
- 36. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - 大 小を兼 過ぎ いるデータ - sample.vue
- 37. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - mixins utils化 - Vueファイル内 mixinsを使 データ を抽出するま 良か た！ しかし、 get処理がま ま 便利 りすぎた ため Vueファイル以外 も使い始め しま た…。 写真：アフロ
- 38. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - mixins utils化 - getters.js mixinsをutils よう 使 しま いる!!
- 39. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - mixins utils化 - mixins/publication.js
- 40. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - mixins utils化 - getters.js isMember がtrue もnormalPrice が返 き しまう!!
- 41. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - mixins utils化 - getters.js isMember がtrue もnormalPrice が返 き しまう!! ? mixins Vueファイル み使う ? storeやサーバーサイド も使う処理 common以下 utilsを別途作成する
- 42. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 実装する上 直面した課題 - 404 - ● オールグリーン しか表示 き い ○ ページを構築する要素を取得するため たたく複数 APIが全 成功し い 404 ● 直列処理 ○ 複数 API 処理が直列処理 おり、タイムアウト 404 ● 初期描画 不必要 APIへ リクエスト ○ 初期描画時 必須 いデータを取得する処理が非同期 おらず、タ イムアウト 404 当たり前 内容だが、若いチームやスケジュール優先 場合 注意！
- 43. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Agenda 1. サービス紹介 2. サービス 構成 3. リリースま 挑戦 苦難 a. 風土 違い b. Atomic Designへ 挑戦 c. 実装する上 直面した課題 4. リリース後 改善 5. さら る改善を進めるため
- 44. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - 体制 - ● 「見せられるも を作る」こ 集中し しま た ○ スプリント毎 、見せられるも を作るこ 集中し しまい、エラー処理やシス テム面 改善が放置気味 いた ● 経験豊富 エンジニアが入 い か た ○ FEチーム 比較的若いエンジニア 構成され おり、新規サービス 立ち上 げ 携わ たこ あるエンジニアがほ ん い か た （最適配置をおこ た結果、アプリ、BE おじさんエンジニアが 集ま しま た、、） リリース 至るま 体制面 課題
- 45. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - 体制 - 改善1: FEチーム メンバー 追加 FEエンジニア BEエンジニア デザイナー 企画 スクラムマスター Aチーム FEエンジニア BEエンジニア デザイナー 企画 スクラムマスター Bチーム スクラム これま
- 46. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - 体制 - 改善1: FEチーム メンバー 追加 FEエンジニア BEエンジニア デザイナー 企画 スクラムマスター Aチーム FEエンジニア BEエンジニア デザイナー 企画 スクラムマスター Bチーム スクラム FEエンジニア 名古屋チーム(1人) 追加
- 47. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - 体制 - ● スクラムチーム ○ これま 通り 機能追加、機能面 バグ修正 リリース後 追加し い いけ い機能がたくさんあ た ● 名古屋チーム ○ スクラムチーム FEエンジニア サポート コードレベル 確認や、困 たこ 相談 ○ システム面 改善サポート パッケージ アップデートやパフォーマンス改善 各チーム 役割
- 48. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - 体制 - 改善2: FEエンジニア 話し合う場を作る FEエンジニア FEエンジニア FEエンジニア FEエンジニア FEエンジニア ● WEB 明るい未来を考える会 ○ 新しいこ へ 挑戦 ○ 実装時 見 けた課題 共有 ○ 困 いるこ 相談 スクラム 拾いきれ い か た 課題を拾えるよう ！
- 49. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - システム ● パフォーマンス改善 ○ 処理フロー 見直し ○ レスポンスサイズ 削減 ○ JSファイル容量 削減 ● パッケージ アップデート、見直し ○ Nuxt.js v1からv2へ アップデート ○ より最適 パッケージへ 変更 ● Node.js アップデート等
- 50. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - システム ● パフォーマンス改善 ○ 処理フロー 見直し ○ レスポンスサイズ 削減 ○ JSファイル容量 削減 ● パッケージ アップデート、見直し ○ Nuxt.js v1からv2へ アップデート ○ より最適 パッケージへ 変更 ● Node.js アップデート等
- 51. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - パフォーマンス 改善1: 処理フロー 見直し Server ユーザ 情報1 ユーザ 情報2 ユーザ 情報3 書誌 情報2 書誌 情報1 60ms 80ms 50ms Client 120ms 150ms 描画 処理 対応前：460ms ● 必要 情報をひ ひ 順番 いた ● 描画後 ブラウザから取得 いいも もサーバ 取得し いた Before
- 52. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - パフォーマンス 改善1: 処理フロー 見直し Server ユーザ 情報1 ユーザ 情報3 ユーザ 情報2書誌 情報2 書誌 情報1 60ms 50ms 80ms Client 120ms 150ms 描画 処理 対応後：210ms ● ま められる情報 Promise.all ● 描画後 もいい情報 描画後 After
- 53. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - パフォーマンス 改善2: レスポンスサイズ 削減 500KB 350KB Server 80ms Client mixins 全 加工大き データ1 500KB 350KB API 50ms 150ms Before 大き データ1 大き データ2 大き データ2 850KB JSON。。 ● サイズが かくデータを受け取る 時間が かか いた ● 大き データをそ ままClient 処理し いた
- 54. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - パフォーマンス 改善2: レスポンスサイズ 削減 不要 フィールドを 削 たデータ1 100KB 不要 フィールドを 削 たデータ2 70KB Server 40ms Client 最低限を mixins処理 不要 フィールドを 削 たデータ1 100KB 不要 フィールドを 削 たデータ2 70KB API 30ms 20ms After 必要 も だけ 加工したデータ1 必要 も だけ 加工したデータ2 40KB 30KB
- 55. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - パフォーマンス 改善2: レスポンスサイズ 削減 不要 フィールドを 削 たデータ1 100KB 不要 フィールドを 削 たデータ2 70KB Server 40ms Client 最低限を mixins処理 不要 フィールドを 削 たデータ1 100KB 不要 フィールドを 削 たデータ2 70KB API 30ms 20ms After 必要 も だけ 加工したデータ1 必要 も だけ 加工したデータ2 40KB 30KB ● 不要 フィールドを削 たこ 全体 やり り が速く た ● mixins 処理を減らしたこ Client 処理 が軽く た(体感)
- 56. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - パフォーマンス 改善3: JSファイル 削減 ● Webpack Bundle Analyzer ○ バンドルされたファイル 内容を確 認 きるプラグイン ○ Nuxt.js config 1行追加するだ け 利用可能 ○ 想像以上 必要 いファイルが 多く含まれ いた。。 対応前: 7.23MB Before
- 57. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後 改善 - パフォーマンス 改善3: JSファイル 削減 ● style.css 除去 ● Package 見直し ● 不要コンポーネント削除 対応後: 2.8MB After 60%程度削減 きた！
- 58. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. Agenda 1. サービス紹介 2. サービス 構成 3. リリースま 挑戦 苦難 a. 風土 違い b. Atomic Designへ 挑戦 c. 実装する上 直面した課題 4. リリース後 改善 5. さら る改善を進めるため
- 59. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. さら る改善を進めるため これから 体制(4/1?) FEエンジニア BEエンジニア デザイナー 企画 スクラムマスター Aチーム FEエンジニア BEエンジニア デザイナー 企画 スクラムマスター Bチーム スクラム FEエンジニア 名古屋 名古屋もスクラムチーム ！
- 60. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. さら る改善を進めるため ● スクラム ○ 70%程度を使い、これま おこ いた機能追加等をし かり 進め いく ● スクラム外 ○ 30%程度を使い、システム面 改善を全員 おこ いく パフォーマンス改善、バグ修正、リファクタリング等 スクラムチーム(FEエンジニア) 役割 属人化を避けFEエンジニア ら誰 も システム面 改善を きる体制
- 61. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ま め - リリースま 挑戦 苦難 - ● 風土 違い ○ ヤフー EBIJ 文化が違う 敵対するよう 雰囲気 スクラムを利用し 足並みを揃えるこ 解決！ ● Atomic Designへ 挑戦 ○ パーツご 分割するUIデザイン手法を取り入れよう したが断念 デザイナー 協力し 進め いくこ が重要！ ● 実装する上 直面した課題 ○ 大きすぎるデータ?mixins 使いすぎ?404 mixins 処理をま める?utilファイルを作る?実装方法 注意 写真：アフロ
- 62. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ま め - リリース後 改善 - ● 体制 ○ 名古屋チームもスクラム Join ○ FEエンジニア 話し合い 場を作る ● システム ○ パフォーマンス改善やパッケージ アップデート、見直しを行 た ○ パフォーマンス改善 ■ 処理フロー 見直し ■ レスポンスサイズ 削減 ■ JSファイル 削減
- 63. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. 最後 ebookjapan これからも改善を 進め いきます！ https://ebookjapan.yahoo.co.jp/