Soumettre la recherche
Mettre en ligne
Nuxt.jsとExpressでSPA×SSR×API Aggregationを実現した話
•
4 j'aime
•
8,392 vues
Recruit Lifestyle Co., Ltd.
Suivre
Meetup#9での発表資料です。 リクルートライフスタイル 山口 祐司
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 23
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
REST API のコツ
REST API のコツ
pospome
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Yahoo!デベロッパーネットワーク
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Trainocate Japan, Ltd.
AWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティス
Amazon Web Services Japan
Recommandé
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
モノリスからマイクロサービスへの移行 ~ストラングラーパターンの検証~(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
REST API のコツ
REST API のコツ
pospome
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Swagger ではない OpenAPI Specification 3.0 による API サーバー開発
Yahoo!デベロッパーネットワーク
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
AWSとオンプレミスを繋ぐときに知っておきたいルーティングの基礎知識(CCSI監修!)
Trainocate Japan, Ltd.
AWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティス
Amazon Web Services Japan
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Yoshiki Nakagawa
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Masahito Zembutsu
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
Kentaro Yoshida
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
Tetsutaro Watanabe
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
Daichi Koike
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡
NTT Communications Technology Development
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Amazon Web Services Japan
Kafkaを使った マイクロサービス基盤 part2 +運用して起きたトラブル集
Kafkaを使った マイクロサービス基盤 part2 +運用して起きたトラブル集
matsu_chara
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
Amazon Web Services Japan
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
業務アプリを安全に効率的に開発・運用するためのポイント
業務アプリを安全に効率的に開発・運用するためのポイント
アシアル株式会社
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
Shinichi Tomita
Contenu connexe
Tendances
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Yoshiki Nakagawa
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Masahito Zembutsu
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
Hiroshi Tokumaru
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
Kentaro Yoshida
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
Tetsutaro Watanabe
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
Daichi Koike
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡
NTT Communications Technology Development
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Amazon Web Services Japan
Kafkaを使った マイクロサービス基盤 part2 +運用して起きたトラブル集
Kafkaを使った マイクロサービス基盤 part2 +運用して起きたトラブル集
matsu_chara
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
土岐 孝平
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
Amazon Web Services Japan
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
NTT Communications Technology Development
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Masatoshi Tada
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
Tendances
(20)
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
Dockerの期待と現実~Docker都市伝説はなぜ生まれるのか~
SPAセキュリティ入門~PHP Conference Japan 2021
SPAセキュリティ入門~PHP Conference Japan 2021
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
爆速クエリエンジン”Presto”を使いたくなる話
爆速クエリエンジン”Presto”を使いたくなる話
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
初心者向けMongoDBのキホン!
初心者向けMongoDBのキホン!
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
OpenAPI 3.0でmicroserviceのAPI定義を試みてハマった話
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
ゲームアーキテクチャパターン (Aurora Serverless / DynamoDB)
Kafkaを使った マイクロサービス基盤 part2 +運用して起きたトラブル集
Kafkaを使った マイクロサービス基盤 part2 +運用して起きたトラブル集
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
これからSpringを使う開発者が知っておくべきこと
これからSpringを使う開発者が知っておくべきこと
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
[Aurora事例祭り]Amazon Aurora を使いこなすためのベストプラクティス
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Similaire à Nuxt.jsとExpressでSPA×SSR×API Aggregationを実現した話
業務アプリを安全に効率的に開発・運用するためのポイント
業務アプリを安全に効率的に開発・運用するためのポイント
アシアル株式会社
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
Shinichi Tomita
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
Movable Type の現在と未来〜Data API の可能性〜
Movable Type の現在と未来〜Data API の可能性〜
新一 佐藤
20160225 interspace system_summary
20160225 interspace system_summary
Smz Nbys
一歩前に進めるWeb開発のスパイス(仙台Geek★Night #1)
一歩前に進めるWeb開発のスパイス(仙台Geek★Night #1)
株式会社オプト 仙台ラボラトリ
Redash pythonで業務分析
Redash pythonで業務分析
創史 花村
Tim casestudy 2013 01
Tim casestudy 2013 01
Arai Ran
UX生トーク vol.6 機能組織の価値発揮!UX改善のディレクション術
UX生トーク vol.6 機能組織の価値発揮!UX改善のディレクション術
Saori Baba
Stripeを1年使ってみて思ったこと
Stripeを1年使ってみて思ったこと
tomoaki koshi
Adobe Analytics 2015:「Analysis Workspace」がスゴい理由と使い方
Adobe Analytics 2015:「Analysis Workspace」がスゴい理由と使い方
Makoto Shimizu
[事例紹介]Scalaで物流倉庫システム作ったよ
[事例紹介]Scalaで物流倉庫システム作ったよ
Tomokazu Matsushita
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
Takuya Oikawa
アステラス製薬 - グローバルWebブランディングとガバナンス [動画あり]
アステラス製薬 - グローバルWebブランディングとガバナンス [動画あり]
CI&T Japan
衛星データを活用し、地域社会の課題の解決したい!
衛星データを活用し、地域社会の課題の解決したい!
さぶみっと!ヨクスル
ビザスクを支える技術 2017
ビザスクを支える技術 2017
創史 花村
概説 Data API v3
概説 Data API v3
Yuji Takayama
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Daisuke Sugai
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
Tatsuru Maeda
フロントエンドエンジニアが知るべきFirebaseの世界
フロントエンドエンジニアが知るべきFirebaseの世界
Kenjiro Kubota
Similaire à Nuxt.jsとExpressでSPA×SSR×API Aggregationを実現した話
(20)
業務アプリを安全に効率的に開発・運用するためのポイント
業務アプリを安全に効率的に開発・運用するためのポイント
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
スマートデバイス×HTML5で 企業情報システムはどう変わる? ~最新動向から考えるエンタープライズWebの現在と未来~
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
Movable Type の現在と未来〜Data API の可能性〜
Movable Type の現在と未来〜Data API の可能性〜
20160225 interspace system_summary
20160225 interspace system_summary
一歩前に進めるWeb開発のスパイス(仙台Geek★Night #1)
一歩前に進めるWeb開発のスパイス(仙台Geek★Night #1)
Redash pythonで業務分析
Redash pythonで業務分析
Tim casestudy 2013 01
Tim casestudy 2013 01
UX生トーク vol.6 機能組織の価値発揮!UX改善のディレクション術
UX生トーク vol.6 機能組織の価値発揮!UX改善のディレクション術
Stripeを1年使ってみて思ったこと
Stripeを1年使ってみて思ったこと
Adobe Analytics 2015:「Analysis Workspace」がスゴい理由と使い方
Adobe Analytics 2015:「Analysis Workspace」がスゴい理由と使い方
[事例紹介]Scalaで物流倉庫システム作ったよ
[事例紹介]Scalaで物流倉庫システム作ったよ
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
クリスマスもコードを書きたいアナタに送る! 次世代エンジニアの技術の学び方とは? 〜Qiitaの投稿データから読み解く、2016年の技術トレンド〜
アステラス製薬 - グローバルWebブランディングとガバナンス [動画あり]
アステラス製薬 - グローバルWebブランディングとガバナンス [動画あり]
衛星データを活用し、地域社会の課題の解決したい!
衛星データを活用し、地域社会の課題の解決したい!
ビザスクを支える技術 2017
ビザスクを支える技術 2017
概説 Data API v3
概説 Data API v3
Intalio japan special cloud workshop
Intalio japan special cloud workshop
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
サーバチューニングでスピードアップ資料 (11月10日jeccicaセミナー交流会向け資料公開用)
フロントエンドエンジニアが知るべきFirebaseの世界
フロントエンドエンジニアが知るべきFirebaseの世界
Plus de Recruit Lifestyle Co., Ltd.
業務と消費者の体験を同時にデザインするリクルートの価値検証のリアル ー 「Airレジ ハンディ」セルフオーダーのブレない「価値」の確かめ方 ー
業務と消費者の体験を同時にデザインするリクルートの価値検証のリアル ー 「Airレジ ハンディ」セルフオーダーのブレない「価値」の確かめ方 ー
Recruit Lifestyle Co., Ltd.
分散トレーシングAWS:X-Rayとの上手い付き合い方
分散トレーシングAWS:X-Rayとの上手い付き合い方
Recruit Lifestyle Co., Ltd.
OOUIを実践してわかった、9つの大切なこと
OOUIを実践してわかった、9つの大切なこと
Recruit Lifestyle Co., Ltd.
Flutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたもの
Recruit Lifestyle Co., Ltd.
CTIサービスを支える裏側 〜物理デバイスとの戦い〜 | iOSDC Japan 2020
CTIサービスを支える裏側 〜物理デバイスとの戦い〜 | iOSDC Japan 2020
Recruit Lifestyle Co., Ltd.
「進化し続けるインフラ」のためのマルチアカウント管理
「進化し続けるインフラ」のためのマルチアカウント管理
Recruit Lifestyle Co., Ltd.
Air事業のデザイン組織とデザイナー
Air事業のデザイン組織とデザイナー
Recruit Lifestyle Co., Ltd.
リクルートライフスタイル AirシリーズでのUXリサーチ
リクルートライフスタイル AirシリーズでのUXリサーチ
Recruit Lifestyle Co., Ltd.
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
Recruit Lifestyle Co., Ltd.
データサイエンティストが力を発揮できるアジャイルデータ活用基盤
データサイエンティストが力を発揮できるアジャイルデータ活用基盤
Recruit Lifestyle Co., Ltd.
Real-time personalized recommendation using embedding
Real-time personalized recommendation using embedding
Recruit Lifestyle Co., Ltd.
データから価値を生み続けるには
データから価値を生み続けるには
Recruit Lifestyle Co., Ltd.
データプロダクト開発を成功に導くには
データプロダクト開発を成功に導くには
Recruit Lifestyle Co., Ltd.
Jupyter だけで機械学習を実サービス展開できる基盤
Jupyter だけで機械学習を実サービス展開できる基盤
Recruit Lifestyle Co., Ltd.
SQLを書くだけでAPIが作れる基盤
SQLを書くだけでAPIが作れる基盤
Recruit Lifestyle Co., Ltd.
BtoBサービスならではの顧客目線の取り入れ方
BtoBサービスならではの顧客目線の取り入れ方
Recruit Lifestyle Co., Ltd.
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
Recruit Lifestyle Co., Ltd.
リクルートライフスタイルにおける深層学習の活用とGCPでの実現方法
リクルートライフスタイルにおける深層学習の活用とGCPでの実現方法
Recruit Lifestyle Co., Ltd.
ビックデータ分析基盤の成⻑の軌跡
ビックデータ分析基盤の成⻑の軌跡
Recruit Lifestyle Co., Ltd.
Refactoring point of Kotlin application
Refactoring point of Kotlin application
Recruit Lifestyle Co., Ltd.
Plus de Recruit Lifestyle Co., Ltd.
(20)
業務と消費者の体験を同時にデザインするリクルートの価値検証のリアル ー 「Airレジ ハンディ」セルフオーダーのブレない「価値」の確かめ方 ー
業務と消費者の体験を同時にデザインするリクルートの価値検証のリアル ー 「Airレジ ハンディ」セルフオーダーのブレない「価値」の確かめ方 ー
分散トレーシングAWS:X-Rayとの上手い付き合い方
分散トレーシングAWS:X-Rayとの上手い付き合い方
OOUIを実践してわかった、9つの大切なこと
OOUIを実践してわかった、9つの大切なこと
Flutter移行の苦労と、乗り越えた先に得られたもの
Flutter移行の苦労と、乗り越えた先に得られたもの
CTIサービスを支える裏側 〜物理デバイスとの戦い〜 | iOSDC Japan 2020
CTIサービスを支える裏側 〜物理デバイスとの戦い〜 | iOSDC Japan 2020
「進化し続けるインフラ」のためのマルチアカウント管理
「進化し続けるインフラ」のためのマルチアカウント管理
Air事業のデザイン組織とデザイナー
Air事業のデザイン組織とデザイナー
リクルートライフスタイル AirシリーズでのUXリサーチ
リクルートライフスタイル AirシリーズでのUXリサーチ
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
データサイエンティストが力を発揮できるアジャイルデータ活用基盤
データサイエンティストが力を発揮できるアジャイルデータ活用基盤
Real-time personalized recommendation using embedding
Real-time personalized recommendation using embedding
データから価値を生み続けるには
データから価値を生み続けるには
データプロダクト開発を成功に導くには
データプロダクト開発を成功に導くには
Jupyter だけで機械学習を実サービス展開できる基盤
Jupyter だけで機械学習を実サービス展開できる基盤
SQLを書くだけでAPIが作れる基盤
SQLを書くだけでAPIが作れる基盤
BtoBサービスならではの顧客目線の取り入れ方
BtoBサービスならではの顧客目線の取り入れ方
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
The Design for Serverless ETL Pipeline データ分析基盤のレガシーなデータロードをサーバレスでフルリプレースするまで道のり
リクルートライフスタイルにおける深層学習の活用とGCPでの実現方法
リクルートライフスタイルにおける深層学習の活用とGCPでの実現方法
ビックデータ分析基盤の成⻑の軌跡
ビックデータ分析基盤の成⻑の軌跡
Refactoring point of Kotlin application
Refactoring point of Kotlin application
Nuxt.jsとExpressでSPA×SSR×API Aggregationを実現した話
1.
Nuxt.js と Express
で SPA × SSR × API Aggregation を実現した話 2018/05/24 RLSMeetup#9 ヤマグチ ユウジ
2.
自己紹介 ▸ 名前 ▸ ヤマグチ
ユウジ ▸ 職務 ▸ 横断アーキテクト1G フロントエンドエンジニア ▸ 経歴 ▸ 2011年04月 通信系企業 ▸ IoTやWebコンテンツサービスの開発運用 ▸ 2016年01月 ネット広告系企業 ▸ 広告管理システムの開発運用 ▸ 2016年10月 株式会社リクルートライフスタイル ▸ 飲食店向け予約台帳システムの開発運用 ▸ 宿予約後のレコメンドページの開発リード ▸ フロントエンド横断改善活動 2
3.
3 今日話すこと
4.
4 VS レガシー
5.
5 既存システムと連携する Webアプリケーションを 新規で開発する時に気をつけたこと
6.
6
7.
7 大規模既存システム
8.
8 既存システムと連携して 新しい特集ページを作りたい!
9.
様々な課題 9 🤔 単純な 静的コンテンツ ではない 既存影響は 抑えたい 新しい技術に 挑戦したい 未経験者 が多い 連携システムが 多そう SEO/SMO 新たな負債は 生みたくない
10.
10 既存システムの上に構築してしまうと 技術的負債が増えてしまいそう
11.
11 既存システムと連携しながらも 負債にならないアーキテクチャが必要!
12.
API Aggregation によるマイクロサービスパターン 12 Client SPA Server API Aggregation Server APIJSON Server API JSON JSON
13.
13 既存システムの不は API Aggregation で 吸収すればいい
14.
14 Nuxt.js / Express
15.
Nuxt.js / Express
の役割 ▸ Express は マイクロサービスの API Aggregation を担当 ▸ SPA / SSR どちらからも呼ばれる API を提供 ▸ 関連API をまとめて View に必要な形で返却 ▸ Nuxt.js は Express の Middleware として利用 ▸ Nuxt.js は SPA と SSR を担当 ▸ Vuex で状態管理をし、画面描画を行う 15
16.
Nuxt.js / Express
の構成 16 Client SPA Server SSR API Aggregation Server API HTML/CSS/JS JSON JSON JSON Server APIJSON
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 新規Webアプリケーションを 既存システムへの影響無しで 無事リリース!
19.
Nuxt.js / Express
を採用して良かった点 ▸ 周辺エコシステムが充実している ▸ Vue.js や NPM の資産をほぼそのまま利用できる ▸ SPA × SSR × API Aggregation を簡単に実現できる ▸ vue-cli によるセットアップですぐに開発に入れる ▸ PWA など今後必要となりそうなものも対応できる ▸ 基本的なものはすでにモジュールで用意されている 19
20.
Nuxt.js / Express
を採用してハマった点 ▸ デバッグ時には Nuxt.js の細部まで理解する必要がある ▸ vue-router / vue-server-renderer / etc. ▸ easyであるが故に学習コストが少し高かったかも ▸ SPA × SSR × API Aggregation が肥大化しそう ▸ SSR と API Aggregation は別管理でも良さそう 20
21.
21 まとめ
22.
まとめ 既存システムと連携する新規Webアプリケーションを Nuxt.js と Express
を利用することで、 簡単に実現することができた。 トレードオフになるものもあるので、 まだまだ改善の余地はありそう。 22
23.
23 EOF
Télécharger maintenant