Building a TypeScript-first framework from scratch

Dominic Gannaway joins us to talk about Ripple.js, a new TypeScript-first UI framework built with its own templating language and a focus on clarity and reactivity. We explore how Ripple.js handles fine-grained updates through its track and block system, why it avoids global state, and how context plays a key role. Dominic also walks us through the developer experience, from the language server and VS Code integration to syntax highlighting and the Prettier plugin, plus how the framework handles error boundaries, server-side rendering, future plans, and more.

Links

Twitter: https://x.com/trueadm
Github: https://github.com/trueadm
LinkedIn: https://www.linkedin.com/in/dominic-gannaway-414b7750

Resources

RippleJS GitHub: https://ripplejs.github.io
RippleJS website: https://www.ripplejs.com/

We want to hear from you!

How did you find us? Did you see us on Twitter? In a newsletter? Or maybe we were recommended by a friend?

Fill out our listener survey! https://t.co/oKVAEXipxu

Let us know by sending an email to our producer, Elizabeth, at elizabeth.becz@logrocket.com, or tweet at us at PodRocketPod.

Check out our newsletter! https://blog.logrocket.com/the-replay-newsletter/

Follow us. Get free stickers.

Follow us on Apple Podcasts, fill out this form, and we’ll send you free PodRocket stickers!

What does LogRocket do?

LogRocket provides AI-first session replay and analytics that surfaces the UX and technical issues impacting user experiences. Start understanding where your users are struggling by trying it for free at LogRocket.com. Try LogRocket for free today.

Chapters

00:00 – Intro & What is RippleJS
01:00 – The Origins and Naming of Ripple
02:00 – A New UI Framework Built on TypeScript
03:30 – Creating a Custom Language and Templating System
05:00 – Building Ripple’s Tooling and Language Server
06:00 – The Team, Open Source Growth, and Early Feedback
07:00 – From UI Framework to Meta Framework
09:00 – Integrating AI into the Dev Server
10:30 – Handling Controversy and Changing the Status Quo
11:30 – How Ripple Was Built in a Week
13:00 – Redesigning the Reactivity System
16:00 – Why Ripple Doesn’t Use Global State
19:00 – Lessons Learned from Other Frameworks
21:00 – Naming Conventions and API Design Decisions
22:30 – Error Boundaries and Async Patterns in Ripple
24:00 – Accessibility and ByteDance Native App Integration
25:00 – The Team’s Workflow and Contributor Culture
27:00 – Building TypeScript-First from Scratch
29:00 – Language Server, Source Maps, and VS Code Integration
31:00 – Building in Public and Open Source Collaboration
32:30 – The Future of Frontend Frameworks
34:00 – How Ripple’s Ideas Might Influence Others
35:00 – AI, Security, and the Road Ahead
36:00 – Closing Thoughts & How to Get Involved