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

connect-webの恩恵

 connect-webの恩恵

11月24日に開催された「Wantedly x Qiita Meetup #1 フロントエンドのあれこれ」のLT枠登壇資料になります!

Keitaro Miyano

November 24, 2023
Tweet

Other Decks in Programming

Transcript

  1. connect-webを使った開発の恩恵🤝

    View full-size slide

  2. 【所属】株式会社サイバー・バズ
    【氏名】宮野 奎太朗(みやの けいたろう)
    【経歴】
    2016年〜 浅草のお寿司屋さんで板前修行🍣
    2018年〜 大学入学
    2020年〜 マレーシアでコードを書く日々
    2021年〜 自転車で日本一周🚲
    2022年〜 サイバー・バズ入社
    自己紹介
    2

    View full-size slide

  3. はじめに
    3
    1. connect-webの概要と通信方式
    2. 導入したプロダクトでの活用例
    3. メリットについて(http通信との違い)
    4. 導入時につまづいたポイント
    5. まとめ
    6. 質疑応答

    View full-size slide

  4. connect-webの概要
    4
    まずはざっくり3行で解説!
    ・ブラウザで利用可能なgRPC互換のHTTP通信ライブラリ
    ・Protocol Buffersを使ったインターフェースの定義をして使う
    ・サービスごとのリクエスト・レスポンスの型生成が可能

    View full-size slide

  5. connect-webの概要
    5
    gRPCはHTTP/2の仕様に則った形で
    4種類の通信方式を用意しています。

    View full-size slide

  6. connect-webの概要
    6
    4種類の通信方式の特徴

    View full-size slide

  7. Unary RPC
    7
    クライアント サーバー
    リクエスト
    レスポンス
    TCP Connection

    View full-size slide

  8. Unary RPC
    8
    クライアント サーバー
    リクエスト
    レスポンス
    TCP Connection
    よく見る「1リクエスト1レスポンス」の形式

    View full-size slide

  9. Server streaming RPC
    9
    クライアント サーバー
    TCP Connection
    レスポンス
    レスポンス
    リクエスト

    View full-size slide

  10. Server streaming RPC
    10
    クライアント サーバー
    TCP Connection
    レスポンス
    レスポンス
    リクエスト
    【メリット】サーバーの負担⤵ 初期表示スピード⤴

    View full-size slide

  11. Client streaming RPC
    11
    クライアント サーバー
    TCP Connection
    レスポンス
    リクエスト
    リクエスト

    View full-size slide

  12. Client streaming RPC
    12
    クライアント サーバー
    TCP Connection
    レスポンス
    リクエスト
    リクエスト
    容量の大きなデータを分割してリクエス

    View full-size slide

  13. Bidirectional streaming RPC
    13
    クライアント サーバー
    TCP Connection
    レスポンス
    リクエスト
    リクエスト
    レスポンス

    View full-size slide

  14. Bidirectional streaming RPC
    14
    クライアント サーバー
    TCP Connection
    レスポンス
    リクエスト
    リクエスト
    レスポンス
    WebSocketのような双方向通信が可能

    View full-size slide

  15. 導入したプロダクトでの活用例
    15
    フロント側→Next.js(connect-web)
    サーバー側→Go(connect-go)

    View full-size slide

  16. 導入したプロダクトでの活用例
    16
    Cytoscape.jsでのグラフ構築
    →Server streaming RPCを使用

    View full-size slide

  17. 導入したプロダクトでの活用例
    17
    1.protoファイル定義

    View full-size slide

  18. 導入したプロダクトでの活用例
    18
    2.Makefileに定義した内容を実

    View full-size slide

  19. 導入したプロダクトでの活用例
    19
    3.protoファイルをもとに型ファイルを
    クライアント&サーバーに生成

    View full-size slide

  20. 導入時につまづいたポイント
    20
    ドキュメント→target=tsからtarget=js+dtsにする!
    (おまじない的なものとして覚えて帰ってください🙆)

    View full-size slide

  21. まとめ
    21
    connectを利用したスキーマ駆動の開発体験は良かったです
    🙆
    ぜひ今後の選択肢の一つとして覚えてください!

    View full-size slide

  22. 22
    弊社カジュアル面談お待ちしております🙇
    DMでもお気軽にご連絡ください!
    カジュアル
    面談調整URL

    View full-size slide

  23. 23
    弊社カジュアル面談お待ちしております🙇
    DMでもお気軽にご連絡ください!
    Xアカウント
    (@38ke1)

    View full-size slide