O prezentacji: Chcąc uzyskać type safety w projekcie możemy zdecydować się na samodzielne tworzenie, utrzymywane oraz współdzielenie typów. Inną możliwością jest skorzystanie z gotowego rozwiązania (np. generatora typów), które stworzy typy za pomocą komendy. Obie te opcje wymagają jednak dodatkowego nakładu pracy. tRPC niweluje ten problem pozwalając na natychmiastową synchronizację zmian między backendem a frontendem. Podczas prelekcji opowiem o obecnych możliwościach i ograniczeniach tRPC, a także kiedy warto z tego narzędzia skorzystać. Dodatkowo podczas live codingu pokażę jak szybko i wygodnie można stworzyć API za pomocą tRPC i frameworku Next.js. O prelegencie: Karierę w IT zaczęła niecałe 3 lata temu jako programistka React Native. Szybko jednak zaciekawił ją także web dev i backend, co rozpoczęło jej drogę jako programistka full-stack. Uwielbia śledzić i wykorzystywać w projektach nowinki ze świata JavaScriptu. Poza pracą spędza czas uprawiając przeróżne sporty - od treningu siłowego i roweru, poprzez jogę, aż po narty.

2. since 2015

3. Our team of 100 people work
remotely and from offices
in Gliwice & Wroclaw

4. Our top clients:
Our best technologies:

5. Hall of fame:

6. tRPC - czy to koniec
GraphQL?
Angelika Jeziorska
JavaScript Full Stack Developer
Wrocław, 20.04.2023

8. Co to tRPC?
● Biblioteka do budowania api z pełnym type-safety.
● Pod spodem HTTP GET i POST.
● Frontowy klient zbudowany na React (TanStack) Query.
● Wsparcie subskrypcji i WebSocketów.
● Nie wymaga generowania i/lub utrzymywania typów → wystarczy walidator.

9. Skąd front zna typy?

10. Walidacja inputów
● yup
● superstruct
● zod/myzod
● własny walidator

11. Do jakich rozwiązań?
● TypeScript (front i back)
● React/Next.js
● Monorepo

12. Czemu nie REST lub GraphQL?

13. Podstawowe koncepcje
● Router.
● Procedury - ekwiwalent endpointu RESTowego lub lambdy.
● Context - informacje przydatne dla procedur.
● API Handler - backend, w którym żyje tRPC.

14. Aktualnie dostępne adaptery
● AWS Lambda/Serverless,
● Express,
● edge runtimes (Next.js),
● Fastify.

15. Jak ograniczyć dostęp do endpointu?
Prawa nadawane inkrementacyjnie → middleware uruchamiany przed procedurą
Odrębne uprawnienia -> tRPC Shield.

16. const isAuthenticated = rule<Context>()(async (ctx, type, path, input, rawInput) => {
return ctx.user !== null
})
const isAdmin = rule<Context>()(async (ctx, type, path, input, rawInput) => {
return ctx.user.role === 'admin'
})
const isEditor = rule<Context>()(async (ctx, type, path, input, rawInput) => {
return ctx.user.role === 'editor'
})
const permissions = shield<Context>({
query: {
frontPage: not(isAuthenticated),
fruits: and(isAuthenticated, or(isAdmin, isEditor)),
customers: and(isAuthenticated, isAdmin),
},
});

17. To czemu wszyscy z niego nie korzystają?
Wersja v10 (listopad 2022)
● Dodanie wielu funkcjonalności IDE (Go to Definition, Rename Symbol itd.).
● Middleware, reużywalne i chainowalne procedury.
● Poprawiony syntax.
● Lepszy performance TypeScripta w dużych projektach.
Spośród dużych graczy wykorzystujących tRPC jest Netflix i Pleo (cash back).

18. Potencjalne problemy
● CRONy
● Integrowanie narzędzi przez context
● brak konwencji

19. Kiedy warto wykorzystać?
● Mając fullstacków w projekcie.
● Chcąc wykonać wiele operacji, których logika nie jest powiązana lub może być
współdzielona.
● W aplikacjach real-time.

20. Materiały
● tRPC Docs: https://trpc.io/docs/
● T3 stack: https://create.t3.gg/

21. Dziękuję!