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
2.1k
Hatena Engineer Seminar #21 GraphQLでフロントエンドとバックエンドを分離する
magaming
September 08, 2022
Tweet
Share
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Optimizing for Happiness
mojombo
379
70k
How to Ace a Technical Interview
jacobian
277
23k
Music & Morning Musume
bryan
46
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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