[HN Gopher] Svelte 5 Released
___________________________________________________________________
Svelte 5 Released
Author : begoon
Score : 201 points
Date : 2024-10-19 18:38 UTC (4 hours ago)
(HTM) web link (www.npmjs.com)
(TXT) w3m dump (www.npmjs.com)
| zuhsetaqi wrote:
| From the changlog on Github:
|
| The new version brings: - even better
| performance, - a more granular reactivity system with
| runes, - more expressive template syntax with snippets
| and event attributes, - native TypeScript support,
| - and backwards compatibility with the previous syntax!
| notpushkin wrote:
| Here's the release on GitHub:
| https://github.com/sveltejs/svelte/releases/tag/svelte%405.0...
|
| Probably a better link for this post?
| adamnemecek wrote:
| I learned Svelte 3 over a year ago and I found it very pleasant.
| Unlike React, Svelte is an integrated framework, no "pick your
| router" nonsense, I don't want to be picking a router.
|
| I like the direction Svelte going in, the old syntax was ok but
| not great.
|
| I wonder how this new Svelte compares with some of the other new
| kids on the block like solid.js and alpine.js.
| ansc wrote:
| nit: >React, Svelte is an integrated framework
|
| You're talking about Svelte _Kit_. Svelte does not have a
| router.
| adamnemecek wrote:
| Good point.
| ChocolateGod wrote:
| https://adonisjs.com/ can be an alternative for SvelteKit
| if you want a more all guns blazing framework to use with
| Svelte.
| taikahessu wrote:
| Full v5.x changelog:
| https://github.com/sveltejs/svelte/blob/main/packages/svelte...
| dvrp wrote:
| We use Svelte 4.0 in production and it performs beautifully; it
| rarely is the cause of our frustrations. Excited to try the new
| version.
|
| Lately I've also been wondering about the relationship and
| correlation between software writing skills and writing skills.
| chistev wrote:
| What makes you think about a possible correlation?
| twic wrote:
| Besides a mathematical inclination, an exceptionally good
| mastery of one's native tongue is the most vital asset of a
| competent programmer.
|
| -- Edsger W.Dijkstra
| https://www.cs.utexas.edu/~EWD/transcriptions/EWD04xx/EWD498...
| miki123211 wrote:
| If your native tongue isn't English, I don't think that's
| necessarily true any more.
| aegypti wrote:
| Expression, comprehension, and mastery of the form are
| still independent of English, it was never about direct
| utility or anything.
| k__ wrote:
| Finally.
|
| Runes are a pretty slick addition, as someone who comes from
| React, this feels like home.
| dvrp wrote:
| Blog post will be published on Monday:
|
| https://x.com/Rich_Harris/status/1847682508822913359
| simonsarris wrote:
| I _love_ Svelte and use it for all my personal projects and all
| company projects (except strictly static sites are still built
| with just 11ty but I hate it and want to move off it).
|
| But I'm going to wait a bit on v5 for the company, scanning all
| the issue headlines, it looks like there are a still a lot of
| unresolved edge cases: https://github.com/sveltejs/svelte/issues
|
| As for my latest personal project, upgrading right now so I can
| help find more of those edge cases :D
| taikahessu wrote:
| Definitely try Astro for static sites, I'm loving it!
| akudha wrote:
| Do you think Astro would be good for a site with tons of data
| (graphs, tables etc)? Can it be used with db, user logins?
| chrisldgk wrote:
| Yes, yes and yes. It kind of depends what your project uses
| under the hood and what it depends on, but Astro is quite
| flexible with the frameworks it supports and for many
| things there's a first-class integration that lets you just
| install support for certain libraries and frameworks (for
| example Tailwind, React, Partytown, certain CMSes) with one
| command.
|
| For DB and user logins, you might have to run in SSR mode
| to be able to do server-side stuff, but you can certainly
| build API routes, server middleware and interact with
| cookies for user token stuff.
| yawnxyz wrote:
| I've started using Astro for static sites, but also as a
| lightweight Sveltekit replacement.
|
| I saw they have Svelte 5 support, and maybe this would make
| runes a killer app if we can inject the runes into Astro, (or
| even React) components?!
| codelikeawolf wrote:
| For what it's worth, I've upgraded three pretty beefy projects
| to v5 over the past 6 months or so (making sure to stay on top
| of latest releases), and I haven't seen any weirdness. That
| being said, I'm not using any of the transition APIs and only
| one of the projects uses the "runes outside of a Svelte file"
| thing (i.e. svelte.js files), so YMMV. I was so excited about
| runes that I couldn't wait. The only thing that bit me
| initially was `$state` runes converting objects into Proxy
| instances, so if you want to send data using `postMessage` or
| IPC in Electron, you need to serialize it first. I really love
| the new APIs. The Svelte team did an awesome job of addressing
| most of the gripes I had with v4.
| chris_pie wrote:
| offtop, but could you share a bit on why you hate 11ty? I was
| considering it for a static site.
| jauntywundrkind wrote:
| From listening to webdev podcast #1, Syntax.fm, the gist I get is
| that a lot of what used to be invisible compiler magic is now
| more visible & explicit.
|
| The compiler user to rewrite property access to make reactivity
| happen. Now you can kind of see yourself updating &
| reading/reacting as you sprinkle runes in. Implicit to explicit
| magic, with Runes as the headline demonstration of that. Other
| examples very welcome!
| bippihippi1 wrote:
| can I do async derived stores by default yet? It was kinda tricky
| to get working in svelte 4 and even Square/svelte-store wasn't
| super ergonomic. Would be super nice if it was built in
| clessg wrote:
| Exciting, I love Svelte! Does anybody have experience with both
| Vue and Svelte? It's been a while since I used Vue but it seems
| like both frameworks have converged quite a bit over the years.
| With this release I'm particularly curious now: why would
| somebody pick one over the other?
| gfs wrote:
| Where would one even start learning more about front-end
| development in today's world? Ignoring the dizzying amount of
| frameworks, how could I become knowledgeable enough to connect my
| back-end experience to design the "full stack?"
| mlboss wrote:
| I just ignore the whole "frontend stack". I would suggest to
| stick with traditional server side rendering and for
| interactivity use htmx/alpinejs.
| maxbond wrote:
| Pick a stack and dive into it. If you find yourself getting
| analysis paralysis, just pick one arbitrarily; you're not
| getting married, you're just getting started. Make things and
| get feedback on them.
|
| At the end of that process you'll have the background to
| reevaluate your decisions.
| Vinnl wrote:
| I think truly full stack is probably too much to ask: just
| accessibility is a huge area of knowledge, for example. I can
| fiddle around with back-ends, but I want someone more
| experienced to check my work or just directly help out with
| e.g. scaling or observability.
|
| That said, if you truly want to learn, MDN is _the_ reference,
| and they have a pretty good curriculum too:
| https://developer.mozilla.org/en-US/curriculum/
|
| Also, ignore the dizzying amount of frameworks. Learn web
| technologies, and then React. There are millions of back-end
| tools as well, but in practice, you only use a limited set.
| Front-end is the same.
| notpushkin wrote:
| Play around with some stuff and see what works for you best.
| Personally, I didn't get frontend at all before React came by,
| and then switched to Svelte because it fits my mental model
| exactly.
|
| If you don't like anything - no worries! Classic SSR with
| templates and stuff is a thing too, as another commenter
| pointed out.
|
| Edit: no matter what, make sure you write good HTML first and
| foremost. Use proper semantic tags, don't add dozens of nested
| divs, use native controls when possible etc. Make sure to check
| accessibility, but it should be OK if you don't do any weird
| stuff. MDN is a great starting point.
| chistev wrote:
| Just choose one.
| shepherdjerred wrote:
| The minimum to be a broadly employable frontend dev is to have
| knowledge HTML + CSS + JavaScript/TypeScript + React/Vue.
|
| Svelte is pretty niche. I'm not saying you shouldn't learn it,
| but that you should focus on the common tools first. This is
| just like you might tell a friend learning programming to learn
| Java/Python/Go etc. before getting into Lisp/Haskell/Prolog.
|
| All are useful and have their place, but one set of languages
| is definitely more likely to be used in a workplace (unless
| you're lucky!).
|
| If you want my opinion on a cool/trendy framework to use, I
| really like Astro [0], but, again, I doubt anyone will hire you
| unless you also have experience in React/similar.
|
| [0]: https://astro.build/
| notpushkin wrote:
| Good work! I'm not really sold on the runes stuff though (tldr:
| https://svelte.dev/blog/runes)
|
| The old way is a bit "magical" in a sense that it does some stuff
| under the hood to implement the intention behind your code, but
| it reads really straightforward: let counter = 0;
| // ... <div>{counter}</div>
|
| `let` in a .svelte compoment makes a variable reactive. If your
| state is outside a component, you use stores.
|
| With the `$store` rune, the way you make reactive stores inside
| and outside components is the same, _but_ it only works in
| .svelte.js /ts. The unification is great - but why not just use
| `let` in .svelte.js, too? // counter.svelte.js
| export function createCounter() { let count = 0;
| return { get count() { return count },
| increment: () => count += 1 }; } //
| App.svelte <script> import { createCounter } from
| './counter.svelte.js'; const counter = createCounter();
| </script> <button on:click={counter.increment}>
| clicks: {counter.count} </button>
|
| I understand it can be really tricky - e.g. you might want to use
| let for things that are not modified in runtime and do not need
| reactivity, but it should be possible to determine in compile
| time. (Actually after writing this all up I think I know why
| Svelte went with runes instead, haha!)
|
| But again - really good work and I hope to try it out on my next
| project!
| papichulo2023 wrote:
| My only problem with this is because now is more verbose, why I
| should use Svelte over Vue? Arguably a more stablish framework.
|
| No shadow dom and a better template directives? Maybe, not
| sure.
| notpushkin wrote:
| I don't have a definite answer as I haven't worked with Vue
| that much. Still, I like Svelte syntax a bit better (e.g.
| {#each x in xs} vs. v-for), and yeah, all the compile time
| reactivity stuff works out pretty well in terms of
| performance.
|
| The runes are still optional, I think, and you can still use
| the old syntax. Not sure if that will be true in Svelte 6
| though!
| youssefabdelm wrote:
| Same... It's just not ergonomic. I much preferred the
| simplicity as someone who loves Python for that same reason. I
| love code that looks like this: import whisper
| model = whisper.load_model("turbo") result =
| model.transcribe("audio.mp3") print(result["text"])
|
| Or this (although this is slightly 'dirtier'):
| import eng_to_ipa as ipa def get_homophones(word):
| words_that_sound_the_same = []
| the_way_this_word_looks = word
| the_way_this_word_sounds = ipa.convert(word)
| words_that_contain_that_sound =
| ipa.contains(the_way_this_word_sounds) for every_word
| in words_that_contain_that_sound:
| the_way_that_word_looks = every_word[0]
| the_way_that_word_sounds = every_word[1]
| if the_way_this_word_sounds == the_way_that_word_sounds:
| if the_way_that_word_looks != the_way_this_word_looks:
| words_that_sound_the_same.append(every_word)
| return words_that_sound_the_same
| get_homophones('their') #[['there', 'der'], ["they're", 'der']]
|
| Or Raymond Hettinger style.
|
| Chef's kiss. I hate code that overcomplicates.
|
| Blah blah 'making stuff explicit'... I don't think that it's
| impossible to make things explicit while also making it
| ergonomic, and humane to use.
|
| Anyway, programming as a whole is an old paradigm, sigh, might
| as well make the new thing myself.
| Squarex wrote:
| What's the preffered way to make simple SPAs using Svelte now?
| I'm using this +layout.ts with sveltekit: > export const ssr =
| false; export const prerender = false;
|
| But it feels awkward for real SPAs - internal applications that
| have no need for server side rendering.
| ffsm8 wrote:
| What's the goal of disabling SSR though?
|
| I get that hydrations value is mainly in SEO and a tiny
| improvement in initial draw speed, but why would you want it
| disabled, specifically?
|
| It's pretty much what you already wrote though.
|
| https://kit.svelte.dev/docs/single-page-apps
| catlifeonmars wrote:
| wouldn't not running a server be a reason to disable SSR?
| keb_ wrote:
| Sometimes you don't want to develop a full-stack application.
| ffsm8 wrote:
| Ah, if that's the goal then you should be fine with the
| static adapter instead. Is linked in the previous link -
| and here
|
| You'll only need the fallback page and can omit the +layout
| prerender configuration. It's documented on that page
|
| https://kit.svelte.dev/docs/adapter-static
| MatekCopatek wrote:
| The most obvious reason for me would be running something
| other than Node on the backend, i.e. only using Svelte for
| the frontend.
| sibeliuss wrote:
| SSR always yields surprises! If you don't _need_ it, don't
| enable it; everything is simpler.
| djbusby wrote:
| What!? Why would that be?
| keb_ wrote:
| I would probably just go with the Vite template:
| https://vite.new/svelte-ts
| kevinak wrote:
| I do have to ask - why don't you want to use SSR just because
| it's an internal application? For the new Svelte Society
| website we're SSR:ing everything (even the Admin dashboard).
| Being able to use form actions is a god send.
|
| With that said, unfortunately when using Kit in "SPA mode"
| you're not getting the full experience, but it's still the best
| thing out there. You could try Routify as well.
|
| There's a great talk from last years Svelte Summit that was
| about Svelte(Kit) in "SPA mode".
|
| https://www.youtube.com/watch?v=uIZOeBS-3cI
|
| TL;DR: Lean into load functions and monkey-patch fetch (if
| possible)
| wg0 wrote:
| SvelteKit is great in SPA mode as well. Other reason would be
| for example embedding it under wails/tauri with no backend
| required.
| sansseriff wrote:
| Svelte 5 has been very nice to work with over the past few
| months. Yes, runes require you to think more carefully about
| lifecycles and updates. And you may end up writing a little more
| code initially than with svelte 4. But it serves you better in
| the long run with complex apps. I found a process for gradually
| turning a simple app into a more complex one that works for me. I
| iteratively move $state() runes out of .svelte files and into
| .svelte.ts files where I build a more abstract data-oriented
| structure for my app from a series of mutually linked classes.
| Then those runes can be re-imported into the .svelte files, or
| used and updated wherever you need. If you plan it right, I think
| it avoids the need for heavy redux-like state management. (at
| least I think so. I haven't worked with redux much myself)
| mhitza wrote:
| Do you know of any large OSS software built with Svelte? I'd
| like to see how it turns out in the long run, because I'm
| reticent of all frontend frameworks nowadays through what I
| perceive as gateways to uncontrollable accidental complexity
| and abstractions.
| v3ss0n wrote:
| Ofcoz hypest and ml opensource software frontend are build
| with svelte and they're very successful
|
| huggingface https://huggingface.co/pydio
| https://huggingface.co/docs/chat-ui Ollma webui
| https://github.com/open-webui
|
| These are just a few of them that I quickly search and look
| at their popularity .
| bbkane wrote:
| Does https://github.com/dbgate/dbgate count?
| tjhorner wrote:
| Immich uses SvelteKit for its frontend:
| https://github.com/immich-app/immich
|
| I've used it as a reference for a NestJS+SvelteKit app in the
| past, they did a pretty good job.
| djhn wrote:
| Huly was just recently on the HN frontpage:
| https://github.com/hcengineering/platform
|
| Gradio: https://github.com/gradio-app/gradio
| kosmozaut wrote:
| MVC is all the rage these days
| jwilber wrote:
| Just my personal opinion: I love svelte for small projects but
| the whole runes rewrite just feels so much less ergonomic. A
| step in the direction away from the simplicity that drew me to
| svelte in the first place.
|
| That said, there is backwards compatibility with the older
| syntax, so this isn't a dealbreaker, and the team does a good
| job of explaining the reasons behind their selected design
| patterns.
|
| (Interestingly, I've felt the opposite with react lately -
| they've been making the dx simpler).
| codelikeawolf wrote:
| This really made my day. I decided to convert a pretty large
| project over to v5 a couple of months ago because the new APIs
| were so much nicer. I rolled the dice a bit because I wasn't sure
| if I was going to hit weird edge cases, but everything went
| smoothly. Congrats to the Svelte team and major kudos for coming
| up with runes!
| gumbul wrote:
| Do they still operate with very little backwards compatibility
| policy? They killed the sapper project and replaced it with
| sveltekit. Is sveltekit still alive?
| cmews wrote:
| They still support svelte 4 syntax and announced today as well
| a new migrate CLI to help moving from svelte 4 to svelte 5.
|
| CLI tool: https://github.com/sveltejs/cli
|
| Edit: added the link to the CLI tool
| hu3 wrote:
| Sapper was a looong time ago in terms of web dev chronology. I
| even forgot.
|
| Why makes you think SvelteKit could be dead? What a weird a
| pessimistic phrasing.
| levmiseri wrote:
| I can wholeheartedly recommend Svelte. As someone who can only do
| vanilla HTML/CSS/JS, it lets me build projects quickly and
| efficiently without having to learn something complex like React.
| Case in point this silly side project made in Svelte over a
| weekend: https://meoweler.com
| willy_k wrote:
| That website is actually a great way to compare options, thanks
| for sharing! I did find that it gives a 500 error for
| Birmingham, AL specifically, if you're still working on it.
| yawnxyz wrote:
| Is there are Svelte 5 Runes tutorial for those who are familiar
| with previous Svelte and Sveltekit?
| Slylencer wrote:
| Svelte is getting a new website soon too. It's in preview mode
| here: https://svelte-omnisite.vercel.app/. Tutorial is not
| completely converted yet.
|
| (edit) Sorry, for previous users the preview site might be
| better: https://svelte-5-preview.vercel.app/docs/introduction
| b3ing wrote:
| Hope it starts to chip into React's usershare and more companies
| adopt it, but I know that's a slow process especially for the big
| companies.
|
| I got out of front end development for most of the years Angular
| and React have dominated and it looked like a mess, but Svelte
| and even Astro make sense, maybe I'm just old school. I would
| totally go back to the frontend with these new frameworks.
| ledgerdev wrote:
| What's the latest on building PWA's with Svelte/Kit 5?
| stormfather wrote:
| An interesting datapoint:
|
| I made my first website a few months ago (I'm an ML engineer). I
| tried in both Svelte and React.
|
| I used Sonnet as a copilot the whole time and expected Svelte to
| be more difficult because there are orders of magnitude less
| training data on it.
|
| To the contrary! The LLM tied itself in knots very quickly with
| React but mostly did ok with Svelte/Sveltekit. Also, the Svelte
| stuff it makes is usually snappier. However it does have a wider
| range of UI widgets it can grasp with React.
|
| It seems that my opinion that React is horrendously and hideously
| overcomplicated is at least somewhat objective! Svelte has been
| quite pleasant.
|
| To any devs out there that have to work with React, you have my
| sympathies. Compared to Svelte it's just flaming hot putrid
| garbage.
| nwienert wrote:
| Strong words, I actually enjoy it quite a lot. For trivial
| stuff I can see how Svelte can seem simpler. But effects, JSX,
| and the React model tend to be incredible at composition at
| scale. And the close to the metal to JS nature is something I
| strongly prefer.
|
| Now granted I'd never use a reducer, and imo a decent state
| library is the biggest win if you are using React.
| colonelspace wrote:
| Another interesting datapoint:
|
| Every time I try out something other than React (Vue, Svelte,
| etc), I have to learn some new syntax, understand the runtime
| magic, and add a syntax/LSP to my editor. But React is just
| JS/TS, which is straightforward.
|
| Being disappointed by a library/framework because your LLM of
| choice can't produce decent code doesn't really tell me very
| much about the library, other than it's usage is varied.
| tamimio wrote:
| Is there any svelte components or better a full
| boilerplate/template to save the time building front-ends?
| codeflo wrote:
| Someone on Twitter claimed that Svelte 5's runes are basically a
| nicer (custom) syntax for Solid.js -- is that true? I find the
| way Solid.js decouples signals from components to be a huge step
| up from React's state management in terms of abstraction
| capability and composability.
| Blackarea wrote:
| Hm i haven't checked the svelte 5 runes yet but last time I
| checked i also felt that solids reactivity concept is just
| beyond what svelte offers. If i wasn't that much in love with
| solidjs i'd probably pick svelte though. But i already see it
| coming that i won't be able to let it go until i checked the
| new runes now...
| asqueella wrote:
| Kinda: https://svelte.dev/blog/runes
|
| > Svelte 5's reactivity is powered by signals, which are
| essentially what Knockout was doing in 2010. More recently,
| signals have been popularised by Solid and adopted by a
| multitude of other frameworks.
|
| > We're doing things a bit differently though. In Svelte 5,
| signals are an under-the-hood implementation detail rather than
| something you interact with directly.
| ChocolateGod wrote:
| Been using Svelte for about 8 months and have fallen in love with
| it, using it in production for both personal and company
| projects.
|
| My only gripe is it doesn't support <template> tags or class list
| arrays out the box, meaning I've had to use preprocessors
| instead, the latter for me makes it far nicer to mentally
| visualise components when using dynamic tailwind classes.
| neontomo wrote:
| any sense in porting a v4 project to 5?
| beginnings wrote:
| all the big frameworks bar react are switching to the solid model
| of signals and fine-grained reactivity
|
| people would be better off just using the real thing, Solid
| amelius wrote:
| Doesn't the philosophy behind Svelte justify a broader scope than
| just Web apps?
|
| Shouldn't this be a more general programming language?
| impulser_ wrote:
| Why should someone use Svelte 5 over Vue 3?
|
| Performance might be the only reason IMO, but once Vue Vapor is
| release that will most likely not be an advantage.
|
| The Vue3 and Svelte 5 API are almost the exact same, but Vue can
| be used in TS/JS and Svelte 5 can't.
|
| I do think SvelteKit is better than Nuxt by a lot. Maybe that's a
| big advantage.
| CharlieDigital wrote:
| One of the speakers at the recent ViteConf (maybe Antfu) said
| something interesting: most of the modern libs now are
| interchangeable. It comes down to preferred syntax and
| ecosystem.
| meiraleal wrote:
| No they are not. They would if they were natively
| webcomponents based but none are
| purple-leafy wrote:
| Svelte. Interesting framework, I dipped into React then tried
| Svelte and loved it initially - very noob friendly.
|
| I really liked having HTML/CSS/Js all in one place.
|
| But then tailwind became popular, and I realised I could get this
| same UX with React + Tailwind.
|
| Now I prefer React + Tailwind to Svelte.
|
| No Svelte jobs, weird compiler magic. Hated SvelteKit
___________________________________________________________________
(page generated 2024-10-19 23:00 UTC)