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

Transcript

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

   View Slide

2. magaming
   ● マンガメディア開発
   チーム/Webアプリケー
   ションエンジニア
   ● GigaViewer for Web
   の開発をしている
   ● チンチラを飼っている
   2
   

   View Slide

3. これまでのレンダリング方式
   ● バックエンドは Perl
   ● テンプレートエンジン(Xslate)を使って
   HTML をレンダリング
   3
   Controller
   データ集めて
   くるメソッド
   テンプレート
   エンジン
   Routing Render
   

   View Slide

4. Xslate の例
   4
   
   [% FOR banner IN banners %]
   [% IF banner.url %]
   
   
   
   [% ELSE %]
   
   [% END %]
   [% END %]
   
   

   View Slide

5. これまでの API 環境
   ● GraphQL API のエンドポイントはアプリ用に
   存在している
   ● Web では使われていない
   5
   

   View Slide

6. 6
   Web でも GraphQL
   使いたくない？
   

   View Slide

7. なぜ GraphQL を使いたいか
   ● Web でも GraphQL を使えば、アプリと実装
   が一本化されて開発コストが下がるのでは？
   ● Xslate の書き心地がイマイチなので、できれ
   ばフロントエンドの環境を刷新したい
   ○ 型チェックが甘い
   ○ linter/formatter が良いのが無い…
   7
   

   View Slide

8. 8
   じゃあ次のメディア
   を開発するときに
   やってみよう！
   

   View Slide

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

   View Slide

10. フロントエンドの環境は？
    ● 社内で実績のある Next.js + Apollo Client ?
    ● しかし新たに環境を作るのはコストが高い…
    ● 次のメディアのリリース日はもう決まってい
    るので、今から環境を作るのはスケジュール
    的に厳しい…
    10
    

    View Slide

11. 11
    では
    「Web で GraphQL を使う」
    「フロントエンド環境を作る」
    を別々にやってみてはどうか？
    

    View Slide

12. Web で GraphQL を使うとは
    ● GraphQL に Web で必要な field を生やす
    ● Perl で GraphQL を叩いて、帰ってきた結果
    をテンプレートエンジンに渡す
    12
    Controller
    GraphQLで
    データ集める
    テンプレート
    エンジン
    Routing Render
    

    View Slide

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,
    …
    );
    };
    

    View Slide

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); # 結果をまるっと渡すのでスッキリ
    };
    

    View Slide

15. 良かった点
    ● データを集める処理が、GraphQL のクエリ
    だけで表現できるようになりスッキリした
    ● 既存の構成を大幅に変えずに、「Web で必要
    な field を生やす」ことに集中できたので、
    最小限の工数で対応できた
    15
    

    View Slide

16. 良かった点
    ● Web で GraphQL がいけそうと分かって、フ
    ロントエンドとバックエンドの分離を自信を
    持って進められた
    ● 次のメディアを開発するときに Next.js の環
    境を作ったが、Web で必要な field はすでに
    生やせていたので環境作りに注力できた
    ●
    16
    

    View Slide

17. まとめ
    ● フロントエンドとバックエンドの分離は結構
    大掛かりな作業だけど、物事を分解して段階
    的に無理なくやっていくことができた
    ● Web/アプリ両方で GraphQL を使うことがで
    きた、実装が共通化されたことで開発コスト
    が下がり、より高速に開発が進むはず
    17
    

    View Slide