Rich Harris, the creator of Svelte, lifted the curtain over the experiments that have been taking place around Svelte (the UI framework and compiler) and Sapper (Svelte’s application framework). Harris gave a glimpse of a potential future in which Svelte is a serverless-first framework.
While warning the audience of the experimental nature of what will be shown in the talk, Harris nonetheless enthusiastically detailed its motivation:
I haven’t been this excited about Svelte since probably the launch of Svelte 3 and over the next 15 minutes or so I’m going to explain why that’s the case. […]
What I’m going to show you […] isn’t an official announcement from the Svelte team [though the team is aware of it and supports it]. [There isn’t] any guarantee that’s going to happen [or] any guarantee of when things are going to happen. […]
It’s about the future of web development more broadly and there are some ideas out there that I want to try and help push into the mainstream.
Harris announced that the anticipated Sapper 1.0 would likely not happen. Instead, a new iteration of Svelte may replace it. Harris then demoed svelte@next, the Svelte version that is being experimented upon — we will refer to that from now on as Svelte Next. Like Sapper (and Next.js), Svelte Next adopts a file-based routing. Harris created in the src/routes directory the components implementing the routes for the demoed application. An index.svelte file implements the home page while an about/index.svelte implements the /about route. Layout components ($layout.svelte) may implement commonly occurring parts of pages (e.g., a header or a footer) and keep the pages’ implementation DRY.
Layout components can use slot composition to distribute the page content as follows:
<script>
import Nav from '$components/Nav.svelte';
</script>
<main>
<Nav/>
<slot></slot>
</main>
<style>
:root {
font-family: -apple-system;
}
main {
text-align:center;
padding: 1em;
margin: 0 auto;
}
</style>
Svelte will as usual warn automatically the developer when some styles are unused. Just like in Sapper, the first route of the application that the user visits is server-rendered; then a client-side router takes over.
Harris explained that to have instant reload in development, Svelte Next relies on Snowpack. Snowpack is a Wasm-powered frontend build tool that leverages modern ESM modules to rebuild a codebase in constant time. For production builds, Svelte continues to use Rollup. Harris additionally demoed that Svelte Next’s hot-module reloading with Snowpack keeps the state of the application intact across reloads!
The resulting developer experience led Harris to posit that modern build tools will soon take a larger part of the development tools space. Harris said:
I think we’re gonna get to a point pretty soon where projects that use bundlers during development are gonna seem a little bit antiquated.
Harris then demoed the ability of Svelte Next to mix static rendering with server-side rendering. Harris explained:
With this new system, we can have hybrid apps, just like in recent versions of Next[.js] you can have some pages that are dynamically rendered and some that are pre-rendered.
Additionally, a svelte.config.js allows developers to configure adapters for Node (server-side rendering), static rendering, or cloud-based services (e.g., Netlify).
Harris concluded:
The whole serverless thing [is] a pretty good trend and Svelte is now a serverless-first framework.
The reader is encouraged to review the full talk, which contains plenty of detailed technical explanations and demos. svelte@next is currently not publicly available.
Svelte Summit is a virtual conference about Svelte. The 2020 edition took place online in October. The full list of talks is available on the Youtube channel of the Svelte Society.
