Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hatena Engineer Seminar #21 GraphQLでフロントエンドとバックエンドを分離する

magaming
September 08, 2022
1.2k

Hatena Engineer Seminar #21 GraphQLでフロントエンドとバックエンドを分離する

magaming

September 08, 2022
Tweet

Transcript

  1. GraphQL でフロントエンド とバックエンドを分離する id:magaming 2022/09/07 Hatena Engineer Seminar #21 GraphQL

    活用編 1
  2. magaming • マンガメディア開発 チーム/Webアプリケー ションエンジニア • GigaViewer for Web の開発をしている

    • チンチラを飼っている 2
  3. これまでのレンダリング方式 • バックエンドは Perl • テンプレートエンジン(Xslate)を使って HTML をレンダリング 3 Controller

    データ集めて くるメソッド テンプレート エンジン Routing Render
  4. 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>
  5. これまでの API 環境 • GraphQL API のエンドポイントはアプリ用に 存在している • Web

    では使われていない 5
  6. 6 Web でも GraphQL 使いたくない?

  7. なぜ GraphQL を使いたいか • Web でも GraphQL を使えば、アプリと実装 が一本化されて開発コストが下がるのでは? •

    Xslate の書き心地がイマイチなので、できれ ばフロントエンドの環境を刷新したい ◦ 型チェックが甘い ◦ linter/formatter が良いのが無い… 7
  8. 8 じゃあ次のメディア を開発するときに やってみよう!

  9. 9 ところでフロントエンドの 環境はどうする?

  10. フロントエンドの環境は? • 社内で実績のある Next.js + Apollo Client ? • しかし新たに環境を作るのはコストが高い…

    • 次のメディアのリリース日はもう決まってい るので、今から環境を作るのはスケジュール 的に厳しい… 10
  11. 11 では 「Web で GraphQL を使う」 「フロントエンド環境を作る」 を別々にやってみてはどうか?

  12. Web で GraphQL を使うとは • GraphQL に Web で必要な field

    を生やす • Perl で GraphQL を叩いて、帰ってきた結果 をテンプレートエンジンに渡す 12 Controller GraphQLで データ集める テンプレート エンジン Routing Render
  13. 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, … ); };
  14. 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); # 結果をまるっと渡すのでスッキリ };
  15. 良かった点 • データを集める処理が、GraphQL のクエリ だけで表現できるようになりスッキリした • 既存の構成を大幅に変えずに、「Web で必要 な field

    を生やす」ことに集中できたので、 最小限の工数で対応できた 15
  16. 良かった点 • Web で GraphQL がいけそうと分かって、フ ロントエンドとバックエンドの分離を自信を 持って進められた • 次のメディアを開発するときに

    Next.js の環 境を作ったが、Web で必要な field はすでに 生やせていたので環境作りに注力できた • 16
  17. まとめ • フロントエンドとバックエンドの分離は結構 大掛かりな作業だけど、物事を分解して段階 的に無理なくやっていくことができた • Web/アプリ両方で GraphQL を使うことがで きた、実装が共通化されたことで開発コスト

    が下がり、より高速に開発が進むはず 17