tRPC - Full-Stack 一條龍的開發好幫手

[JeffKko]

What is tRPC?

https://trpc.io/

• RPC【Remote Procedure Call】一種遠端通訊方式，是一種技術的想法，而不是規範
• End-to-End typesafe APIs (Not Only BE to FE)
• still use http/websocket protocol

vs REST / GraphQL

• tRPC 是一個函式庫，它允許你使用TypeScript和遠端過程呼叫（RPC）來建立類型安全的API。 RPC協定允許你像本機呼叫函數一樣在遠端伺服器上呼叫函數。 所以..tRPC透過自動產生類型和驗證輸入輸出來簡化這個過程。

輕度 API

• REST 是一種採用HTTP方法（例如GET、POST、PUT和DELETE）在URL標識的資源上執行操作的架構風格。 REST被廣泛使用，並得到許多工具和框架的支援。 然而，對於複雜或嵌套的數據，REST可能會變得冗長、不一致而且效能低。

經典 API

• GraphQL 是一種查詢語言，它允許你使用查詢、變更和訂閱來指定從伺服器取得的精確資料。 GraphQL可以透過允許客戶端僅請求所需資料來減少資料的過度取得或不足獲取。 但GraphQL也有一些缺點，例如複雜度、快取問題和效能開銷。

巨量 API

My Paint Point

正常開發 (前後分離)

1. 寫 API 文件
2. BE/ FE 同時開發
3. 修改 API 文件
4. BE/ FE 同時修改

目前工作上開發流程

因為目前的工作也算是個半個 full-stack, Front-end 這有個 nodeJS server 要自己維運, 所以我們的開發流程會是這樣:

1. 寫 API 文件
2. BE 開發 (Api/Cron Job)
3. FE 開發
4. 修改 Api
5. 修改 Cron Job (可能忘了改)
6. 修改 Api 文件 (可能忘了改)
7. FE 修改 (可能忘了改)

type unsafety!

APIs In CodeBase

目前 codebase 也常常會有這種程式碼 (不管是 FE 或 server side)

const doLogin = async (payload: any) => {
    const { data } = await axios.post('url', payload);
    if (data.isSuccess) {
        ...
    }
}
// Cannot read properties of undefined (reading 'data')

使用 Typescript 的泛型可以增加安全性, 但 FE 和 server side 要兩邊維護 很麻煩

interface LoginPayload {
    username: string;
    password: string;
}

interface LoginResult {
    isSucces: boolean;
}

const doLogin = async (payload: LoginPayload) => {
    const { data } = await axios.post<LoginResult>('url', payload);
    if (data.isSuccess) {
        ...
    }
}

Demo

https://trpc.io/docs/quickstart

官網這邊 quickstart 內坎的 source code 可以玩玩

Advantage

• 開發時就可以先發現型別問題
• 開發一條龍的話很好的提升 DX
• Zod schema 可以 runtime 處理 payload 驗證, 不用自己寫
• 效能提升: lib 自動將 request batch

Disadvantage

• 跟 server 耦合度很高不易拆分
• 學習成本

我認為適合使用 tRPC 的時候

玩了一下之後我覺得專案如果有幾下特點的話會很適合

• JS stack
  • 前後端都使用 javascript)
• Typescript
  • 當然還要搭配 Typescript
• monorepo
  • 像 Next.js 這種直接開發前後端就算, 其實不用 monorepo 也可以用, 但開發時就要用 npm link 達到同樣的效果
• Api 和前端高耦合
  • 也就是 Api 都只開給前端用, 而沒有給其他 server 去打, 這種情況一般會使用 REST