Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Nuxt.jsとExpressでSPA×SSR×API Aggregationを実現した話

5,065 views

Published on

Meetup#9での発表資料です。
リクルートライフスタイル 山口 祐司

Published in: Engineering
  • Be the first to comment

Nuxt.jsとExpressでSPA×SSR×API Aggregationを実現した話

  1. 1. Nuxt.js と Express で SPA × SSR × API Aggregation を実現した話 2018/05/24 RLSMeetup#9 ヤマグチ ユウジ
  2. 2. 自己紹介 ▸ 名前 ▸ ヤマグチ ユウジ ▸ 職務 ▸ 横断アーキテクト1G フロントエンドエンジニア ▸ 経歴 ▸ 2011年04月 通信系企業 ▸ IoTやWebコンテンツサービスの開発運用 ▸ 2016年01月 ネット広告系企業 ▸ 広告管理システムの開発運用 ▸ 2016年10月 株式会社リクルートライフスタイル ▸ 飲食店向け予約台帳システムの開発運用 ▸ 宿予約後のレコメンドページの開発リード ▸ フロントエンド横断改善活動 2
  3. 3. 3 今日話すこと
  4. 4. 4 VS レガシー
  5. 5. 5 既存システムと連携する Webアプリケーションを 新規で開発する時に気をつけたこと
  6. 6. 6
  7. 7. 7 大規模既存システム
  8. 8. 8 既存システムと連携して 新しい特集ページを作りたい!
  9. 9. 様々な課題 9 🤔 単純な 静的コンテンツ ではない 既存影響は 抑えたい 新しい技術に 挑戦したい 未経験者 が多い 連携システムが 多そう SEO/SMO 新たな負債は 生みたくない
  10. 10. 10 既存システムの上に構築してしまうと 技術的負債が増えてしまいそう
  11. 11. 11 既存システムと連携しながらも 負債にならないアーキテクチャが必要!
  12. 12. API Aggregation によるマイクロサービスパターン 12 Client SPA Server API Aggregation Server APIJSON Server API JSON JSON
  13. 13. 13 既存システムの不は API Aggregation で 吸収すればいい
  14. 14. 14 Nuxt.js / Express
  15. 15. Nuxt.js / Express の役割 ▸ Express は マイクロサービスの API Aggregation を担当 ▸ SPA / SSR どちらからも呼ばれる API を提供 ▸ 関連API をまとめて View に必要な形で返却 ▸ Nuxt.js は Express の Middleware として利用 ▸ Nuxt.js は SPA と SSR を担当 ▸ Vuex で状態管理をし、画面描画を行う 15
  16. 16. Nuxt.js / Express の構成 16 Client SPA Server SSR API Aggregation Server API HTML/CSS/JS JSON JSON JSON Server APIJSON
  17. 17. Nuxt.js / Express の構成 17 Client SPA Server SSR API Aggregation Server API HTML/CSS/JS JSON JSON JSON Server APIJSON Nuxt.js Express
  18. 18. 18 新規Webアプリケーションを 既存システムへの影響無しで 無事リリース!
  19. 19. Nuxt.js / Express を採用して良かった点 ▸ 周辺エコシステムが充実している ▸ Vue.js や NPM の資産をほぼそのまま利用できる ▸ SPA × SSR × API Aggregation を簡単に実現できる ▸ vue-cli によるセットアップですぐに開発に入れる ▸ PWA など今後必要となりそうなものも対応できる ▸ 基本的なものはすでにモジュールで用意されている 19
  20. 20. Nuxt.js / Express を採用してハマった点 ▸ デバッグ時には Nuxt.js の細部まで理解する必要がある ▸ vue-router / vue-server-renderer / etc. ▸ easyであるが故に学習コストが少し高かったかも ▸ SPA × SSR × API Aggregation が肥大化しそう ▸ SSR と API Aggregation は別管理でも良さそう 20
  21. 21. 21 まとめ
  22. 22. まとめ 既存システムと連携する新規Webアプリケーションを Nuxt.js と Express を利用することで、 簡単に実現することができた。 トレードオフになるものもあるので、 まだまだ改善の余地はありそう。 22
  23. 23. 23 EOF

×