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
Hatena Engineer Seminar #21 GraphQLでフロントエンドとバック...
Search
magaming
September 08, 2022
1
1.9k
Hatena Engineer Seminar #21 GraphQLでフロントエンドとバックエンドを分離する
magaming
September 08, 2022
Tweet
Share
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing the Hi-DPI Web
ddemaree
280
34k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
For a Future-Friendly Web
brad_frost
175
9.4k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Bash Introduction
62gerente
608
210k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Being A Developer After 40
akosma
86
590k
Transcript
GraphQL でフロントエンド とバックエンドを分離する id:magaming 2022/09/07 Hatena Engineer Seminar #21 GraphQL
活用編 1
magaming • マンガメディア開発 チーム/Webアプリケー ションエンジニア • GigaViewer for Web の開発をしている
• チンチラを飼っている 2
これまでのレンダリング方式 • バックエンドは Perl • テンプレートエンジン(Xslate)を使って HTML をレンダリング 3 Controller
データ集めて くるメソッド テンプレート エンジン Routing Render
Xslate の例 4 <div class="banners"> [% FOR banner IN banners
%] [% IF banner.url %] <a href="[% banner.url %]"> <img src="[% banner.image_url %]" alt="[% banner.alt %]"> </a> [% ELSE %] <img src="[% banner.image_url %]" alt="[% banner.alt %]"> [% END %] [% END %] </div>
これまでの API 環境 • GraphQL API のエンドポイントはアプリ用に 存在している • Web
では使われていない 5
6 Web でも GraphQL 使いたくない?
なぜ GraphQL を使いたいか • Web でも GraphQL を使えば、アプリと実装 が一本化されて開発コストが下がるのでは? •
Xslate の書き心地がイマイチなので、できれ ばフロントエンドの環境を刷新したい ◦ 型チェックが甘い ◦ linter/formatter が良いのが無い… 7
8 じゃあ次のメディア を開発するときに やってみよう!
9 ところでフロントエンドの 環境はどうする?
フロントエンドの環境は? • 社内で実績のある Next.js + Apollo Client ? • しかし新たに環境を作るのはコストが高い…
• 次のメディアのリリース日はもう決まってい るので、今から環境を作るのはスケジュール 的に厳しい… 10
11 では 「Web で GraphQL を使う」 「フロントエンド環境を作る」 を別々にやってみてはどうか?
Web で GraphQL を使うとは • GraphQL に Web で必要な field
を生やす • Perl で GraphQL を叩いて、帰ってきた結果 をテンプレートエンジンに渡す 12 Controller GraphQLで データ集める テンプレート エンジン Routing Render
Before 13 sub top { my $banners = Giga::Service::Banner->banners; my
$blog_entries = Giga::Service::Blog->entries; my $ranking = Giga::Service::Ranking->ranking; … # 集めたデータを Xslate に渡してレンダリング, 数が多いとその分記述が増える $c->render_html('top.html', banners => $banners, blog_entries => $blog_entries, ranking => $ranking, … ); };
After 14 sub top { my $query = q| query
{ banners { imageUrl alt } } … |; # 様々なデータを集めるのが1つのクエリで簡潔に表現できる! my $result = Giga::GraphQL->execute_via_server($c, { query => $query }); $c->render_html('top.html', data => $result->data); # 結果をまるっと渡すのでスッキリ };
良かった点 • データを集める処理が、GraphQL のクエリ だけで表現できるようになりスッキリした • 既存の構成を大幅に変えずに、「Web で必要 な field
を生やす」ことに集中できたので、 最小限の工数で対応できた 15
良かった点 • Web で GraphQL がいけそうと分かって、フ ロントエンドとバックエンドの分離を自信を 持って進められた • 次のメディアを開発するときに
Next.js の環 境を作ったが、Web で必要な field はすでに 生やせていたので環境作りに注力できた • 16
まとめ • フロントエンドとバックエンドの分離は結構 大掛かりな作業だけど、物事を分解して段階 的に無理なくやっていくことができた • Web/アプリ両方で GraphQL を使うことがで きた、実装が共通化されたことで開発コスト
が下がり、より高速に開発が進むはず 17