Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2022技育祭_映写資料②
Search
techtekt
November 18, 2022
Technology
0
620
2022技育祭_映写資料②
techtekt
November 18, 2022
Tweet
Share
More Decks by techtekt
See All by techtekt
Power BI 活用推進の歩み
techtekt
0
20
_microCMS_を使ってNext.jsアプリ開発しよう_.pdf
techtekt
0
550
スクラム研修
techtekt
0
2.8k
データベース研修
techtekt
7
3.9k
良いコードとは 研修
techtekt
2
2.9k
Git研修1
techtekt
0
2.8k
React & Next.js研修
techtekt
0
2.8k
Security基礎研修
techtekt
1
2.8k
QAエンジニア組織立ち上げはじめの一歩
techtekt
0
620
Other Decks in Technology
See All in Technology
UIからの自動テスト事例
tomasagi
8
3.4k
Uniting Rust Servers and Clients through OpenAPI
ahl
0
430
Combineを中心とした処理をSwift Concurrencyへ (これまでも調べた調査と向き合い)
fumiyasac0921
1
180
履歴データテーブルとの向き合い方_PHPerKaigi2024
gennei
25
6.7k
事業部を超えた 開発生産性向上に挑戦する
kentakozuka
2
230
二刀流でWinActorを活用してみた話
tamai_63
0
120
Proposal for a fictitious company presented by JAWS-UG DE&I team 'Naniwa Musume'
hiroramos4
PRO
0
120
We Fear Change, for DevOpsDays LA 2024
cote
PRO
0
130
SecurityCamp2023基板作るコース講義資料/Security Camp 2023 Lecture Materials
tnishinaga
5
1.3k
OpenStack再入門「アーキテクチャ編」
kajinamit
0
250
マイクロサービスを横断したGoのコードレビュー
yuyu_hf
PRO
1
120
スクラムマスター不在でスクラムをやるのは(とても辛いので)やめておけ! #scrumfukuoka
nulabinc
PRO
4
900
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
288
19k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
The Pragmatic Product Professional
lauravandoore
24
5.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Gamification - CAS2011
davidbonilla
76
4.5k
Code Review Best Practice
trishagee
54
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Transcript
None
経験言語:Python、PHP、React、Vue(どれも少しずつ) 趣味:ゲーム(鉄拳、Apex)、アニメ、音楽(BUMP、椎 名林檎、ボカロ…etc) 好きな食べ物:ラーメン二郎、麺類、ハンバーガー Name : 佐藤ゆ(エンジニア)
技術調査(Poc)
? PoC(Proof of Concept:概念実証)とは
PoCとは? • 新たなアイデアやコンセプトの実現可能性やそれによって 得られる効果などについて検証すること • これによって事前に検討したアイデア/コンセプトの実現 可能性を見極め、期待した効果が得られると判断できれば 実プロジェクトを進めていくという形が一般的です。
BFFとは?
? フロントエンドのための バックエンドサーバー
BFFとは? • 従来のモノリシックなサービスからマイクロサービス化 ◦ 複数のAPIを叩く必要が出てくる
BFFとは? • 取得したデータの加工をフロントエンドで行う必要有り ◦ フロントエンドで表示する内容は往々にして変わるた め、加工処理はフロントエンドがいいかも・・・ ◦ APIで取得してきたデータの一部は不要なため削ぎ落 としたり・・・(インピーダンスミスマッチ) •
フロントエンドの肥大化 • そもそもフロントエンドはUI/UXに専念するべき
BFFとは? BFFを用意することでAPI集約、インピーダンスミス マッチの解消、責務・関心の分離、パフォーマンス の向上が見込めるってコト!?
BFFとは? デメリット • 開発・保守の工数増 • 通信量増 • マイクロサービスのどれかがダウンした際の運用などを考 える必要やBFFが停止した場合など、様々な観点から検 証・対策が必要
(通信量の対策としてはキャッシュ化などが挙げられる)
ユースケース
2. SSR(Server Side Rendering) 4. File Upload 5. Web Socket
3. Session Management 1. API Gateway
• APIの結果を一つに集約する(API Aggregation) • APIで取得したデータをフロントエンドに適したデータに加 工する(API Translate) • 余計なリクエストが増大しないようAPIのレスポンスをキャ ッシュ化(API
Cache) ◦ Chache-aside pattern ◦ Broker pattern • GraphQLとの相性が良い API Gateway
• GraphQLとの相性が良い API Gateway
Server Side Rendering • CSR(Client Server Rendering)と違い、サーバーでレンダ リングを行う ◦ CSRと比較するとSEO観点で有利だったり、ローディング時間が短いと
いったメリットがある • みなさんお馴染みのNext.js、Nuxt.jsで簡単に実装可 ◦ Next.jsはデフォルトでSSRの設定になっています ◦ たまにhydration周りでエラーになったり・・・ • SSG(Static Site Generation)もあるが、こちらは静的サイ トに向いている SSR
• 主にユーザーの情報など、頻繁にアクセスされるであろうデ ータを保存する ◦ Redisやmemcachedなどが多く使われるらしい • 仮にBFFで管理をしない場合 ◦ クライアント側でLocal StorageやCookieなどで管理する必要がある
▪ セキュリティ的によくないよね ◦ バックエンド側で処理を重複して実装する必要がある ▪ なんか面倒くさそう Session Management
• 多くの場合はファイルアップロード機能を実装するとチャンク 化してファイルを少しずつ送信することが多い ◦ Pythonのrequestsとか、PHP(Laravel)のlaravel-chunk-uploadとか ◦ チャンク化したデータを順番通りにバックエンドに送信するのは大変そう File Upload ファイル格納の処理を
BFFが担うことで シンプルに実装可能!
• クライアントとサーバー間で即時に通信を行うHTTPの拡張 機能 • チャットや同時編集機能(googleスプレッドシートとか)や SNSで使用される • BFFがリアルタイムにデータ交換をする処理を受け持つこと で、バックエンドはデータをDBに保存することだけに集中 できる。
Web Socket
Web Socket ① ② ③ ③’
• クライアントとサーバー間で即時に通信を行うHTTPの拡張 機能 • チャットや同時編集機能(googleスプレッドシートとか)や SNSで使用される • BFFがリアルタイムにデータ交換をする処理を受け持つこと で、バックエンドはデータをDBに保存することだけに集中 できる。
Web Socket(改めて)
BFFまとめ
まとめ • BFFには5つのユースケースがある • BFFにメリットがたくさんあるが、デメリットも勿論あるため、 要件によって採用するしないを決める必要がある • (個人的には)責務の分散、API集約によるメリットが大きいの で、新規プロジェクトでは検討して良さそう
? GraphQLとは
GraphQLとは? ※https://graphql.org/
GraphQLとは? ※https://graphql.org/
GraphQLとは? • Facebookが開発したよ ◦ REST APIを使用していたらクラッシュが頻発したため、 より効率的にデータを取得するためGraphQLが開発された ◦ Facebook、Netflix、GitHub、Twitterも使用してるみたい •
query言語で柔軟なデータ取得が可能 ◦ 複雑な関係のデータでも取得しやすい(自分比) • エンドポイントが単一 ◦ ユーザー情報は/users/ 、商品情報は/products/ ◦ GraphQLだと /graphql/でユーザーも商品も取れちゃう • スキーマの構造がグラフモデル ◦ 詳しくはデータモデルに関して調べてみてください
GraphQLとは? • RESTとGraphQLを比較してみる REST API https://docs.github.com/ja/rest/guides/getting-started-with-the-rest-api GraphQL API https://docs.github.com/ja/graphql/overview/explorer 尚、ユーザーID・ユーザー名・アバターURLのみがほしいとする
GraphQLとは? REST API • これって・・・ 過剰にデータ取得しすぎってコト!? 探せば他に良いエンドポイントありそう。 って思ったけど探すのめんどい
GraphQLとは? GraphQL API • 取得したいデータのみ抽出できた
SQL GraphQL SELECT query INSERT/UPDATE/ DELETE mutation - subscription GraphQLとは?
Pub Subのような仕組みのリアルタイム通信 特定の情報を監視するようなイメージです
GraphQLとは? GraphQL API デモ
REST API • 複数のエンドポイント • 取得するデータが決まっている ◦ 過剰な取得 ◦ 過少な取得
• 欲しいデータによっては複数回リ クエストを投げ、取得したデータ を加工して・・・といった手間が かかる GraphQL • 単一のエンドポイント • 取得したいデータをピンポ イントで抽出できる ◦ スキーマで定義したデータだけ だからなんでも取得できるとは 思わないこと • BFFとの親和性高そう GraphQLとは?
GraphQLまとめ
GraphQLまとめ • GraphQL良さそうだけどN+1問題とか性能が少し気になる • BFFにするならGraphQLあり • 今後はGraphQLが採用されることも増えていくのではないか
技術調査まとめ
技術調査まとめ • 技術を導入した際のメリデメを考える • 導入障壁はないか • 導入コストや開発後の運用保守(メンテナンス)まで検討する といったことを調査を行った上で検討する
おわり