Syntax - Tasty Web Development Treats
984: How to Make a DOM Library Render Anything w/ Paolo Ricciuti
· Summarized
Key takeaways
- The hosts encourage listeners to participate in the March MadCSS tournament for prizes.
- Paolo Ricciuti's journey showcases the transition from ambassador to maintainer in the open-source community.
- Understanding Svelte's approach to rendering and its flexibility beyond the DOM opens up new possibilities for developers.
- The Links framework stands out as a robust alternative to traditional mobile application frameworks.
- Svelte custom renderers will enhance the framework's applicability in diverse development environments.
Summary
Introduction and March MadCSS Launch
Before diving into the main topic, the hosts introduce a new tournament video series called March MadCSS, featuring battles among 16 renowned developers to predict outcomes and win a CSS jacket and other promotional goodies by signing up at madcss.com.
Introducing Paolo Ricciuti and His Work with Svelte
The episode features guest Paolo Ricciuti, who leads the Svelte team at Mainmatter. They discuss his journey from being a Svelte ambassador to a maintainer of the Svelte project, emphasizing his experiences and the comprehensive services provided by Mainmatter in consulting and development.
Understanding Custom Renderers in Svelte
The discussion focuses on Svelte custom renderers, explaining how they allow Svelte to target various environments beyond the DOM. Paolo breaks down the challenges of custom renderers, contrasting how Svelte interacts with the DOM compared to React's virtual DOM approach.
The Role of the Links Framework
The conversation shifts to the Links framework, which serves as an alternative to React Native. They explore Links' capabilities, particularly its use of native elements and how custom renderers can translate Svelte components into different environments like mobile applications.
The CSS Handling and Custom Renderers
Paolo elucidates how Svelte manages CSS and its implications when extending Svelte to non-browser environments. He highlights the flexibility offered by Links in supporting CSS, emphasizing that while custom renderers can handle CSS, there are limitations, especially in binding inputs.
Current Progress and Future of Svelte Custom Renderers
The episode concludes with an update on the current state of custom renderers, the funding challenges for future work, Paolo's excitement for potential sponsorships, and the timeline for making these innovations publicly available.
Sponsors
- madcss.com · Join our CSS battle tournament to win prizes and test your CSS prediction skills!
- sentry.io · Get visibility into your production application errors with Sentry.
Show notes
Wes and Scott talk with Paolo Ricciuti about Svelte custom renderers and how Svelte actually talks to the DOM. They dig into compiler internals, CSS handling, native bridges, and the realities of maintaining ambitious open source tooling.
Show Notes
00:00 Welcome to Syntax!
March MadCSS
01:44 Paolo’s role at Mainmatter and his work on Svelte custom renderers
02:52 Why Paolo chose Svelte
Why I choose Svelte
Shift Dev 2019: “Rethinking Reactivity”
05:16 From Svelte ambassador to working on the project
07:45 How custom renderers change what Svelte can target
10:10 How Svelte uses the DOM and why that makes custom renderers tricky
20:32 What Lynx provides and how it differs from a web view
24:18 Brought to you by Sentry.io
35:56 Using Svelte with CSS outside the browser
39:09 The timeline and current state of the Lynx app
44:51 Sick Picks + Shameless Plugs
Sick Picks
Paolo: Opencode
Shameless Plugs
Paolo: Svelte Custom Renderers | TCMP
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
Randy: X Instagram YouTube Threads
Follow this show on AudioBrevity and new episodes get summarized for you. Create a free account