Protocol Buffers and Connect for Frontend Development

Slide 1

Slide 1 text

Protocol Bu ff ers and Connect for Frontend Development @shisama_ React Osaka 2025-04

Slide 2

Slide 2 text

Masashi Hirano (@shisama_) • Engineering Manager and Frontend developer at Cybozu, Inc. • Like tech community, OSS contribution (ex Node.js Core Collaborator) • The author ofʰϑϩϯτΤϯυ։ൃͷͨΊͷηΩϡϦ ςΟೖ໳ʱʢᠳӭࣾʣ

Slide 3

Slide 3 text

This talk is about the overview of the Protocol Buffers and connect for the frontend development

Slide 4

Slide 4 text

Agenda • API First, Scheme First • gRPC • gRPC drawbacks • Connect • Connect Query • Connect Playwright

Slide 5

Slide 5 text

API First, Scheme Driven Development • Data will be transferred between clients and servers, or servers and servers, via API • Clients have to care only about the interface, not need to care about the API implementation. • By de fi ning the API schema for the interface, the client can be implemented without waiting for the API implementation. • The frontend can mock the API with the interface de fi nition.

Slide 6

Slide 6 text

API fi rst is included in Beyond the Twelve-Factor App • One codebase, one application • API fi rst • Dependency management • Design, build, release, and run • Con fi guration, credentials, and code • Logs • Disposability • Backing services • Environment parity • Administrative processes • Port binding • Stateless processes • Concurrency • Telemetry • Authentication and authorization https://www.oreilly.com/library/view/beyond-the-twelve-factor/9781492042631/

Slide 7

Slide 7 text

gRPC • An open-source RPC framework developed by Google. • Used for communication between microservices and client/server communication. • Communication between different programming languages is possible.

Slide 8

Slide 8 text

gRPC https://grpc.io/docs/what-is-grpc/introduction/

Slide 9

Slide 9 text

Protocol Bu ff ers • Protobuf, for short • The schema language used to de fi ne gRPC communication interfaces • Automatically generate code based on the API request/response de fi nitions described in the .proto fi le. • Supports various programming languages • The data size is small because it is converted to binary.

Slide 10

Slide 10 text

Example of Protobuf 'JFME5ZQF TUSJOH fl PBU JOU CPPM CZUFTʜ 'JFMEOBNF 5BHOVNCFS 4FRVFODFOVNCFSJO FBDIEBUBTUSVDUVSF 5ZQF NFTTBHF FOVN POFPG NBQ

Slide 11

Slide 11 text

Challenges of gRPC • Cannot be called directly from the browser • Need a proxy named gRPC-Web to communicate between browsers and servers • Debugging is dif fi cult

Slide 12

Slide 12 text

gRPC drawbacks • Cannot be called directly from the browser • Need a proxy named gRPC-Web to communicate between browsers and servers • Debugging is dif fi cult Wish if we could directly call APIs without proxies…

Slide 13

Slide 13 text

Connect • An open-source RPC framework developed by Buf • Fully compatible with gRPC • Can directly send requests to the server from browsers • Support various programming languages • JavaScript, TypeScript, Go, Swift, Kotlin • Can generate type-safe code automatically for clients and servers • https://connectrpc.com/

Slide 14

Slide 14 text

Example of Connect code generation OQYCVGHFOFSBUFCVGCVJMEDPOOFDUSQDFMJ[B

Slide 15

Slide 15 text

Example of generate code usage /FFEUPJNQPSU DPOOFDUDMJFOU MJCSBSZ *NQPSUHFOFSBUFE DPEF 1BTTUIF HFOFSBUFE JOUFSGBDFUPUIF DMJFOUMJCSBSZ 5ZQFTBGF *GQBTTJOHBQBSBNFUFSOPU EF fi OFEJOQSPUPCVG UTD HJWFTZPVBOUZQFFSSPS

Slide 16

Slide 16 text

Protocol Bu ff ers (.proto) Go w/ connect-go TypeScript w/ connect-es Code generation Backend Frontend (FOFSBUFDPEFJONVMUJQMF MBOHVBHFTGSPNBTJOHMF TDIFNBEF fi OJUJPO Generated code guarantees types for requests and responses between clients and backends. So, frontend developers don’t need to care about the interfaces and can focus on implementing the logic and UI

Slide 17

Slide 17 text

Connect for Frontend Development • There is some connect libraries for JavaScript and TypeScript. • connect-es: generate JavaScript/TypeScript code • connect-web: client library to call API with connect • connect-query: Wrapper library around TanStack Query (react-query) • connect-playwright-es: E2E utilities designed to simplify writing Playwright tests for your Connect-ES application. Easy to mock the function with these utilities.

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Connect Query Example /FFEUPXSBQZPVS BQQMJDBUJPOXJUIDPOOFDU RVFSZ`T1SPWJEFSBOESFBDU RVFSZ`T1SPWJEFS

Slide 20

Slide 20 text

Connect Query Example $BOVTFVTF2VFSZJOUIFTBNFXBZBT SFBDURVFSZ

Slide 21

Slide 21 text

Connect for React Application • There is some connect libraries for JavaScript and TypeScript. • connect-es: generate JavaScript/TypeScript code • connect-web: client library to call API with connect • connect-query: Wrapper library around TanStack Query (reqct-query) • connect-playwright-es: E2E utilities designed to simplify writing Playwright tests for your Connect-ES application. Easy to mock the function with these utilities. *XPO`UFYQMBJO1MBZXSJHIUJO UIJT-5

Slide 22

Slide 22 text

connect-playwright Example $POOFDUQMBZXSJHIUBMMPXTVTUPFBTJMZ NPDLUIF"1*DBMMVTJOHUIFHFOFSBUFE DPEF 6TFS4FSWJDFJOUIJTFYBNQMF JO ZPVSUFTUJOHDPEFVTJOH1MBZXSJHIU

Slide 23

Slide 23 text

Summary • API- fi rst/Scheme-driven development helps us start implementing frontend code without fi nishing the API implementation • We can generate type-safe request/response interfaces between the backend and the frontend in multiple languages from only one protobuf fi le. • Connect is fully compatible with gRPC and allows us to send requests directly from browsers without proxies, such as gRPC-Web. • Connect provides some useful libraries for frontend development

Slide 24

Slide 24 text

Thanks! IUUQTEJTDPSEHH,F+6N+%Z