Protocol Buffers and Connect for Frontend Development

Briefly introduced Protocol Buffers and Connect for frontend developers at React Osaka in April.
https://www.meetup.com/react-osaka/events/306257045/

Transcript

1. Protocol Bu ff ers and Connect for Frontend Development @shisama_ React Osaka 2025-04
2. Masashi Hirano (@shisama_) • Engineering Manager and Frontend developer at Cybozu, Inc. • Like tech community, OSS contribution (ex Node.js Core Collaborator) • The author ofʰϑϩϯτΤϯυ։ൃͷͨΊͷηΩϡϦ ςΟೖ໳ʱʢᠳӭࣾʣ
3. This talk is about the overview of the Protocol Buffers and connect for the frontend development
4. Agenda • API First, Scheme First • gRPC • gRPC drawbacks • Connect • Connect Query • Connect Playwright
5. 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.
6. 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/
7. 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.
8. gRPC https://grpc.io/docs/what-is-grpc/introduction/
9. 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.
10. Example of Protobuf 'JFME
    5ZQF
    TUSJOH
    fl PBU
    JOU
    CPPM
    CZUFTʜ 'JFME
    OBNF 5BH
    OVNCFS
    4FRVFODF
    OVNCFS
    JO
    FBDI
    EBUB
    TUSVDUVSF 5ZQF
    NFTTBHF
    FOVN
    POFPG
    NBQ
11. 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
12. 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…
13. 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/
14. Example of Connect code generation 
    OQY
    CVG
    HFOFSBUF
    CVGCVJMEDPOOFDUSQDFMJ[B
15. Example of generate code usage /FFE
    UP
    JNQPSU
    DPOOFDU
    DMJFOU
    MJCSBSZ *NQPSU
    HFOFSBUFE
    DPEF 1BTT
    UIF
    HFOFSBUFE
    JOUFSGBDF
    UP
    UIF
    DMJFOU
    MJCSBSZ 5ZQF
    TBGF
    *G
    QBTTJOH
    B
    QBSBNFUFS
    OPU
    EF fi OFE
    JO
    QSPUPCVG
    UTD
    HJWFT
    ZPV
    BO
    UZQF
    FSSPS
16. Protocol Bu ff ers (.proto) Go w/ connect-go TypeScript w/ connect-es Code generation Backend Frontend (FOFSBUF
    DPEF
    JO
    NVMUJQMF
    MBOHVBHFT
    GSPN
    B
    TJOHMF
    TDIFNB
    EF 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
17. 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.
18. 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.
    *
    EPO`U
    FYQMBJO
    BCPVU
    5BO4UBDL
    2VFSZ
    JO
    UIJT
    -5
19. Connect Query Example /FFE
    UP
    XSBQ
    ZPVS
    BQQMJDBUJPO
    XJUI
    DPOOFDU RVFSZ`T
    1SPWJEFS
    BOE
    SFBDU RVFSZ`T
    1SPWJEFS
20. Connect Query Example $BO
    VTF
    VTF2VFSZ
    JO
    UIF
    TBNF
    XBZ
    BT
    SFBDURVFSZ
21. 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`U
    FYQMBJO
    1MBZXSJHIU
    JO
    UIJT
    -5
22. connect-playwright Example $POOFDUQMBZXSJHIU
    BMMPXT
    VT
    UP
    FBTJMZ
    NPDL
    UIF
    "1*
    DBMM
    VTJOH
    UIF
    HFOFSBUFE
    DPEF
    6TFS4FSWJDF
    JO
    UIJT
    FYBNQMF
    JO
    ZPVS
    UFTUJOH
    DPEF
    VTJOH
    1MBZXSJHIU
23. 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
24. Thanks! IUUQTEJTDPSEHH,F+6N+%Z