Gleam + TypeScript: Full-Stack Type Safety with Inertia-Wisp

on YouTube ↗36m

" summary

Built an Inertia Wisp adapter that connects Gleam/Wisp backends to React/Inertia frontends, demoing a working to‑do app and contact form with server validation and the Inertia merge prop flow. Two sharing strategies: compile Gleam types to JS/TS and use runtime decode-before-render HOCs for type safety, or define Gleam schemas and run Gleam→TS codegen to emit Zod validators used client‑side. Glue works end‑to‑end; adapter is unpublished to Hex yet but underlying pieces are production‑grade.

AI-written summary · about

" chapters (15)

1. 0:00Introduction
2. 1:09Why this stack matters
3. 4:43React with server-rendered pages
4. 7:13Gleam and Wisp backend
5. 12:06Inertia Wisp Global First
6. 13:11Demo: to-do list
7. 15:59Backend: to-do list
8. 17:46Frontend setup and integration
9. 21:54Type safety in frontend
10. 22:37Demo: form validations
11. 25:28TypeScript schema generation
12. 28:16Query parameters and reloads
13. 29:39Learning Gleam and adoption
14. 32:50Gleam and coding assistants
15. 34:16Summary

" related talks

• 32mStatic typing with Flow and TypeScriptJames Brantly · React.js Conf 2015
• 26mFull Stack Type Safety with React, GraphQL, and TypeScriptRobert Zhu · Nordic.js 2019
• 35mFull-stack Type Safety with React, GraphQL, and TypeScriptRobert Zhu · React Boston 2019
• 54mJava meets TypeScript: building modern web apps with full-stack type safetyManolo Carrasco · Spring I/O 2022
• 01h 31mFireside Chat with Yehuda Katz and Ed FaulknerYehuda Katz, Edward Faulkner · EmberConf 2022
• 49mTypescript + ReactBen Ilegbodu · Connect.Tech 2022
• 27mMatthew Gerstman - TypeScript: Seeing Past the HypeMatthew Gerstman · React Loop 2019
• 06mLightning talk from John LeidegrenJohn Leidegren · Nordic.js 2018