Is Svelte becoming React? Scott and Wes explore the exciting updates in Svelte 5, including Runes, Snippets, odd font choices, and performance benchmarks, while discussing custom event updates, migration tips, and potential performance gains. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="6"> <a href="#t=00:00">00:00</a> Welcome to Syntax! <ul> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="https://youtu.be/8DQailPy3q8?si=EHDGByYwUpPrZHSV">Scott’s Svelte5 Overview</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=01:27">01:27</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="24"> <a href="#t=02:06">02:06</a> What’s new in <a href="https://svelte.dev/blog/svelte-5-is-alive">Svelte 5</a>? <ul> <li class="has-line-data" data-line-start="8" data-line-end="21"> <a href="#t=02:13">02:13</a> <a href= "https://svelte.dev/docs/svelte/what-are-runes">Runes</a>. <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=04:47">04:47</a> <a href= "https://svelte.dev/docs/svelte/$state">$state</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=07:00">07:00</a> $state.snapshot</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=11:47">11:47</a> <a href= "https://svelte.dev/docs/svelte/$derived">$derived</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=12:46">12:46</a> $derived.by</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=15:41">15:41</a> <a href= "https://svelte.dev/docs/svelte/$effect">$effect</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=17:24">17:24</a> $effect.pre</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=18:05">18:05</a> $effect use cases.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=22:20">22:20</a> <a href= "https://svelte.dev/docs/svelte/$props">$props</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=24:57">24:57</a> <a href= "https://svelte.dev/docs/svelte/$bindable">Binding state</a>.</li> <li class="has-line-data" data-line-start="18" data-line-end="20"> <a href="#t=27:15">27:15</a> <a href= "https://svelte.dev/docs/svelte/$inspect">$inspect</a> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://github.com/stolinski/vscode-wrap-svelte">vsode-wrap-svelte</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=28:46">28:46</a> $inspect(…).with</li> </ul> </li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=30:42">30:42</a> <a href= "https://svelte.dev/docs/svelte/snippet">Snippets</a>.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=34:22">34:22</a> Events now onclick instead of on:click.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=36:09">36:09</a> Custom events now just props instead of createEventDispatcher.</li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=36:31">36:31</a> Serif Font on <a href="https://svelte.dev/">website</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="28"> <a href="#t=40:01">40:01</a> Performance. <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href= "https://krausest.github.io/js-framework-benchmark/2024/table_chrome_130.0.6723.58.html"> Benchmarks Doc</a>.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://x.com/BenjaminMcCann/status/1825927135393177994">Benjamin McCann Tweet</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=46:41">46:41</a> Is Svelte becoming React?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=49:21">49:21</a> <a href= "https://svelte.dev/docs/svelte/v5-migration-guide">Migration</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=51:41">51:41</a> What’s next and wish list for Svelte.</li> <li class="has-line-data" data-line-start="31" data-line-end="33"> <a href="#t=57:12">57:12</a> Sick Picks & Shameless Plugs.</li> </ul> <a id="Sick_Picks_33"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> Scott: <a href="https://amzn.to/3CK2kHH">Dragon Quest 3</a>.</li> <li class="has-line-data" data-line-start="36" data-line-end="38"> Wes: <a href="https://dresscode.dev/">Dresscode.dev</a>.</li> </ul> <a id="Shameless_Plugs_38"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="40" data-line-end="42"> Scott: <a href="https://youtube.com/@syntaxfm">Syntax on YouTube</a>.</li> </ul> <a id="Hit_us_up_on_Socials_42"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

862: Svelte 5 Is Here!

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews