[HN Gopher] SvelteKit Is in Public Beta
___________________________________________________________________
SvelteKit Is in Public Beta
Author : benmccann
Score : 249 points
Date : 2021-03-23 17:47 UTC (5 hours ago)
(HTM) web link (svelte.dev)
(TXT) w3m dump (svelte.dev)
| SiVal wrote:
| 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?
| thitcanh wrote:
| For anyone interested, follow the first link in the
| announcement and read the second section, named What is
| SvelteKit?
| wffurr wrote:
| Third paragraph has a link: https://kit.svelte.dev/docs
|
| Top has a link to a prior blog post:
| https://svelte.dev/blog/whats-the-deal-with-sveltekit
| swyx wrote:
| Here's the blogpost from a few months ago:
| https://svelte.dev/blog/whats-the-deal-with-sveltekit
|
| 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.
| rich_harris wrote:
| Added a paragraph to the blog post:
|
| > 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.
| dfabulich wrote:
| As @skybrian points out below, this doesn't help much if you
| don't know what Next and Sapper are, and especially if you
| don't know what Svelte is.
|
| Here's my attempt.
|
| 1. Svelte is a JavaScript component framework, i.e. it offers
| a way to write reusable UI components in JavaScript. (Other
| popular frameworks include React, Angular, and Vue.)
|
| Each major framework solves the problem of code reuse in a
| different way, and components written in one framework are
| generally hard to adapt to other frameworks, if only because
| each framework includes some JS that you have to run in order
| to make its components work, and it hurts performance to run
| three frameworks when you could have just run one, so
| developers fight a lot about which framework is best.
|
| 2. SvelteKit supports "server-side rendering" (SSR) for
| Svelte. JavaScript frameworks let you implement user
| interfaces in JS, but by default, that JS only runs
| ("renders" the UI) on the client side, in the user's browser.
|
| Client-side rendering hurts performance if the user has a
| slow Android phone. But even on fast devices, client-side
| rendering adds round trips to the server, first requesting
| the page, then requesting the JS, then finally running the JS
| to render. It's usually faster to render HTML on the server,
| and then to progressively enhance it on the client side.
|
| Server-side rendering requires you to buy into an even bigger
| framework, with JavaScript component code running on the
| server _and_ on the client, but it can offer nifty features,
| like "code splitting," sending down just the right JS needed
| for the current page (or the current "route," which is a
| bunch of pages of the same type with similar URLs). SSR
| frameworks have to handle not just UI components, but entire
| pages, and deciding based on the URL which page to show,
| which is called "routing."
|
| For React server-side rendering, you'll typically use
| Next.js. Vue offers its own server renderer. Angular offers
| "Angular Universal." Preact offers WMR.
|
| Svelte had an older SSR framework called "Sapper." Sapper is
| now dead/deprecated code, and SvelteKit is the new thing.
| pitzips wrote:
| Elegantly written, thanks.
| pier25 wrote:
| 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.
|
| [1] https://vitejs.dev/
| skybrian wrote:
| That doesn't help. What is Sapper? This is defining web tech
| in terms of other web tech.
| pier25 wrote:
| > _It 's an application framework for Svelte_
|
| Doesn't that ring a bell?
| martpie wrote:
| See Svelte as a JavaScript library like React or Angular,
| which allows you to develop web applications easily.
|
| Now, SvelteKit is bringing the library to the _framework_
| level (big big emphasis on "framework", we all have
| different definitions for what a framework is), which adds
| easy routing, server-side rendering, optimized JavaScript
| bundles per page for the client, etc.
| amelius wrote:
| Not another framework please. What's wrong with developing
| libraries and releasing them separately?
| adamdusty wrote:
| Isn't that exactly what's happening? Svelte is a library
| and SvelteKit is a framework built on top of it? I think.
| qbasic_forever wrote:
| Because to start a project you have to spend days and even
| months researching libraries, the current best practices,
| etc. and then glue them all together with some monster
| build system (webpack, etc.) and pray that one library
| doesn't update to be incompatible, or that the library
| maintainer loses interest and maintenance, etc. And then if
| you look at another project you have to learn everything
| again because they took an entirely different approach of
| glueing together libraries.
|
| These frameworks are an opinionated take on project
| structure meant to save time and effort. Can they build
| anything and everything with JS? No, and they don't make
| such promises. Can they build most apps and things people
| want to build, and with a much faster and simpler setup?
| Absolutely, yes.
|
| But honestly this isn't the thread to fight the framework
| vs. library fight. That ship sailed _years_ ago after
| create-react-app got popular.
| wirahx wrote:
| There's a link right next to the main headline - "What's the
| deal with SvelteKit"
| thirtythree wrote:
| Awesome! I will attempt to migrate from Sapper now
| alexandargyurov wrote:
| 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.
|
| [0] https://www.youtube.com/watch?v=qSfdtmcZ4d0
| darkhorse13 wrote:
| I simply cannot wait for Svelte to blow up in popularity! It is
| by far the most promising web technology to me.
| lhenriquez wrote:
| +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.
| davidwparker wrote:
| Self promotion: For those interested, I did a video tour of the
| examples provided with SvelteKit (38 minute) -
| https://www.youtube.com/watch?v=qmwJTI-vH6w
|
| Definitely a little rough around the edges (the real-world
| application has bugs), but it is public beta, so it's not
| surprising.
| [deleted]
| pablodavila wrote:
| 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 45degangle (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.
| spurgu wrote:
| Just to provide some balance to the argument, the popping
| doesn't bother me the slightest. :)
|
| But yeah, putting the mic angled on the side would probably
| be an improvement.
| davidwparker wrote:
| Thanks for the feedback- I'm always looking to improve (I
| just bought a new webcam). I'll look into a pop filter today!
| DrStartup wrote:
| 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
|
| Edit: embarrassing typo
| aembleton wrote:
| How does Sveltekit compare to Elder.js? I've been trying
| Elder.js out and I really like how easy it is to specify which
| parts to hydrate.
|
| https://elderguide.com/tech/elderjs/
| pspeter3 wrote:
| Vite seems to be powering many of these meta frameworks. Will it
| be the new Webpack?
| qbasic_forever wrote:
| No, go back about a week to the thread here on esbuild:
| https://news.ycombinator.com/item?id=26399377 Esbuild is a go-
| based tool that takes the place of babel, webpack, tsc, etc.
| and is much, much faster than webpack. Vite adds a nicer dev
| experience on top of esbuild (hot module reloading, etc.).
| msoad wrote:
| not tsc. There has been attempts to build a faster tsc but I
| have not seen any results yet.
| jiofih wrote:
| It takes the place of TSC as a compiler which is a
| significant speed-up. You still need tsc for the actual
| type-checking.
| wirahx wrote:
| I think there is a faster TSC, I forget what it's called,
| but it's significantly faster. It just isn't as fully
| fledged as TSC.
| searchableguy wrote:
| I only know of one active attempt at:
| https://stc.dudy.dev/docs/status from the author of swc.
| You may ask kdy to test but the product is closed source
| unlike swc.
| himujjal wrote:
| talked to the author on mail. it will remain a closed
| source product
| slim wrote:
| from the documentation: There are two basic
| concepts:
|
| There are two basic concepts:
|
| Each page of your app is a component
|
| You create pages by adding files to the src/routes directory of
| your project. These will be server-rendered so that a user's
| first visit to your app is as fast as possible, then a client-
| side app takes over
|
| looks like you reinvented php, no?
| rich_harris wrote:
| oh, does PHP include a client-side router these days? that's
| exciting!
| F117-DK wrote:
| lol
| jiofih wrote:
| No. PHP hasn't been "one file per page" in at least 15 years,
| and that's hardly a defining trait for either of these two
| things.
|
| If this is your only thought about it, you have a lot of
| catching up to do!
| qbasic_forever wrote:
| Learn more about svelte (not just sveltekit here) and you'll
| see why your snarky comment just looks dull and uninformed. SSR
| (what you're calling reinvented php here) is just one tiny part
| of the svelte and broader component-based client-side JS
| ecosystem. You're washing away their incredible power for
| building fully browser-based applications that mix client and
| server logic all from the same clean codebase.
| jefflombardjr wrote:
| This is awesome. Sapper is great, so I'm excited to move over to
| this.
| newsbinator wrote:
| One thing that stops me from moving over to Svelte from Vue is
| the lack of a Vuetify (component framework with an API & tons of
| slots) equivalent.
|
| 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.
| sdwvit wrote:
| I have a suspicion that svelte may die soonish. Please tell me I
| am wrong here. All the news I hear about svelte is "something new
| is released", instead of version release with bug fixes.
| kevinak wrote:
| 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!
| m8s wrote:
| Out of curiosity, how does SvelteKit differ from Sapper? I
| haven't been involved with Svelte for some time.
|
| Looks cool by the way, I think Svelte is a really great product.
| rich_harris wrote:
| 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
| pier25 wrote:
| Hey Rich, is partial hydration on your roadmap for SvelteKit?
| rich_harris wrote:
| That's a Svelte issue rather than a SvelteKit issue. It's
| on our _radar_, though I don't know if I'd say it's on our
| _roadmap_ just yet
| swyx wrote:
| i would also like this. i recall Rich musing on some of the
| "hydrating unnecessary content" problems in this post
| https://dev.to/richharris/in-defense-of-the-modern-web-2nia
| so i imagine its on his mind. Elder.js solved it in a way,
| i'd love to see Rich's spin on it.
| m8s wrote:
| Oh, awesome, thanks for responding. Excited to give SvelteKit
| a try!
| qbasic_forever wrote:
| Check out the creator's first posts and videos of sveltekit
| when he introduced the alpha version:
| https://www.youtube.com/watch?v=qSfdtmcZ4d0
|
| 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.
| swyx wrote:
| yup pretty accurate. also faster dev-mode building with
| vite/esbuild.
| [deleted]
| Xevi wrote:
| 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.
|
| For more in depth info, refer to this page:
| https://kit.svelte.dev/migrating
| jack_riminton wrote:
| The code examples page is a thing of beauty and simplicity,
| bravo! https://svelte.dev/examples#hello-world
| iudqnolq wrote:
| 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?
| karolkozub wrote:
| 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.
|
| [0]: https://svelte.dev/tutorial
| benbro wrote:
| Can I use it for SPA? Something like an Angular app with all the
| code running on the client side with routing (no SSR).
| rich_harris wrote:
| Not currently, but this will be implemented soon (and certainly
| before 1.0) https://github.com/sveltejs/kit/issues/231
| pier25 wrote:
| Will SvelteKit follow the same pattern as Sapper?
|
| As in, after the first SSR'd page the app becomes an SPA.
| rich_harris wrote:
| Yes
| continuational wrote:
| Forgot to mention what SvelteKit _is_...
| spurgu wrote:
| > 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:
| swyx wrote:
| yes it is a replacement. bunch of internal reasons, but
| everyone is onboard.
| koboll wrote:
| It's like the officially-supported Svelte equivalent of
| Next/Gatsby/Nuxt/etc.
| chovybizzass wrote:
| about time.
| dang wrote:
| We've banned this account for posting a huge number of
| unsubstantive comments. That's not what HN is for. It's
| supposed to be for thoughtful, substantive conversation and
| intellectual curiosity.
|
| If you don't want to be banned, you're welcome to email
| hn@ycombinator.com and give us reason to believe that you'll
| follow the rules in the future. They're here:
| https://news.ycombinator.com/newsguidelines.html.
| runawaybottle wrote:
| I'd like to know what he/she said, given it was their digital
| last words on the site.
| wirahx wrote:
| FWIW this person is also banned from the Svelte github and
| the Svelte discord for similar behaviour.
| miltonsopus wrote:
| It said "about time."
| runawaybottle wrote:
| And why did this warrant death? Just so everyone knows,
| few people even give a fuck about Svelte. Let's not be
| babies.
| Xevi wrote:
| I think the point was that the user's comments didn't add
| much value to the site. If you don't have anything of
| value to say, then don't say it. Reddit is probably a
| better platform if you just want to say "nice", or
| something.
| wirahx wrote:
| The banned user is a person who intentionally trolls
| comment sections, chats, and other forms of feedback.
| It's genuinely their goal to get banned.
| dang wrote:
| Note the phrase "a huge number" in
| https://news.ycombinator.com/item?id=26558343.
| paco3346 wrote:
| Have any data to back that up?
| aidos wrote:
| In isolation, maybe it doesn't, but reading through the
| comment history, the site will be better without these
| contributions.
| runawaybottle wrote:
| That's up to us to decide. I have said some pretty insane
| things, and I often don't get downvotes.
|
| If we reach scale, HN is doomed in general. Until then,
| we should pick the organic route.
|
| Most people are lurkers, so if they even had something to
| say, it would be one liners.
| dang wrote:
| Moderation is part of HN. That's one reason why being
| "doomed in general" hasn't yet destroyed the site after
| 10+ years of "reaching scale".
|
| Part of what moderators do is ban accounts that break the
| site guidelines repeatedly, especially when they are
| reincarnations of previous accounts that broke the site
| guidelines repeatedly.
| the_duke wrote:
| You can enable display of dead/flagged comments in the
| settings.
| spurgu wrote:
| Haha thank you kind stranger! I've been a member since
| 2012 and while I've visited my profile tons of times, for
| checking comments and submissions, I've apparently never
| stopped to look at the settings and what they might do. I
| have a userscript that makes the main view 69ch wide and
| blurs my username, but I've never even been aware that
| the site actually has its own customization settings.
| :facepalm:
| the_duke wrote:
| With pleasure.
|
| FYI: [dead] means the account is (shadow)banned, while
| [flagged] just refers to the particular comment.
| idreyn wrote:
| > 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.
| rich_harris wrote:
| things like:
|
| * 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!
| searchableguy wrote:
| Are there any plans to support deno?
| rich_harris wrote:
| Not concrete plans but I expect it will happen, yes (at the
| very least in the sense of having an `adapter-deno` to
| allow the built app to run in Deno; running SvelteKit
| _itself_ in Deno is a separate issue)
| searchableguy wrote:
| Yeah, that will require rewriting lot of code for
| development so I understand.
|
| Just curious, are you aware of few of the spinoffs of
| svelte for deno like snel?
|
| https://github.com/crewdevio/Snel
|
| Have you used deno for any toy projects and how did you
| like it? Any wishes or criticism?
| swyx wrote:
| 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
___________________________________________________________________
(page generated 2021-03-23 23:01 UTC)