What is SvelteKit? The linked page assumes I already know and have just been waiting for an announcement.
I have heard a bit about Svelte. I love the analogy with spreadsheets, where original spreadsheets reevaluated every cell whenever any cell changed. Modern spreadsheets maintain a dependency graph, so when something changes, only the direct dependencies are even evaluated. If any of them change, then only their dependencies are evaluated, etc., recursively. So React's repeated full virtual DOM diff at runtime vs. Svelte's focused dependency graph, created at compile time. Very interesting.
But that's Svelte, or at least I think it is. So what is SvelteKit?
> Think of it as Next for Svelte. It's a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on.
> If you're familiar with Sapper, SvelteKit is Sapper's successor.
It's an application framework for Svelte which replaces Sapper.
It uses Vite[1] for development and has been designed from the start to be able to produce static sites a la Gatsby or Next (Sapper wasn't great at that). Svelte Kit runs SSR on Node JS servers like Sapper did, but also on cloud functions and I think even Cloudflare Workers which do not run Node.
I get kind of annoyed when people can't do at least 10 or less minutes of their own research. I believe it states on the front page that its akin to Next for svelte and the successor svelte/sapper. If you don't know what those are then perhaps just follow the links backwards and read?
TL;DR, it is the new officially recommended way to build apps with the Svelte framework. Compared to its predecessor, it promises much faster local development based atop Vite and ESBuild, and it can be deployed as a static site, or a node server, or as serverless functions (whereas previously you only had either server or static site options). There are a ton of other small new features as well in the docs.
Web dev with Svelte brings me back to the early days of web development - php, MySQL, jquery and XMLhttprequest. I personally have never understood all the tooling required to build a modern day react app, and oh how I have tried. Svelte dev as a way-of-thinking-framework is as close to the fundamentals as I think you can get. The dx is amazing and sveltekit takes it to the next level. #sveltalowda
+1 I’m building my second app using svelte now and I’ve had a great experience. Svelte gives me what I need without a bunch of cruft that I don’t, and it lets me build components that embed in existing sites really well. The only thing missing was a good server side rendering story which I didn’t need short-term but long-term will be really useful.
Hey I hope you don't mind a bit of constructive criticism: you should look into getting a pop filter for your mic. I'm very sensible to pops and esses so it might not bother others but it's a very cheap upgrade that you might want to consider :)
You can also experiment by placing at a 45°angle (point the mic towards your mouth, not your mouth towards the mic) and placing it slightly sideways. It'll help with sibilances and pops.
Anyways, thanks for sharing the video, I was actually looking for an overview of SvelteKit's features.
There's also a tutorial [0] which goes through these examples one by one explaining in detail how each concept works. I highly recommend it to anyone interested in learning this framework.
I don't understand why the second example caches the src, checks if the current src matches the cached src, and if not sets both the src and the alt. Does the complier fully check the codebase to ensure they are always set together?
This makes me very glad I have never worked in JavaScript. Why does hello world compile to something with three explicit no-ops and what the heck is safe_not_equals? I had to wonder what an unsafe way to determine equality is and looked this and found this is apparently the code?
export function safe_not_equal(a, b) {
return a != a ? b == b : a !== b
|| ((a && typeof a === 'object') || typeof a === 'function');
}
Why is it possible for a != a to not always be false and b == b to not always be true? How did Javascript defeat the most immutable rule of basic logic discovered by Aristotle 2000 years ago?
> Even though it was far from ready, SvelteKit was the only framework that matched our esoteric requirements. (Anyone who has worked in a newsroom and done battle with their CMS will know what I'm talking about.)
I would be interested to hear more about the esoteric requirements; whether they're performance-related, have to do with what's representable in the CMS, or something else. At any rate, those NYT covid tracker pages are great and I have (sadly) spent a lot of time with them over the past year.
• we can't have any dynamic pages, everything has to be static HTML
• we don't control the actual page; our job is to create a fragment of HTML that the CMS stitches into the body, then associate that fragment with some publish metadata...
• ...but during development, we need a simulacra of the NYT article template
• we have to be able to create AMP versions of almost every page
• our old app was already fairly Svelte-centric, and we wanted to reuse as much as possible
• we wanted to use client-side navigation to avoid page reloads (while capturing custom navigation analytics) e.g. because it makes no sense to make people load MapboxGL repeatedly
It's possible that we could have coaxed one of the existing static site generators into fulfilling all these requirements, but it seemed like we'd be in uncharted territory without the benefit of having the SSG maintainer on staff!
i was surprised to learn how many counties in the US are still considered high risk.
also its a pretty cool indication of trust in Rich that they let him build his own metaframework and dogfood it in production at NYT scale. not sure what else i can draw about that (its probably not a good idea to let most devs do that) but its cool
I'm really enjoying front-end work at the moment. I've used Vite/esbuild for a few projects so far and it's a huge step forward, and I'm really excited by this hybrid SSG/SSR approach that SvelteKit is offering, especially as it's "official".
I've been primarily a Vue dev for quite a few years and never really considered investing much time in other emerging frameworks, but I'm very tempted to seriously dive into Svelte at this point.
JS/front-end often gets a bad rap on HN. I see complaints that things have become unnecessarily complicated or that all these frameworks are overkill, but I can build pretty complex, well structured applications with relative ease these days, and I have way more fun doing it, most of the time. I suppose I owe a lot to people like Rich Harris and Evan You who are genuinely making the work I do more enjoyable. Looking forward to trying this out.
This is so exciting! Been using SvelteKit this last week to build a new version of the Svelte Radio podcast website. Works very well and the DX is amazing.
Can't wait for whenever a Cloudflare Worker adapter is out!
Svelte has been such a breath of fresh air after so many years with React. (I still like React.) All my new projects are built with Svelte. There are just a couple of patterns to ease the transition but once you get those it's just so easy.
The best part is every time you want to do something, you gradually stop looking for a library to do it, because it's just html, js and css. So you just roll your own solution and everything is much, much simpler.
Well as Rich Hickey would say, "not everything is awesome", but I'm a big fan of Svelte and mainly looking forward to the new build times speed increases.
Thank you Rich Harris and all the Svelte contributors!
Rich Harris did a great talk[0] at an early stage of SvelteKit's development called "Futuristic Web Development". I really do believe this is the next phase of how JS web frameworks will work in the future.
This blog post gives a bit more information on that: https://svelte.dev/blog/whats-the-deal-with-sveltekit, though the section on Snowpack is out of date. Basically, SvelteKit is serverless-first (whereas Sapper made you choose between a Node server and prerendered HTML), and because it's powered by Vite has a much nicer developer experience.
It also fixes a few of the rough design edges in Sapper. This migration guide gives you an idea of the scope of the changes: https://kit.svelte.dev/migrating
The way I understand it is it's an evolution of sapper to be more versatile, especially with respect to the backend. Out of the box it can work more easily with serverless providers that give you static file hosting + some kind of basic API gateway and serverless function platform. So you can write full stack client and server-side code all using the same framework (like you can with sapper). But the key difference from sapper is that you're not stuck using a node.js backend, with sveltekit you can swap in different backend implementations, like one targeting a serverless/lambda system.
I haven't used Sapper, but I've read a bit about SvelteKit. Afaik the main reasons for the rewrite were to clean up the code, and make the framework platform agnostic. This means that you can use different adapters for SvelteKit to make it usable in places where Sapper wasn't optimal, such as serverless hosts.
Agree with this one.
Existing UI frameworks (eg. https://sveltematerialui.com/) are not to the level of Vuetify (for good reason).
Even though I like Svelte, having to build a lot of UI elements from scratch has been annoying.
> If you have a app that you'd like to migrate to SvelteKit, you'll find instructions at .
Ok can't copy/paste anchor text apparently, but yeah I'm confused as well. I just read a bit about Sapper the other day, is this a replacement? :shrug:
Will this support devs who want to use Svelte to add specific widgets to a dynamically generated Rails page? I want to explore SSR but was/is daunting with installing JS stuff along with existing web app infra.
[+] [-] SiVal|5 years ago|reply
I have heard a bit about Svelte. I love the analogy with spreadsheets, where original spreadsheets reevaluated every cell whenever any cell changed. Modern spreadsheets maintain a dependency graph, so when something changes, only the direct dependencies are even evaluated. If any of them change, then only their dependencies are evaluated, etc., recursively. So React's repeated full virtual DOM diff at runtime vs. Svelte's focused dependency graph, created at compile time. Very interesting.
But that's Svelte, or at least I think it is. So what is SvelteKit?
[+] [-] rich_harris|5 years ago|reply
> Think of it as Next for Svelte. It's a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on.
> If you're familiar with Sapper, SvelteKit is Sapper's successor.
[+] [-] pier25|5 years ago|reply
It uses Vite[1] for development and has been designed from the start to be able to produce static sites a la Gatsby or Next (Sapper wasn't great at that). Svelte Kit runs SSR on Node JS servers like Sapper did, but also on cloud functions and I think even Cloudflare Workers which do not run Node.
[1] https://vitejs.dev/
[+] [-] darkhorsematt|5 years ago|reply
I have been building JS apps since '99 and once I found Svelte/SvelteKit, I have not looked back.
It really lets you stay in the flow of creativity while building.
[+] [-] thitcanh|5 years ago|reply
[+] [-] qmmmur|5 years ago|reply
[+] [-] swyx|5 years ago|reply
TL;DR, it is the new officially recommended way to build apps with the Svelte framework. Compared to its predecessor, it promises much faster local development based atop Vite and ESBuild, and it can be deployed as a static site, or a node server, or as serverless functions (whereas previously you only had either server or static site options). There are a ton of other small new features as well in the docs.
[+] [-] wirahx|5 years ago|reply
[+] [-] lenkite|5 years ago|reply
[+] [-] wffurr|5 years ago|reply
Top has a link to a prior blog post: https://svelte.dev/blog/whats-the-deal-with-sveltekit
[+] [-] DrStartup|5 years ago|reply
Edit: embarrassing typo
[+] [-] aembleton|5 years ago|reply
https://elderguide.com/tech/elderjs/
[+] [-] darkhorse13|5 years ago|reply
[+] [-] lhenriquez|5 years ago|reply
[+] [-] davidwparker|5 years ago|reply
Definitely a little rough around the edges (the real-world application has bugs), but it is public beta, so it's not surprising.
[+] [-] pablodavila|5 years ago|reply
You can also experiment by placing at a 45°angle (point the mic towards your mouth, not your mouth towards the mic) and placing it slightly sideways. It'll help with sibilances and pops.
Anyways, thanks for sharing the video, I was actually looking for an overview of SvelteKit's features.
[+] [-] unknown|5 years ago|reply
[deleted]
[+] [-] jack_riminton|5 years ago|reply
[+] [-] karolkozub|5 years ago|reply
[0]: https://svelte.dev/tutorial
[+] [-] iudqnolq|5 years ago|reply
[+] [-] nonameiguess|5 years ago|reply
export function safe_not_equal(a, b) { return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); }
Why is it possible for a != a to not always be false and b == b to not always be true? How did Javascript defeat the most immutable rule of basic logic discovered by Aristotle 2000 years ago?
[+] [-] idreyn|5 years ago|reply
I would be interested to hear more about the esoteric requirements; whether they're performance-related, have to do with what's representable in the CMS, or something else. At any rate, those NYT covid tracker pages are great and I have (sadly) spent a lot of time with them over the past year.
[+] [-] rich_harris|5 years ago|reply
• we can't have any dynamic pages, everything has to be static HTML
• we don't control the actual page; our job is to create a fragment of HTML that the CMS stitches into the body, then associate that fragment with some publish metadata...
• ...but during development, we need a simulacra of the NYT article template
• we have to be able to create AMP versions of almost every page
• our old app was already fairly Svelte-centric, and we wanted to reuse as much as possible
• we wanted to use client-side navigation to avoid page reloads (while capturing custom navigation analytics) e.g. because it makes no sense to make people load MapboxGL repeatedly
It's possible that we could have coaxed one of the existing static site generators into fulfilling all these requirements, but it seemed like we'd be in uncharted territory without the benefit of having the SSG maintainer on staff!
[+] [-] swyx|5 years ago|reply
also its a pretty cool indication of trust in Rich that they let him build his own metaframework and dogfood it in production at NYT scale. not sure what else i can draw about that (its probably not a good idea to let most devs do that) but its cool
[+] [-] string|5 years ago|reply
I've been primarily a Vue dev for quite a few years and never really considered investing much time in other emerging frameworks, but I'm very tempted to seriously dive into Svelte at this point.
JS/front-end often gets a bad rap on HN. I see complaints that things have become unnecessarily complicated or that all these frameworks are overkill, but I can build pretty complex, well structured applications with relative ease these days, and I have way more fun doing it, most of the time. I suppose I owe a lot to people like Rich Harris and Evan You who are genuinely making the work I do more enjoyable. Looking forward to trying this out.
[+] [-] kevinak|5 years ago|reply
Can't wait for whenever a Cloudflare Worker adapter is out!
[+] [-] ajdegol|5 years ago|reply
The best part is every time you want to do something, you gradually stop looking for a library to do it, because it's just html, js and css. So you just roll your own solution and everything is much, much simpler.
Well as Rich Hickey would say, "not everything is awesome", but I'm a big fan of Svelte and mainly looking forward to the new build times speed increases.
Thank you Rich Harris and all the Svelte contributors!
[+] [-] alexandargyurov|5 years ago|reply
[0] https://www.youtube.com/watch?v=qSfdtmcZ4d0
[+] [-] m8s|5 years ago|reply
Looks cool by the way, I think Svelte is a really great product.
[+] [-] rich_harris|5 years ago|reply
It also fixes a few of the rough design edges in Sapper. This migration guide gives you an idea of the scope of the changes: https://kit.svelte.dev/migrating
[+] [-] qbasic_forever|5 years ago|reply
The way I understand it is it's an evolution of sapper to be more versatile, especially with respect to the backend. Out of the box it can work more easily with serverless providers that give you static file hosting + some kind of basic API gateway and serverless function platform. So you can write full stack client and server-side code all using the same framework (like you can with sapper). But the key difference from sapper is that you're not stuck using a node.js backend, with sveltekit you can swap in different backend implementations, like one targeting a serverless/lambda system.
[+] [-] Xevi|5 years ago|reply
For more in depth info, refer to this page: https://kit.svelte.dev/migrating
[+] [-] unknown|5 years ago|reply
[deleted]
[+] [-] pspeter3|5 years ago|reply
[+] [-] newsbinator|5 years ago|reply
That's also what stops me from moving over to Vue 3 (for which Vuetify support is currently in Alpha).
Vuetify just makes dev life so much easier. If Svelte had something that deep and all-encompassing I'd go all-in.
[+] [-] ampdepolymerase|5 years ago|reply
[+] [-] ajoy|5 years ago|reply
[+] [-] darkhorsematt|5 years ago|reply
[+] [-] continuational|5 years ago|reply
[+] [-] koboll|5 years ago|reply
[+] [-] spurgu|5 years ago|reply
Ok can't copy/paste anchor text apparently, but yeah I'm confused as well. I just read a bit about Sapper the other day, is this a replacement? :shrug:
[+] [-] benbro|5 years ago|reply
[+] [-] aitchnyu|5 years ago|reply
[+] [-] jefflombardjr|5 years ago|reply
[+] [-] darkhorsematt|5 years ago|reply
Stoked.
[+] [-] cutler|5 years ago|reply
[+] [-] thirtythree|5 years ago|reply