00:00:00Hello everyone! Welcome to another Basel community session.
00:00:29I'm Maya Avendano and I'm a DX engineer here at Basel.
00:00:32If this is your first time in one of our sessions and you can't see the chat,
00:00:35feel free to join us on our community platform at community.basel.com/live.
00:00:41And there you can use the chat, you can ask questions, which is highly encouraged by the way.
00:00:45Or if you're watching on X or any other platform, feel free to use that as well.
00:00:49Now, for today's session, I'm really looking forward to, because fun fact,
00:00:53I was a Svelte dev for a few years and I've built many a side project with Svelte.
00:00:58So I'm a big fan and I've even got the t-shirt.
00:01:01So yeah, for fellow Svelte fans and Svelte curious folks,
00:01:06we have some of the Svelte team here today. So welcome.
00:01:12Hi. Hey everyone! Do you want to tell us a bit about who you are?
00:01:21Sure, I'm Alsop. My name's Rich.
00:01:24I have been working on Svelte for 10 years because that's when I started the project back in 2016.
00:01:32Initially, so that I could use it in my day job as a journalist, doing visual journalism,
00:01:38using JavaScript to help tell the news. And then four and a bit years ago,
00:01:44I moved to Basel and it became my full time job and I've been doing it ever since.
00:01:53Yeah, I think no one else can claim to have as many years as you.
00:01:57I think I have like five years of Svelte maintaining, I think.
00:02:02So I got into, my name is Simon. I also work at Basel on Svelte
00:02:08and I got to Svelte through a hackathon at my previous company.
00:02:13I wanted to try something else. Back then, I was mainly doing Angular.
00:02:18Went Svelte for a hackathon, immediately fell in love, but also knew,
00:02:22"Okay, I cannot use this in my day-to-day job, so why else can I stay in contact with Svelte?"
00:02:29Very nerdy, I know. But so that way, I became a part-time maintainer.
00:02:34And a few years later, I had the opportunity to join Basel to work on it full time.
00:02:39And yeah, happy ever since.
00:02:43I'm Elliot. As I like to remind Rich every once in a while,
00:02:46I actually graduated high school the year he started Svelte.
00:02:49So I have not been around maintaining that long.
00:02:54But I did, I started, I don't remember if it was late 2021 or early 2022.
00:02:59Sometime during the SvelteKit beta was when I kind of found and joined the Svelte community.
00:03:04And then actually ended up starting at Vercel not that long after Rich did, I think.
00:03:09It was like fall of the same year, if I remember correctly.
00:03:12But I worked on a bunch of other stuff like to do with the Vercel website.
00:03:16And then, shockingly now, a year and a few months ago, seems like a much shorter time than that,
00:03:23I got to move over to the Svelte team. So I've been working on it full time since then.
00:03:27I think recently, the cool stuff recently is I get to write the async SSR implementation for Svelte.
00:03:36So that kind of stuff is just the really nerdy, cool software development stuff that I love
00:03:43and have always loved about Svelte.
00:03:48Amazing. So great to have you all here.
00:03:51And for those in our audience that may not be familiar, can you briefly explain Svelte and SvelteKit?
00:04:00We can certainly try. Svelte is, well, it's many things.
00:04:04It is a community, it is a way of life, but it is also a declarative component framework.
00:04:11If you've used things like React and Vue and so on, then you're familiar with the basic concept
00:04:15that instead of writing, you know, document dot create element and, you know, set attribute and all this stuff,
00:04:21you describe your app in terms of declarative components.
00:04:25And then the framework's job is to take that declarative intent and translate it into what actually happens on the screen.
00:04:33Svelte is a little bit different to those frameworks in that it has this compiler first design.
00:04:40Essentially, it is a language that is turned into very high performing vanilla JavaScript.
00:04:48In terms of usage, it's pretty similar to a lot of those other frameworks, but because of its design,
00:04:53we get to do things in a slightly nicer, slightly more compact way than some of the frameworks.
00:04:58And then in addition to Svelte, which is the foundation layer, as it were,
00:05:02we have this framework that sits on top of Svelte called SvelteKit,
00:05:08which, if you're familiar with the React world, is kind of like our next JS.
00:05:13And that adds all the other stuff, the routing and server-side rendering, the data loading and the build tool
00:05:18and all of the stuff that you need if you're building an app, but don't really want to have to
00:05:24fast around building yourself.
00:05:28Fabrius, thank you so much.
00:05:29And you guys have been busy cooking behind the scenes as well.
00:05:32And I'd love to know more about what you've been up to over the past few months.
00:05:37Have you got some demos as well, I hear?
00:05:41We do have some demos.
00:05:43I mean, should I kick this off?
00:05:44Because I think sequence-wise, it would make more sense to talk about the Async Svelte development,
00:05:51and then we can move on to the things that we're building on top of that.
00:05:55Sounds good.
00:05:55OK, so for the last year-plus, maybe, I'm actually not too sure.
00:06:02We've been working on what we loosely refer to as asynchronous Svelte, which maybe if I share my screen,
00:06:12I can give a little demo of what that is, and then we can move on to some of the uses of Async Svelte.
00:06:20I've just got to remember how to find the share screen button.
00:06:26Go through all of the permissions dialogues.
00:06:28Bear with me.
00:06:30Share entire screen.
00:06:33Boom.
00:06:34OK, I think I'm sharing my screen.
00:06:35Am I sharing my screen, or is it still backstage?
00:06:38Yes, we see.
00:06:40OK, so for the uninitiated, this is Svelte.dev.
00:06:43This is our website.
00:06:44This is the playground where you can try Svelte without having to install anything
00:06:49or muck about with a command line.
00:06:51You can just write code straight in here.
00:06:53And so this is the default playground that you get.
00:06:55Maybe I'll make that a little bit bigger so that everyone can see.
00:06:58So here we have some state.
00:07:03So these funny things, these are called runes.
00:07:05This is how you say that something in your Svelte component is going to change,
00:07:10and that when it changes, we will need to do a re-render.
00:07:12So we have a name, and we have a count.
00:07:15And then we're displaying that name up here.
00:07:17And then we're binding the value of that to the contents of this.
00:07:21So we can do that.
00:07:24And we can click on this button, and that will make things go up.
00:07:27All very straightforward things that every framework
00:07:29can do in some form or fashion.
00:07:35What Async Svelte adds is the ability to use the Awake keyword directly
00:07:41inside your components.
00:07:45So let's say-- let's get rid of the name and all of this stuff.
00:07:49And let's turn this into an ID and start from one.
00:07:56And what I'm going to do is I'm going to pull in some JSON
00:08:01from an external source.
00:08:04I'll begin by creating something that is derived from the ID.
00:08:10So this URL is going to be computed whenever that ID changes.
00:08:16And you can see that if I do URL here, then as this changes,
00:08:22the URL also changes.
00:08:24And then I'm going to get some data using that URL,
00:08:28my data equals derived.
00:08:30And then inside here, I can do Await fetch URL.
00:08:36And then we want to take the response and turn it to JSON.
00:08:41I'm sure everyone's seen this sort of thing
00:08:43if you're working with development a million times.
00:08:47And then down here, let's create a block quote
00:09:00and show the data that we're pulling from here.
00:09:03So you can see that if we actually look at the--
00:09:06that's broken.
00:09:13So this is what we're going to get, and we want to be able to display that.
00:09:16So inside here, I'm going to do data dot quote like that.
00:09:21Oh, something is broken.
00:09:23Simon Elliott, if you can see what I've broken, then do weigh in.
00:09:28Oh, no, it's just the delay.
00:09:30OK.
00:09:31And then below that, we'll add the author of the quote.
00:09:40And maybe we'll get rid of that delay while we're working on it.
00:09:44I don't know.
00:09:46It would help if I wrapped that in the curlies.
00:09:50And now if I click on this, then it's going to go away,
00:09:55and it's going to fetch some new data, and it's going to render it.
00:09:58That might sound pretty basic and pretty trivial,
00:10:01but if you look at how you have to do this in basically every other framework,
00:10:08it quickly becomes frighteningly complicated.
00:10:10You have to have some local state, and then you
00:10:13have to have an effect, which maybe that's
00:10:16user effects or the equivalent in other frameworks, in which you do the fetch.
00:10:20And then when the fetch resolves, then you assign to that local state,
00:10:25and you've got to handle errors and all of that stuff.
00:10:27And it becomes really quite complicated.
00:10:32But with this, it just kind of works.
00:10:36And if there is a delay--
00:10:43then it continues to work.
00:10:45Although you might see that and think, hang on,
00:10:46if I'm clicking the button multiple times,
00:10:49I actually just want to jump to the final result.
00:10:51I don't want to do all of this stuff in the middle.
00:10:53So we can do that too.
00:10:54We can say inside here, if I import this helper called
00:10:58get abort signal from self, and then pass that signal to the fetch,
00:11:11then this time, as I click the button,
00:11:15it will actually discard all of those intermediate requests
00:11:19and jump straight to the final one,
00:11:21because those earlier requests are resolving too late.
00:11:26And by that time, we've already changed the idea again.
00:11:28So we're canceling the existing signals.
00:11:33All right, what else can we do?
00:11:34Well, maybe I want to see this button update immediately.
00:11:38So we can say state.eager to break out
00:11:43of the async holding.
00:11:47It's also kind of useful.
00:11:49And we can add some styles.
00:11:51We can say data loading equals effect.pending
00:11:58is greater than 0.
00:11:59And then if we are in a loading state,
00:12:04then we can fade it out while we're loading stuff.
00:12:11And this is, again, all stuff that if you
00:12:13were trying to coordinate it yourself
00:12:15would be fiendishly difficult.
00:12:17We can go even further.
00:12:19Let's say I want to add a photo to go with the quote.
00:12:28It might look like this.
00:12:37If I change it, then I'm going to get
00:12:41a bunch of different photos.
00:12:42Apparently, all of laptops, I'm not sure why that is.
00:12:46OK, there's a nicer picture.
00:12:48Although, you'll notice that there's
00:12:50a little bit of a delay there.
00:12:52We get the data for the quote, and then the image pops in.
00:12:57Because we're rendering the image,
00:12:58and then we're having to go back to the network
00:12:59to get the image, and that's not great.
00:13:02So if we replace that with a little preload
00:13:07helper, which I'm going to import from my utils module,
00:13:17then this time around, we'll see that the image and the quote
00:13:24both come in at the same time.
00:13:27I have just revealed a little bug.
00:13:28We'll have to go and fix that.
00:13:30But you get the idea.
00:13:31We can use a weight inside our computations,
00:13:34and we can use it inside our template.
00:13:36And all of these things are perfectly coordinated
00:13:40in a way that works with multiple components,
00:13:44all doing work independently in response to the same events.
00:13:47It works with server-side rendering.
00:13:49It does all of these things that if you
00:13:52had to do it without asynchronous spell
00:13:55would be supremely painful.
00:13:58And with this foundation, we're able to build
00:14:02some pretty cool stuff, which I'm going to hand over
00:14:05to the other two to talk about.
00:14:09Yes.
00:14:10I'm going to quickly demo the remote functions, which
00:14:17will be built on top of this.
00:14:19So now that we have async in Svelte, this is really powerful.
00:14:24But SvelteKit, the meta framework on top of it,
00:14:27is kind of still in the old world, so to speak.
00:14:30We have these load functions, which live in a different file.
00:14:34And with that, we cannot really make use of all this new, cool
00:14:38stuff we have just seen.
00:14:41And so what we are working on right now is remote functions.
00:14:45They are already available in SvelteKit.
00:14:48They're experimental, but you can use them already.
00:14:50And I'm going to just show the simplest possible way
00:14:55to have remote functions here, just for the sake of time.
00:14:59So what I'm going to do is I'm just
00:15:01going to create a very, very simple counter where
00:15:04whenever I click the button, it's going to increment the count,
00:15:08but the count will live on the server.
00:15:10And so I will implement this into this counter.remote.ts file.
00:15:16I'm just going to start with a count.
00:15:18And then be like, get count.
00:15:20And then we're going to use a query from $app/server.
00:15:26And this is a remote query.
00:15:29And we're just going to return the count here.
00:15:31And on the other side, we can then make use of that
00:15:37and say, await get count from the file we just imported.
00:15:44So this import looks like a regular import for TypeScript.
00:15:48It is just that we are importing a function,
00:15:52and then we're calling it, and it returns a promise.
00:15:54So we are awaiting it.
00:15:56But actually, this is crossing the client-server boundary.
00:16:01So this get count, this actually lives on the server.
00:16:05So what's actually happening is that the client
00:16:08is sending off a request to a hidden endpoint
00:16:14and returns the data from there.
00:16:17And of course, it's also like server-side rendering.
00:16:19So on an initial load, this will not request from the backend,
00:16:23but will do it directly.
00:16:25And now we have this count, but we cannot do anything yet
00:16:29with it.
00:16:29We want to increment it.
00:16:31So this will be the other for a remote function.
00:16:34We're just going to implement really quickly-- no copilot.
00:16:38This is the wrong command.
00:16:40We want command from $app/server.
00:16:45And in here, we're just going to update our server state.
00:16:49And that in itself will not help yet,
00:16:52because we also need to tell it, because it's a command,
00:16:55to also send an update along with it.
00:16:58And so we're just calling get count, our remote function here,
00:17:03and calling refresh on it.
00:17:05And with this, we're basically telling it,
00:17:08do like a single-flight mutation.
00:17:10When you are called, increment the count by one,
00:17:14and then send back to the client the information
00:17:19that, whenever get count is used on this page,
00:17:22that it should now increment by one,
00:17:24that there is a new state available.
00:17:27And so if I now add this in here,
00:17:29I'm going to do like on click and just increment count.
00:17:37This is all I'm going to do.
00:17:38It looks like a regular function call.
00:17:40But again, this actually calls the server.
00:17:43And now when I click this, I'm incrementing this.
00:17:49So this was like a super, very, very rough sneak peek
00:17:53into remote functions.
00:17:55You can build much more stuff with it.
00:17:58It also works beautifully together with AI.
00:18:01So for example, like five minutes before the session started,
00:18:06I asked this code copilot, hey, build me
00:18:12a portal-themed basic block where I
00:18:18want to show off a few of the remote functions.
00:18:20And you should use Svelte 5 with the MCP, the spelled MCP.
00:18:25Elliot's going to talk a bit about that soon.
00:18:29Use that and use remote functions and use async.
00:18:32And it basically one-shotted it.
00:18:34So this is pre-rendered.
00:18:35The block is pre-rendered.
00:18:37And I can now type in here--
00:18:42save around here.
00:18:43And it updates it.
00:18:49And under the hood, this is basically doing the same.
00:18:53Just really quickly glancing over this,
00:18:56we're using await get posts.
00:18:59Get posts is a pre-render function,
00:19:01which means it's executed on at build time instead
00:19:05of at runtime.
00:19:06We have a comment section down here
00:19:12where we're loading the comments and we're using a form to then
00:19:15post a new comment and so on.
00:19:19And this is all using remote functions, no load functions
00:19:23anywhere.
00:19:24And AI one-shotted this.
00:19:27And Elliot is going to talk a bit about that in more detail
00:19:32now, I think.
00:19:34Yeah, sounds great.
00:19:37I got to do the same Rich Harris stuff
00:19:41that we had to do at the beginning with sharing screen.
00:19:46OK, there we go.
00:19:52So I'm going to take a minute to talk to you guys about the AI
00:19:57development that we have been doing recently.
00:19:59And by we, I want to be very clear that I do not mean me.
00:20:02I mean mostly a guy named Paolo and some other
00:20:06of our contributors on Svelte.
00:20:09Actually, most of the AI-related stuff that we have done recently
00:20:13has been from them.
00:20:14So huge thanks to them.
00:20:15They've done an amazing job.
00:20:18And yeah, let me zoom in here for you.
00:20:24There we go.
00:20:27So I could take a long time walking
00:20:28through what we have built to be able to do it
00:20:31because we have an MCP server.
00:20:32It's got some really cool functions to it.
00:20:36We've got some skills that we have published.
00:20:38But thankfully, you actually don't
00:20:41have to know in detail how all that works
00:20:43because we have also published Open Code and Cloud Code
00:20:47plugins.
00:20:48So I'm going to install the Open Code plugin here, which
00:20:52basically just means copying this configuration
00:20:55and then dropping it into an Open Code.json
00:20:58file in your library.
00:21:00And I'm going to just have Open Code build me a site with it.
00:21:06And we'll see how this goes.
00:21:10So I'm going to ask it.
00:21:11I have provided some images in assets.
00:21:17Let me zoom this in for you as well, unfortunately.
00:21:28Unfortunately, it doesn't look like I can zoom it in for you.
00:21:34There we go.
00:21:34OK.
00:22:00[TYPING]
00:22:06And we're going to see what happens with that.
00:22:09No mistakes.
00:22:11Yeah, exactly.
00:22:12That's very important.
00:22:13If you don't put that at the end of your prompts,
00:22:15they don't work as well.
00:22:18But while this is going on, I can fill you
00:22:21in a little bit on the stuff that they have been working on.
00:22:25So if you come in here to the Svelte site
00:22:28and you come to our AI docs, you get the overview of everything.
00:22:32We have published an MCP, which has its own CLI stuff with it.
00:22:36And it has a number of--
00:22:40oh, hey, he fixed this within the last five minutes.
00:22:43So it looks different than what it did five minutes ago.
00:22:46But we have several tools that it enables on your machine.
00:22:51Most of them have to do--
00:22:53or the first two have to do with getting good information
00:22:58about Svelte.
00:22:58So it teaches your agent how to read the documentation
00:23:03and specifically read it in such a way
00:23:05that it can get the specific information that it's
00:23:08looking for without just dumping the entire docs
00:23:11or having to explore them and wasting
00:23:12time and context and all that.
00:23:15There's this really awesome Svelte autofixer
00:23:17that they have built that notices patterns
00:23:21that LLMs tend to use that are not good and fixes them.
00:23:26And it also has some playground integration with our playground
00:23:33that you can use right here.
00:23:37And the other cool thing that we have
00:23:39is one of our core design decisions
00:23:44when we're looking at all of this AI stuff
00:23:46is how do we make this useful for agents as well as people?
00:23:52We don't want this to be some opaque thing
00:23:55where your agent magically knows stuff.
00:23:59You don't know it.
00:24:00It's hard to figure it out.
00:24:01So basically, everything that we do,
00:24:04we try to integrate into the documentation as well.
00:24:07And so our skills that we have published,
00:24:09which are part of this open code plugin or cloud code
00:24:12plugin when you install it, they actually
00:24:15publish all of their content to the docs as well.
00:24:18So you can always know that if you're
00:24:20wondering what best practices we're telling your LLM about,
00:24:25you can come read them yourself.
00:24:27And they will always be up on our site just like this.
00:24:31So let's go back and see how much churning
00:24:34this thing has done.
00:24:35Not much so far.
00:24:39Maybe a lot, actually.
00:24:45Yeah, so we have a lot of styling going on.
00:24:56And I guess I'll just pull up my local host
00:25:00and see what it's done.
00:25:03Nothing.
00:25:07OK, well, I don't want to hold this up
00:25:10while this is still thinking through its whole process.
00:25:12It might take a while.
00:25:13So if we have time at the end, we can come back
00:25:15and see what the LLM came up with for our artisanal potato cannon
00:25:19business.
00:25:20But yeah, that's our AI development that we've done
00:25:25over the last few months.
00:25:26Fantastic.
00:25:32Yes, super relevant in the new era.
00:25:37I would really love to know what's next.
00:25:40What are you guys looking forward to?
00:25:46The next release is going to be Spelt Kit 3.
00:25:51Actively working on that at the moment.
00:25:53But it's not going to be a huge thing
00:25:56with loads of new features.
00:25:57It's basically an opportunity to deprecate
00:25:59a lot of the old stuff, kind of clearing the decks
00:26:02so that we can build all of the exciting new stuff.
00:26:06The biggest change is that it's going to be using the environment
00:26:09API now that V8 has been released literally two hours ago.
00:26:15And it will require Spelt 5 as the latest version.
00:26:21So if you're more than able to use Spelt 4.
00:26:25And then beyond that, we will be focusing
00:26:29on making async Spelt stable and making remote function stable.
00:26:33Sounds good.
00:26:37And I hear on the grapevine that I'm
00:26:41going to pass over to Elliot because the LLM has
00:26:44been cooking.
00:26:46Do you want to show us what you've got?
00:26:47As these things go, it decided to finish up
00:26:49roughly a millisecond after we transition to the next spot.
00:26:55So let's go here.
00:26:59Yeah, so here's our artisanal potato cannon storefront
00:27:03that we just got with roughly $1 tokens.
00:27:07And it actually, glancing through the code,
00:27:13did a really good job of not doing anything really crazy
00:27:17and using what I would consider to be best practices for Spelt.
00:27:22So try it out.
00:27:25Let us know how you like it.
00:27:27I've been really impressed with the work
00:27:29that Paolo and the others have done on all of this AI stuff.
00:27:33And we would love to keep improving.
00:27:35So give us your feedback as you have it.
00:27:38Thanks.
00:27:40Love it, the demo gods on our side today.
00:27:45Shall we open the floor to some questions?
00:27:47I think we've already got some in the chat.
00:27:51I'll start us off, shall we?
00:27:53So we've got one for Remote Functions.
00:27:57Will we get streaming for Remote Functions?
00:28:00Remote Functions DX is just so great.
00:28:03Want to use them everywhere.
00:28:05Yeah, I think Richard can take this
00:28:06because you're in that area.
00:28:10Yes, it's so funny you should mention that.
00:28:12Because I'm actually building an app at the moment that
00:28:15really needs this feature.
00:28:17And we-- so Simon worked on a PR a while back,
00:28:22which implemented parts of it.
00:28:23We've had some-- like our ideas about the design
00:28:28have evolved a little bit since then.
00:28:31But it's something that we're very anxious to get back to.
00:28:35So yes, maybe if we were doing this a week from now,
00:28:40we would be able to say, here's the pull request.
00:28:43We're not quite there yet.
00:28:44But rest assured, it is a very high priority.
00:28:47And we're very excited for this feature.
00:28:49For those who aren't familiar, basically what
00:28:51we're talking about is having essentially a real-time version
00:28:55of the query function, where when you request
00:28:59the data from the server, it will return an async iterable,
00:29:04which every time there's new data,
00:29:09it will yield that data back to the client.
00:29:12So you can have real-time data without any sort of polling
00:29:15or anything like that.
00:29:16And as soon as the page is no longer displaying that data,
00:29:21the request shuts off.
00:29:23And the async iterable cleans itself up.
00:29:26And it's just a really nice way of thinking
00:29:28about these real-time problems.
00:29:31Yeah, very excited for that.
00:29:33And to be fully clear here, I want
00:29:35to just let you guys know that what Rich means by we'll
00:29:38get to it soon is Elliot is currently blocking me
00:29:40from working on this.
00:29:41And I'm waiting for him to finish something.
00:29:43So as soon as I'm done with what I'm working on right now,
00:29:45we'll be on it.
00:29:46Nice.
00:29:50We have another question.
00:29:52And that's, why choose Svelte over other frameworks?
00:29:55Obviously, we think it's the best and most capable framework.
00:30:07But the real reason to choose any framework
00:30:11in this day and age is because you
00:30:13enjoy it more than you enjoyed the others, honestly.
00:30:18So much of it is more about personal preference
00:30:20than it is about anything else.
00:30:22And especially nowadays, when it's
00:30:24really easy to switch between frameworks,
00:30:28you have a magical wizard at your disposal who can teach you how--
00:30:32I'm used to doing it this way in Vue.
00:30:35How would I do it in Angular or whatever it is?
00:30:37They can do that.
00:30:38The learning curve has been essentially flattened
00:30:43in this day and age.
00:30:45So you should use the tool that you are most productive with
00:30:49and that you are happiest to be a user of.
00:30:53And part of that is about the community around the project.
00:30:57Part of it is around the overall philosophy of the project.
00:31:02But what I don't think you need to do in this day and age
00:31:05is make a decision based on which framework can do the thing.
00:31:11Because they can all do the same things,
00:31:13or which framework has the biggest ecosystem.
00:31:16Because that's really not a concern anymore.
00:31:18So just pick the framework that is the most fun.
00:31:21And we think that that is obviously spelled.
00:31:26Fantastic answer.
00:31:27Love it.
00:31:29Next, we have someone asking, any new stuff related to cache?
00:31:35Yeah, I think this is about remote functions probably.
00:31:38So in the context of remote functions,
00:31:41we don't have any cache API yet.
00:31:45There's an internal proposal.
00:31:48It's inactive work.
00:31:51It's put to the side amidst all the other work that's ongoing.
00:31:55But it will be picked up again soon.
00:31:58And then we're going to have a really nice caching API that
00:32:01integrates with remote functions.
00:32:05Amazing.
00:32:06We have a light hearted question.
00:32:08Where is your dream Svelte Summit location?
00:32:10Oh, wow.
00:32:13Do you want to do a round robin on the spot?
00:32:16You're muted, Elliot.
00:32:22So I mean, if we're talking summits,
00:32:24we've got Everest, K2.
00:32:28No, but for me, the location doesn't matter that much.
00:32:34Because I'm pretty much hanging out
00:32:36with the other Svelte developers.
00:32:38So as cheesy as it sounds, pretty much anywhere is awesome.
00:32:43But Europe's really cool.
00:32:46So pretty much anywhere over there
00:32:48is somewhere that I haven't been to yet and would like to go.
00:32:51So I'm always happy for an excuse to go anywhere overseas.
00:32:56There's a tendency in the Svelte world
00:33:01to use the SV prefix with everything.
00:33:04So whatever word it is that you're
00:33:06trying to build a library or a concepts around,
00:33:08you just put SV in front of it.
00:33:11And I think if we really leaned into that,
00:33:12then we would have our conference in Svalbard.
00:33:15Nice.
00:33:20Which is like a-- it's a Norwegian archipelago.
00:33:23Did you just Google that on the spot?
00:33:27It actually came up in conversation the other day.
00:33:31Yeah, randomly.
00:33:35Yes.
00:33:38So if I can fully dream, I think my dream location
00:33:41would be on a boat, actually.
00:33:45Just on the sea.
00:33:47Nice weather.
00:33:49And just have, I don't know, three days on a boat.
00:33:52That would be cool.
00:33:55All of the above sound lovely.
00:33:57And I'm very excited for whenever the next Svelte Summit is.
00:34:00And just on community and events,
00:34:03we have a question saying, how can people
00:34:05get involved with Svelte, any events, or community
00:34:07opportunities?
00:34:11There's events going on all the time.
00:34:13If you go to sveltesociety.dev, then you
00:34:15can see a calendar of events.
00:34:16And there's also lots of resources on the best ways
00:34:19to get involved, particularly if there isn't something
00:34:22in your area and you would be interested in starting
00:34:25a chapter of Svelte society, then sveltesociety.dev
00:34:28is the place to get information.
00:34:33Yeah, and also, if you're very new, hop into the Discord
00:34:36and just say hi in one of the various channels.
00:34:41There's also dedicated channels for the various chapters
00:34:47or localized.
00:34:49So mostly, they are references to other Discord channels
00:34:55in the respective language.
00:34:57So for example, there's also a German Svelte Society Discord
00:35:00channel.
00:35:01So yeah, just hop into the channel and Discord channel,
00:35:06and you can go from there.
00:35:08And otherwise, the Svelte-related channel
00:35:12is also a nice place to hang out.
00:35:16Yeah, the Svelte folks are lovely people.
00:35:18So yeah, go check them out.
00:35:22We've got another question relating to AI.
00:35:24I know, Elia, you talked on this.
00:35:26So someone asked, it's great to see frameworks adapt
00:35:29to the agent/AI world.
00:35:31I'm curious if you have stats on agents defaulting to Svelte.
00:35:36No, not really.
00:35:37We might be able to get some sort of signal
00:35:44for that through something like v0, where
00:35:46we see telemetry like that.
00:35:49But Svelte, in general, has--
00:35:53I guess I say Svelte-- the people who work on Svelte
00:35:57have taken a relatively negative approach
00:36:01to collecting telemetry on stuff.
00:36:06So pretty much, the only data we have
00:36:08is stuff that's publicly available.
00:36:10So we can look at NPM download trends, which
00:36:14I think are going insane right now for some strange reason.
00:36:18So maybe don't take those as gospel.
00:36:20Yeah, don't worry.
00:36:22But yeah, we really don't collect any data
00:36:25on our users for privacy reasons.
00:36:27We don't really want to be like that on your machines.
00:36:30So the data that we get is whatever's publicly available
00:36:35and maybe some useful stuff through some Vercel channels.
00:36:43Anecdotally, if you ask LLMs, what should you pick,
00:36:46what's the best, Svelte is mentioned often.
00:36:51So that's nice, at least.
00:36:53But if that translates to picking Svelte,
00:36:56if you don't specify it in your prompt, that's another question.
00:37:01Yeah, it's very interesting.
00:37:03Once you prompt them to think about what the ideal tool is,
00:37:06they will often say Svelte.
00:37:08But if you don't say, I want you to use this framework
00:37:11or I want you to use the best framework,
00:37:12just build me an app, they will generally default to React.
00:37:17And there's not a whole lot that we can do to change that.
00:37:21So we have been focusing our attention
00:37:23on making sure that for the teams who do choose Svelte,
00:37:27you get the best possible experience.
00:37:29And agents have the best possible ability
00:37:31to navigate the docks and figure out the mistakes.
00:37:36Yeah, and as seen by the portal-themed blog and the Potato
00:37:42Cannon website, they are getting pretty
00:37:46good at handling the context and the MCP and so on.
00:37:50So yeah, you can get pretty far pretty quickly with it now.
00:37:56Nice.
00:37:57Yeah, it's great to see all the work
00:37:58that you're doing on that and also accommodating
00:38:01both audiences of humans and agents as well.
00:38:04And we've got a couple of more specific questions
00:38:06on Svelte features.
00:38:08So one is, is it OK to have multiple calls
00:38:11to the same remote function in a markup,
00:38:14or should we have one reference in the script tag?
00:38:17Yeah, it is.
00:38:20You're working on this right now, so you take it.
00:38:24The thing that's blocking Rich from working on live queries
00:38:26right now actually has to do with this question.
00:38:29Yes, it is totally OK to call the same remote function
00:38:35multiple times and reference it multiple times
00:38:39in different places.
00:38:41When you're using remote functions,
00:38:44your mental model for queries should really
00:38:46kind of be when I call a query with an argument,
00:38:50I'm getting a reference to that query,
00:38:54and the query is different from the data itself.
00:38:57So if I call getUser with ID one anywhere in my app,
00:39:04I'm actually going to be getting the same instance of that query
00:39:07everywhere.
00:39:08So your calls to query are deduplicated across your app
00:39:11so that you maximum get one call per set of arguments.
00:39:16So different arguments produce different results.
00:39:19Same arguments produce the same query.
00:39:21They're like deduplicated across the app.
00:39:24There are some weird caveats to that right now,
00:39:28and that is what I am working on kind of fixing and codifying
00:39:33and making a little bit more clear
00:39:37this past couple of weeks.
00:39:39And hopefully that'll be out soon.
00:39:41But yes, very, very short answer is yes.
00:39:44Just call them and use them wherever you want to.
00:39:47Yeah, and just to expand on that,
00:39:48but the whole reason that we're doing all of this work
00:39:51with the await keyword and so on is
00:39:54because we want you to be able to, as far as possible,
00:39:57express everything that your component needs
00:39:59inside that component.
00:40:00So the days of fetching data up here and then
00:40:04carefully passing it down to all the things that need it,
00:40:08that is going to be over.
00:40:10But as part of that, if you have to have a reference to a query
00:40:14and then pass that around, then we
00:40:15haven't really achieved that.
00:40:17So the idea is that if this component needs some data
00:40:20and this component also happens to need some data,
00:40:22they don't need to talk to each other.
00:40:24They can just ask the system for the data
00:40:28through the query interface.
00:40:29And the system takes care of making sure
00:40:32that that only results in a single request
00:40:34and doesn't result in inconsistencies between those two
00:40:36components.
00:40:40Awesome, thank you.
00:40:42And this one is on animation and transition API.
00:40:47Is an overhaul planned for that?
00:40:49They say, I found it finicky to pass flip from /2 sizes
00:40:54via attachments.
00:40:57Absolutely chomping at the bit to work on this.
00:41:02Been looking forward to it for a long time.
00:41:04So much stuff to do.
00:41:06Yeah, everything else is getting in the way.
00:41:09Essentially, when we designed the attachments API,
00:41:12it was with precisely this in mind.
00:41:16Transitions and animations, they're neat.
00:41:19And they're integrated into the framework
00:41:21in a way that makes it very easy to do certain things.
00:41:25But as soon as you cross a threshold,
00:41:28they can't really help you anymore.
00:41:29You need more programmatic control over them.
00:41:33And that is where a programmatic API
00:41:36for defining transitions and animations would be useful.
00:41:42And the attachments API is--
00:41:46the idea is that in the future, the attachments
00:41:49API, in combination with an API for saying,
00:41:52hey, when I get yoinked out of the DOM,
00:41:54just hold on for a minute until I can do a little fade out
00:41:58or a little shimmy or whatever it is.
00:42:00And then you can remove me from the DOM.
00:42:02That is what will enable some of these more advanced transition
00:42:06animation scenarios.
00:42:09But we're just not there yet.
00:42:11It is planned.
00:42:12It is going to happen.
00:42:13But I cannot give you a time frame.
00:42:16Certainly not one that's any time in the next two or three months.
00:42:22Good.
00:42:22At least it's on the radar.
00:42:24We love to hear it.
00:42:25Cool.
00:42:25I think we've got time for one more question.
00:42:27So last one.
00:42:29Svelte is agnostic, but what is the team member's
00:42:32favorite database?
00:42:34Another round, Robin.
00:42:37SQLite.
00:42:37I used Neon in the past for a quick experiment,
00:42:47and that was really nice.
00:42:50Yeah, SQLite is good.
00:42:53What I'm really waiting for is to get these sync engines
00:42:59to be really good and widely available so that we
00:43:02can have local first stuff going on.
00:43:05And then-- I don't care, honestly,
00:43:09what database I'm using in the back is my short answer.
00:43:13Yeah, I think--
00:43:15I don't know that I really have a favorite because they--
00:43:18when you say just like, what's your favorite database,
00:43:22there are so many different ones because they
00:43:24do different things better.
00:43:26So you really have to know why you
00:43:28are choosing a database to pick one that is your favorite.
00:43:31I find stuff like convex really interesting for the local first
00:43:36sync engine stuff.
00:43:38I think they're really cool, and they've got a lot of cool stuff
00:43:41going for them.
00:43:42My favorite probably general purpose database
00:43:45is actually Dynamo.
00:43:47It can be kind of frustrating to get used to,
00:43:49but it's really, really fast.
00:43:51And it scales really, really, really well.
00:43:55But I really do like SQL, too.
00:43:58So if I can make a SQL database work for a project,
00:44:04I'm probably going to go for it because my career started
00:44:07in data analytics and stuff.
00:44:09So SQL is what I grew up with, basically.
00:44:14So yeah, I don't know if I have a favorite,
00:44:16but that's how I think about it.
00:44:20Nice.
00:44:20And we have one comment from Paolo.
00:44:23I know you shouted him out earlier.
00:44:24He says, I see too many colors.
00:44:27Are we sure that Rich, Simon, and Elliot work for Vassal?
00:44:32My chair is black.
00:44:35Yeah, but Paolo was pressuring me into wearing the Vassal hoodie,
00:44:38but it's too warm in here.
00:44:40All righty, guys.
00:44:45But I have it in my closet, and I take it out
00:44:48when the days are colder.
00:44:51That's what we like to hear, wrapping the swag.
00:44:54Amazing.
00:44:55Yeah, I'm so excited for the future of Svelte
00:44:58and really appreciate you guys joining us
00:45:01for all your hard work behind the scenes.
00:45:03Thank you so much to the rest of the Svelte team
00:45:05as well who are not on the live, the Svelte maintainers.
00:45:09And shout out to the wonderful Svelte community as well.
00:45:11Yeah, thank you, Rich, Simon, Elliot for joining us today.
00:45:16Thank you.
00:45:17Bye.
00:45:18It's a pleasure.
00:45:20OK, and audience, do not go anywhere yet
00:45:23because before we close out, we have a very special guest.
00:45:26We have Eve from the Vassal education team.
00:45:31Hello.
00:45:32How's it going?
00:45:33Hello, Eve.
00:45:33Good.
00:45:34How are you?
00:45:35I'm great.
00:45:36Thank you.
00:45:36That's such a killer team of goats all around.
00:45:40Yeah.
00:45:41What a treat.
00:45:44All right.
00:45:45Would you like to tell us more about Academy
00:45:47and what you've been cooking?
00:45:49Yes, I would love to.
00:45:50So if you haven't heard, Vercel now has an Academy.
00:45:55We have 11 courses that are live.
00:45:57The most recent of those went live today,
00:46:03which is, ta-da, the Svelte on Vercel course.
00:46:10So the team has been really helpful in getting
00:46:13that over the finish line.
00:46:15In it, we build a ski alert app.
00:46:18So if you are a ski--
00:46:23oh, yeah.
00:46:25I've got the screen share going, but I'll pop that up.
00:46:28Awesome.
00:46:29Oh, there we go.
00:46:30There we go.
00:46:31So more exciting is to do that.
00:46:34The Svelte on Vercel course is live.
00:46:36In it, you're going to build a ski alerts app.
00:46:40In our modern world, if you're a skier this year,
00:46:43you know that it's been kind of a rough season.
00:46:47Super low snow.
00:46:48It's been warm everywhere.
00:46:50So it's really important that you are notified
00:46:52about when it's a good ski day.
00:46:54And so this is an app that we build throughout the course
00:46:58to make that happen.
00:46:59So we have all sorts of-- you can write different alerts
00:47:02for various conditions that you're looking for so
00:47:06that when it's a ski day, you're there,
00:47:10and you don't waste the possible day.
00:47:13So yeah, the course goes through Svelte.
00:47:17How do you deploy it on Vercel?
00:47:19How do you use the AISDK?
00:47:21How do you use workflows?
00:47:23And some production tips along the way.
00:47:27Amazing.
00:47:28Wonderful.
00:47:29I'm definitely a firm believer in learning by building.
00:47:31So yeah, this is fab.
00:47:33Thank you so much.
00:47:34And we'll add a link to the course
00:47:36as well in the live resources.
00:47:38So yeah, thank you for joining us today, Eve.
00:47:41Amazing.
00:47:41Thank you so much.
00:47:42All righty.
00:47:46And that brings us to the end of our live session.
00:47:49Thank you so much to our community
00:47:51for spending time with us.
00:47:52I'm not going to lie, the chat was popping today.
00:47:54So that is awesome to see.
00:47:56Yeah, we hope you enjoyed it.
00:47:58And in the words of Rich Harris, Svelte is a way of life.
00:48:02So go play around with it.
00:48:03Go build more Svelte things.
00:48:05If you want to join us for our future community sessions,
00:48:08you can find all the details on our community platform
00:48:11at community.vercel.com/live.
00:48:13Yeah, thank you all.
00:48:15See you.
00:48:16Bye.