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
940
2022技育祭_映写資料②
techtekt
November 18, 2022
Tweet
Share
More Decks by techtekt
See All by techtekt
doda開発 生成AI元年宣言!自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
techtekt
0
270
7,000名規模の 人材サービス企業における プロダクト戦略・戦術と課題 / Product strategy, tactics and challenges for a 7,000-employee staffing company
techtekt
0
480
ドメイン駆動設計によるdodaダイレクトのリビルド実践 / Rebuild practice of doda direct with domain-driven design
techtekt
0
1.6k
大規模サイトリビルドの現場から:成功と失敗のリアルな教訓 / Site Rebuild,Real Lessons Learned from Successes and Failures_JJUG Fall 2024
techtekt
0
530
VSMを活用したFindy Team+の運用促進 / promoting-operation-of-findy-team-plus-using-vsm
techtekt
0
690
ハッピーになる機械学習モデル開発 〜なるべく手間をかけずにコードの品質向上を目指す 〜
techtekt
0
230
Power BI 活用推進の歩み
techtekt
0
110
_microCMS_を使ってNext.jsアプリ開発しよう_.pdf
techtekt
0
1.8k
スクラム研修
techtekt
1
5.4k
Other Decks in Technology
See All in Technology
PO初心者が考えた ”POらしさ”
nb_rady
0
210
OPENLOGI Company Profile
hr01
0
67k
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.4k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
Lazy application authentication with Tailscale
bluehatbrit
0
210
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
What’s new in Android development tools
yanzm
0
310
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
200
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Writing Fast Ruby
sferik
628
62k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
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が採用されることも増えていくのではないか
技術調査まとめ
技術調査まとめ • 技術を導入した際のメリデメを考える • 導入障壁はないか • 導入コストや開発後の運用保守(メンテナンス)まで検討する といったことを調査を行った上で検討する
おわり