Conditional promise streaming and unlocking SvelteKit view transitions
Hey, how's it going?
I've got two new blog posts to highlight for you this week: one on view transition support landing in SvelteKit, and another on conditionally streaming data. I also share out resources from the in-person talks I gave over the summer and link some interesting articles and tools I've found lately.
View transitions in SvelteKit 1.24
If you've been following me for a bit, you'll know I've done a lot of experimenting with the new view transitions API coming to browsers. This API streamlines the process of animating between two page states, which is especially useful for page transitions. If you haven't heard about this API before, the Chrome explainer is a good place to start.
While you could use them with SvelteKit, until recently hooking into the right place in SvelteKit's navigation lifecycle required a lot of workarounds and was prone to race conditions. It was also not a great experience, since you had to start the view transition before data loading had started, potentially freezing the page for several seconds on a slow API call.
The recently-released SvelteKit 1.24 adds a new onNavigate lifecycle hook that was purpose-built for page transitions with view transitions. Specifically, it allows 1) starting a task after data loading has completed, but before the new page is rendered and 2) delaying the navigation until an asynchronous task has completed (in view transitions' case, when the page animation has finished playing).
If you want to know more and learn how you can get started with view transitions today, I've got the full rundown over on the Svelte blog. I've also updated my previous view transitions tutorial to cover the new API.
Unlocking view transitions in SvelteKit 1.24
Conditionally streaming data
Then, for the first time in quite some months, I wrote a new tutorial on my own blog. Here's a bit from the intro:
If you return a nested promise from a SvelteKit load function, the result will be streamed to the browser as it resolves. This can be a great way to show the user the page as quickly as possible, and stream the slow data in as it’s available.
However, streaming data comes with its downsides.
It only works when JavaScript is enabled — if you stream data, the server-rendered HTML will not have the resolved value. Because of this, SvelteKit recommends you only stream non-essential data so users can still get the information they need when JavaScript is not available.
Even if you don’t care about supporting users without JavaScript, if you server-side render your app then streaming data will cause a “flicker” of loading state on the initial page load, no matter how quickly the promise resolves.
Let’s see how we can resolve those issues by conditionally streaming data depending on the request.
This is a technique I've used quite a few times in my own side projects, so I was happy to finally write it up.
Conditionally stream data in SvelteKit - Geoff Rich
Preventing loading flickers and serving users without JavaScript
My first in-person talks
Last time I sent out this newsletter, I was still prepping for the multiple in-person talks I had this summer. They were a lot of fun to do, but I'm definitely glad it's over - it was a lot of work! I saw one estimate that every minute of your talk translates to about an hour of prep time, and I think that's right.
The talks weren't recorded, but I did post my slides, and some of the content might be repurposed into blog posts in the future.
- SeattleJS: an Introduction to SvelteKit
- THAT Conf: Building Efficient, Resilient Web Apps With SvelteKit
I'd love to do more speaking, but I think once or twice a year is about my limit. I definitely loved being at a conference, though, especially when I got to meet other folks using Svelte and/or SvelteKit in production.
90-minute SvelteKit crash course
I mentioned in my last newsletter that I used the same demo app for both these talks, a music library app I called Sveltunes. I also recorded a 90-minute crash course from This Dot Labs' "JS Drops" series, where we build this app from (mostly) scratch. If you want to get more familiar with SvelteKit's essential features, this is a good way to do so!
At time of writing, it's the most-viewed JS Drop on their channel, which is pretty exciting to see.
Reading list
Here are some articles I’ve enjoyed lately.
- Something magical is coming 👀 big Svelte news is dropping on September 20
- My favorite talk I went to at THAT Conf was Steven Hicks' "Working Effectively With Pull Requests". There was lots of good content about how to create good PRs and provide helpful, constructive feedback. A lot of this applies to open source PRs too! Again, not recorded, but the slides get you the gist.
- I was blown away by this Three.js + SvelteKit demo shared by Tyler Johnson in the Svelte Discord showcase channel that recreates the HUD and visors from Metroid Prime. The world is rendered via Three, but the HUD is all Svelte components. Check out my tweet if you want to see a video of it in action. GitHub
- While view transitions are exciting, there's definitely the temptation to overuse them and create time-wasting, unintuitive animations. Jake Archibald recommended the Material Design Transition guidelines to see some examples of good transitions and their anti-patterns.
- I had no idea the VS Code Debug Terminal was a thing. This made it super easy to debug the SvelteKit app I'm working on -- just run
npm run devinside the debug terminal and you should be able to set and hit VS Code breakpoints. - I always enjoy reading Taylor Hunt's posts on dev.to, which take a thorough and real-world look at building performant web apps. While somewhat outdated (originally written in 2021, but published recently), his latest post "Why Not React?" is worth a read.
- Ben Myers' "How I Write Alt Text for Code Snippets on Social Media" is essential reading if you share images of code snippets on social media.
- knip looks like a good tool to "find unused files, dependencies and exports in your JavaScript and TypeScript projects"
- This "The Last Jedi DVD Menu (If it was 2007)" video triggered some early-2000s DVD nostalgia I didn't know I had.
Cat update
These fellas will be such jerks to each other and then do this.
Highlight* of my summer was when Percy was at the vet all day for a tooth extraction, and then Oliver hissed and growled at him for a week until his smell got back to normal 😭
*not a highlight
Until next time! As always, you can find me on Mastodon, Twitter, and my personal site.