Unification of the middle scale services by Nuxt.js

7. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ebookjapan ● ヤフー株式会社（以後、「ヤフー」）株式会社イーブックイニシアティブジャパン（以後、「EBIJ」）が協力・連携し運営する電子書籍販売サービス ● それぞれ会社が運営しいた電子書籍販売サービスを統合し、2018年10月リリース https://ebookjapan.yahoo.co.jp/

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

18. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. ヤフー風土違い EBIJ GOOD ● 社内プラットフォームが充実しいる ● データが豊富 ● 属人化を避け、誰もきるよう体制作り BAD ● 制約が多い GOOD ● スピード感ある対応や選択 ● 自由度が高い BAD ● 属人化や場当たり的対応が多い ● デザイン注力するカルチャーがい

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チームプロダクトオーナーステークホルダー所属関係く同じチームするこ足並みを揃え、相互理解を促進！

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ファイル分割しいた → 「分割」いう不要手間が発生

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付き）

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 当たり前内容だが、若いチームやスケジュール優先場合注意！

44. Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved. リリース後改善 - 体制 - ● 「見せられるもを作る」こ集中ししまた ○ スプリント毎、見せられるもを作るこ集中ししまい、エラー処理やシステム面改善が放置気味いた ● 経験豊富エンジニアが入いかた ○ FEチーム比較的若いエンジニア構成されおり、新規サービス立ち上げ携わたこあるエンジニアがほんいかた（最適配置をおこた結果、アプリ、BE おじさんエンジニアが集ましまた、、）リリース至るま体制面課題

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

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ファイル削減

Unification of the middle scale services by Nuxt.js

Unification of the middle scale services by Nuxt.js

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Unification of the middle scale services by Nuxt.js

Similar to Unification of the middle scale services by Nuxt.js(20)

Unification of the middle scale services by Nuxt.js