Stop Building APIs: Generate TypeScript from Ash

A tutorial on using Ash TypeScript to automatically generate TypeScript client code from Ash resources for a React frontend.

In this video, I explore Ash TypeScript, a new library that automatically generates TypeScript client code from your Ash resources. We'll build a stock explorer app using SEC data to demonstrate how this eliminates the complexity of designing APIs and building client libraries when you need JavaScript frontends for your Phoenix apps. What's covered: - What is Ash / how do you use it? - Creating and seeding a database - Building a LiveView interface with pagination and infinite scrolling - Adding React to a Phoenix project - Installing and configuring Ash TypeScript with automatic code generation - Implementing TanStack Query / Table / Virtual for high-performance data grids - Comparing LiveView with React for large dataset performance Links - Demo repository: github.com/ChristianAlexander/ash_typescript_demo - Ash TypeScript documentation: hexdocs.pm/ash_typescript - SEC datasets: sec.gov/search-filings/edgar-search-assistance/accessing-edg… - Ash Framework: ash-hq.org Timestamps What are we doing? - 00:00 Start building - 01:58 Ash domain - 03:52 Exchange resource - 05:09 Company resource - 12:56 Seed the data - 18:10 LiveView UI - 21:05 LiveView streams - 23:34 Ash pagination - 25:42 LiveView pagination - 28:17 Adding React to Phoenix - 31:06 Set up Ash TypeScript - 34:56 Calling from React - 37:23 Room for improvement - 39:45 Adding TanStack - 41:16 TanStack Virtual - 44:22