Svelte 5 Released(npmjs.com)

415 pointsby begoonvor 2 Jahren246 comments

https://www.npmjs.com/package/svelte

253 comments

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

rikrootsvor 2 Jahren

I went with Svelte when I built out the website for my canvas library a few years back[1]. It's proved to be easy to maintain the site, and I particularly like that it supported my vanilla JS library (which I use on the site's landing page) with minimal fuss.

At some point I want to update the site to use Sveltekit, which I'd been experimenting with in personal projects. But then the team announced Svelte 5 and these things called "runes" and ... I don't know. Having just passed my 60th birthday I'm getting to a stage in my life when keeping up with all the New Shiny makes me wonder if it's worth the effort, or if I should be doing more interesting stuff like creating new content for the site instead.

[1] - https://scrawl-v8.rikweb.org.uk/

nsonhavor 2 Jahren

It's funny because very early on the key selling point of Svelte was that you just mutate objects and it compiles to the observable pattern, unlike React's clunky setState syntax. Now, somehow magic symbols in the code is supposed to be an improvement? It doesn't seem that different from React's magic hooks these days.

Is there some mysterious force of nature that binds front-end frameworks to bad decision making?

lowboyvor 2 Jahren

I haven’t had the chance to use Svelte in even a semi-serious project. From what I’ve tracked, Runes allow for better handling state complexity and allowing finer grained explicit control of reactivity.

Maybe you don’t need that. Seems like a bunch of the Svelte community did. I wouldn’t frame that as a bad decision.

kirsovor 2 Jahren

There is probably a reason they did with a ground-up rebuild and partially this is because svelte 4 didn't enable universal reactivity and $ was more confusing than useful.

Furthermore <slot /> had limitations in terms of children which made it difficult to build UI libraries.

Svelte 5 now is actually simpler to learn for new comers despite higher verbosity.

I love it!

joshdavhamvor 2 Jahren

> As someone who can only do vanilla HTML/CSS/JS

This is also why I chose SvelteKit as my first framework. I was actually pretty fluent in vanilla since my first real web project was a full stack chrome extension, but when it came time to choose a framework for my first true web app, I chose Svelte because it was the only framework I could immediately understand.

NetOpWibbyvor 2 Jahren

> vanilla HTML/CSS/JS

Svelte reminded me of how I got my start with coding. I love it. Refusing to learn React has cost me job opportunities but Svelte is just so much more pleasant to use and easy to grok.

I’m currently building a social network with SvelteKit and I couldn’t be happier. Excellent DX.

maxpagevor 2 Jahren

It has so much vanilla js & CSS vibes. Brings back the time when building web was so simple.

> easy to grok got me :)

[deleted]vor 2 Jahren

willy_kvor 2 Jahren

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.

levmiserivor 2 Jahren

Thanks! I plan to do a better pass over all cities with a new update to the site.

incrudiblevor 2 Jahren

> vanilla HTML/CSS/JS

...but that's what Svelte is not. The techniques you adopt won't transfer over to vanilla HTML/CSS/JS without the magic Svelte compiler. These habits will become crutch when Svelte inevitably goes the way of every Javascript frontend framework.

> something complex like React

React is not that complex, certainly not more so than Svelte. It's hard to wrap your head around some behaviors, but at the end of the day, it is really just Javascript/Typescript. It is programming. As a programmer, I want to spend most of my time programming in a programming language, not so much of it configuring the Rube-Goldberg machine that is HTML/CSS. Your mileage may vary, of course.

> this silly side project made in Svelte over a weekend

I will admit, that's what Svelte excels at.

levmiserivor 2 Jahren

I guess it's more that knowing only vanilla HTML/CSS/JS transfers really well to Svelte than the other way around.

DecoySalamandervor 2 Jahren

> As a programmer, I want to spend most of my time programming in a programming language

If your work requires you to use a web stack, this attitude will not serve you well in the long run. If you make the effort to learn these technologies, you'll soon find them to be simple and predictable, but admittedly not without some historical baggage. You may even have an easier time with Svelte, since it has everything working out of the box, unlike React, which requires you to figure out a build toolchain and a separate solution for styling.

rapindvor 2 Jahren

Not sure about this. Most JS frameworks only last a few years before the next shiny is mass adopted. The churn in JS land is insane.

React is definitely one of the long beards though, and thats’s because declarative programming is a win for UIs IMO. So much so it had a massive knock on effect in popularizing this approach (what’s old is new again… and again) across languages and problem sets.

DecoySalamandervor 2 Jahren

IMO we're long past the churn era - Svelte itself is 8 years old. There are occasional bursts of new frameworks and tools, but only when there is a new niche - the last one I remember was a few years ago when suddenly everyone wanted to do a static website generator. And that didn't make existing frameworks obsolete.

In my post I was actually speaking about learning CSS and HTML alongside the "real programming language" that is JS/TS.

incrudiblevor 2 Jahren

> If your work requires you to use a web stack, this attitude will not serve you well in the long run

I disagree. A "web stack" is outdated quickly, but the language remains mostly the same, as does my data. React lets me express most things naturally as forward data transformations, without entangling me too much to peculiar toolchain that will become obsolete and break absolutely everything.

> You may even have an easier time with Svelte, since it has everything working out of the box, unlike React, which requires you to figure out a build toolchain and a separate solution for styling.

Sure, you'll have an easier time making decisions if someone else makes them for you.

1shoonervor 2 Jahren

>Sure, you'll have an easier time making decisions if someone else makes them for you.

You're comparing two tools that are both at the top of a very tall stack of pre-made decisions.

tcfhgjvor 2 Jahren

Having everything ootb is something I enjoyed a lot with Angular as well.

Interestingly, people chose React over Angular, because it gave you the freedom to not use anything.

plaguuuuuuvor 2 Jahren

(caution: backend dev opinion)

I swear every time I use React, every couple of years, I wind up thinking "okay fine, but... why?"

I love JSX. But the React API, for some areas, feels complex and boilerplatey. I dunno why you have to explicitly memoize some stuff. Svelte just magics that shit away.

CharlieDigitalvor 2 Jahren

    > But the React API, for some areas, feels complex and boilerplatey

You may or may not have noticed this, but the React API is a bit counterintuitive to how JS or any other code you normally write would work because the component function gets invoked repeatedly so any code in the path of the functional component that's not externalized into a hook or memoized will be invoked again.

That's also why in local dev mode, you'll see the render cycle executed twice so that you can spot any undesired side effects due to this design choice.

So a lot of the complexity is to deal with this specific design choice to determine when code inside of the component function needs to be re-executed. In React, you need to explicitly opt-out of reactivity while in nearly every other framework, you are opting-in to reactivity.

For me, I've always seen this as the weirdest footgun because it's antithetical to the underlying language and runtime behavior so developers need to be explicitly aware of this behavior.

lofaszvanittvor 2 Jahren

It's a bloated, unnecessarily overcomplicated piece of trash.

martpievor 2 Jahren

That the whole industry embraced. Not bad for a piece of trash.

throwawayie6vor 2 Jahren

As someone who had to work around the bugs and limitations of IE6 for years in the enterprise, popularity is not a measurement of how good a technology is.

The reason React is "embraced" by the industry is that it is widely used, not because it's the best choice. This lowers the risk for companies that can replace its developers with another easily. I'm not saying it's as bad as beeing stuck with a stale IE (yet), but there are surely good alternatives out there.

"Nobody has been fired for choosing IBM", was a saying that applies to React today

It has reached the "IBM" point where it's so widely used, that it has become the most rational choice for enterprise.

We have to wait for a few years while smaller businesses who don't have (or care about) the same risks uses better alternatives until they reach the point where you are not blamed for choosing something outside the box

spoilervor 2 Jahren

> The reason React is "embraced" by the industry is that it is widely used

That looks like tautology to me. What point are you trying to make with this?

Comparing IE6 and React is _hardly_ a fair comparison. One was a Trojan horse injected by corporate policies and ACLs, while React gets explicitly chosen by teams. And... Yes, there _is_ a reason why nobody gets fired for choosing React: it's not a bad choice! Is Svelte a better choice? Not universally. Unfortunately—like with many things in our field—it comes with trade offs and the answer boils down to "it depends" again.

React has its quirks, but "hating" on a library because it was part of a dumpster fire project doesn't mean the library is bad, just that people using it weren't competent with it (not necessarily incompetent in general).

Vue, Svelte, Leptos, Solid, Elm. I've seen all of them used as dumpster fire fuel, and it was hardly the library's fault.

throwawayie6vor 2 Jahren

I do not hate React and am not the person who made the dumpster fire argument. The original person complained about React, and another person used popularity as a counter argument. That was what I replied to.

> That looks like tautology to me. What point are you trying to make with this?

React is in a place now, where it is the "safe" default choice for Enterprises. It's not necessarily a bad choice, but I argue that risk management is often an important part of deciding which tech to use.

It got to this point by being backed by Meta and was a genuinely good alternative to other frameworks at the time. But it is my view that enterprises prefer React not because it is the best, but because it is good enough and easy to find workers with experience. This is a self reinforcing feedback loop.

I worked in a sales driven startup some years ago and got to shape the technology as the first hire and only developer for a few months. I chose React because it was easier to recruit for and time to market was important. If I had already a team of developers with experience with another framework, I would have chosen that one even if it had been a less popular framework due. Time to market was our main focus.

More established companies don't have the same time constraints and are often more concerned about scaling up with multiple teams. A less popular framework is a bigger risk. It is "easy" to hire 10 people for any framework, but what about 100?

angra_mainyuvor 2 Jahren

An unfortunate issue. Vue is far better, as is Svelte.

codethiefvor 2 Jahren

Vue? Lol. I've been using Vue full-time in multiple large corporate code bases for the past 3½ years and I'd exchange it for React in a heartbeat. Its type checker and build toolchain are so abysmally bad and bug-riddled that I run into new bugs and limitations on the daily. …which is no surprise really if you introduce a new custom file format and make type checking an afterthought.

Meanwhile, React is basically pure TS and the only bugs I run into are the occasional limitations of TSC.

angra_mainyuvor 2 Jahren

I disagree.

>Its type checker and build toolchain are so abysmally bad and bug-riddled that I run into new bugs and limitations on the daily.

This seems like a setup issue.

Mine catches everything just fine. Both in-editor (I use neovim) and with a make step (just calls vue-tsc) + a precommit hook as a sanity check.

>React is basically pure TS and the only bugs I run into are the occasional limitations of TSC.

React is obscene. It always seemed to me the Java of the FE world, made worse in recent years. By that I mean grotesquely verbose and full of ceremonious value passing through multiple functions just for the tiniest of things. I've had to work with React codebases and these days I outright refuse to do that/turn down jobs with that requirement. I'd rather use angular.

Svelte and Vue are ergonomic and straightforward and they sanely default to SFCs instead of that woeful chimera of languages called JSX/TSX - you can still use it if you so desire though.

dotancohenvor 2 Jahren

> It's hard to wrap your head around some behaviors

I've got a React maintenance and development project coming up in a few weeks. I'd love if you'd expand a bit on these points and maybe point to some relevant docs. You could potentially save me days or more of tail chasing. Thanks.

acemarkevor 2 Jahren

The biggest thing most people don't understand is that React re-renders recursively by default, regardless of whether any particular child component's props actually changed or not. Most of its behavior patterns follow from that one.

I have an extensive post called "A (Mostly) Complete Guide to React Rendering Behavior) that covers the concepts and nuances in detail:

- https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-...

dotancohenvor 2 Jahren

Thank you.

incrudiblevor 2 Jahren

Primarily the rules of hooks and what does and does not trigger a render or a unmount. If your project still uses class instead of function components, that's a potential target for refactoring.

> some relevant docs

Read the docs. All of them. React isn't that big.

dotancohenvor 2 Jahren

Thank you. Neither of those topics are new to me. Great to know!

klysmvor 2 Jahren

I found svelte more complicated than react to make work in practice

rukshnvor 2 Jahren

This is a really nice website.

Few things, for me the domain name is difficult to remember

The page doesn’t fully scroll down for me and the discord button is not accessible on mobile

Other than that the site it nice

lofaszvanittvor 2 Jahren

It's "cybernetically enhanced"!

dangsuxvor 2 Jahren

sansseriffvor 2 Jahren

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)

jwilbervor 2 Jahren

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).

cagefacevor 2 Jahren

This is more or less where I’ve landed lately. There are some things I really like in Svelte and Solid but not enough to overcome the massive ecosystem advantage React has.

dtj1123vor 2 Jahren

I never understood the ecosystem argument as applied to Svelte. Vanilla js libraries integrate with it pretty much perfectly, meaning you don't need a Svelte port of a given library. The ecosystem is effectively huge.

cagefacevor 2 Jahren

There aren't very many good modern, maintained vanilla js libraries. But for just about anything I need in React I can find something polished and well supported that just works.

RadiozRadiozvor 2 Jahren

I'm not sure I understand. What types of libraries? When I think of libraries, I think of ExpressJS, lodash, JQuery, left-pad, etc. There are absolute tonnes of vanilla JS libraries.

I've rarely used React, are you talking about React-specific libraries? I find it hard to believe that there are more maintained React libraries than vanilla JS libraries.

keyserjvor 2 Jahren

I don't have a strong opinion on the whole, but as someone who's been building a diagramming app for 2+ years, I've found react-flow to be the most solid free & open-source node-based diagram component, by far. At least in terms of quantity/quality of features and UX/DX. Though admittedly I haven't thoroughly looked at alternatives in about a year.

It basically singlehandedly convinced me that the ecosystem was worth going with react when I started my project, despite really enjoying svelte.

satvikpendemvor 2 Jahren

Framer Motion, react-three-fiber, react dnd, just a few that come to mind.

cagefacevor 2 Jahren

All those libraries also work in React of course. The only vanilla js libraries that don't work well with React are UI libraries that assume they can control the DOM. But I can't think of many of those I'd prefer to the many excellent React UI libraries.

mhitzavor 2 Jahren

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.

toastercatvor 2 Jahren

PocketBase's UI is built with Svelte: https://github.com/pocketbase/pocketbase/tree/master/ui

EDIT: Also, not OSS, but https://search.brave.com seems to be built with Svelte

tjhornervor 2 Jahren

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.

FractalHQvor 2 Jahren

Apple Music isn't OSS, but it's quite a large Svelte app: https://music.apple.com

swyxvor 2 Jahren

more notable companies using svelte because this always comes up https://x.com/SvelteSociety/status/1260209026563858432

mklvor 2 Jahren

https://xcancel.com/SvelteSociety/status/1260209026563858432

esperentvor 2 Jahren

Only viewable if you have a Twitter account, which is less and less common these days.

ChocolateGodvor 2 Jahren

I have no idea Apple was using Svelte, that's cool

Another notable example is Yahoo Finance, which is written in Svelte

https://finance.yahoo.com/

sligvor 2 Jahren

Windmill - https://github.com/windmill-labs/windmill

Aliabid94vor 2 Jahren

Gradio is built with svelte https://github.com/gradio-app/gradio

v3ss0nvor 2 Jahren

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 .

v3ss0nvor 2 Jahren

HuggingFace https://github.com/gradio-app/gradio ChatUI , lots of AI applications UI are build with / ontop of svelte. https://github.com/huggingface/chat-ui

Ollama's OpenWebUI https://github.com/open-webui/open-webui

Cannot edit my previous answer i mentioned wrong page. , updated proper links

djhnvor 2 Jahren

Huly was just recently on the HN frontpage: https://github.com/hcengineering/platform

Gradio: https://github.com/gradio-app/gradio

bbkanevor 2 Jahren

Does https://github.com/dbgate/dbgate count?

anscvor 2 Jahren

> 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.

I don’t know exactly how you do this, but it sounds like you are dangling on the global state of the runes. This is DANGEROUS in Svelte and can definitely ruin your day.

DecoySalamandervor 2 Jahren

Could you elaborate on why it's dangerous? Aren't runes just proxies with some variables in them?

anscvor 2 Jahren

Of course! I was very used to SPA, and the convenience of moving a rune/store to an external file meant it could be accessed anywhere (as the post said). With SSR however, if you’re not careful, you can easily leak data: https://github.com/sveltejs/kit/discussions/4339.

rofrolvor 2 Jahren

Thanks. also this https://github.com/sveltejs/kit/discussions/4339#discussionc...

kosmozautvor 2 Jahren

MVC is all the rage these days

b3ingvor 2 Jahren

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.

rimliuvor 2 Jahren

React is cargo cult at the moment and has been for years already. People will just use react because everybody is using react, no matter if it makes sense or not.

sureIyvor 2 Jahren

If Vue hasn't made a dent, I don't ever expect Svelte to. Angular was the only high-level competitor and I haven't heard that one in a long time already.

For a framework to eat into React's usage, it needs a strong evangelist (like Facebook has been for React)

b3ingvor 2 Jahren

But didn’t Vue come before React? And it’s mostly the same from what I understand, it’s not totally different like Svelte. I think it can change, if more people put it on their resumes and LinkedIn and if those that know React say can do things in 1/3 the time with Svelte and mention that in interviews as well. That is a slow way of evangelism for Svelte that can spread.

WickyNilliamsvor 2 Jahren

No, react came first. And Vue is not the same. Vue 3 added reactivity via refs (which are essentially signals by today's terminology). They can be used outside of components, like Svelte's runes. Svelte 5 is very similar to Vue 3. So much so I jokingly called it "svuelte" when they first announced it.

Vue gets unfairly overlooked imo. I worked with it for 12 months and it was mostly a joy

zeroc8vor 2 Jahren

I'm only familiar with Angular so far, but looking for a more enjoyable framework for personal projects. I'm having a hard time deciding between Vue and Svelte. Vue seems to be better supported by component vendors (PrimeVue, DevExtreme), but Svelte looks better from a framework perspective itself.

CharlieDigitalvor 2 Jahren

Looking at the docs, Svelte is a mix of React and Vue, IMO.

They reverted from the `on` syntax while adding in signals like Vue's `ref`. The way the props pass down is more akin to React than Vue, but the overall reactivity system feels the same as Vue.

I'm not sure I'd pick it over either Vue or React.

datavirtuevor 2 Jahren

React has already been chosen. The familiar hammer. Face it, there is an entire workforce worth of devs who think web development is React (and now they are moving into management). The same way droves of people think Facebook is the internet.

Normal_gaussianvor 2 Jahren

I was very amused this summer, hearing a company that I had worked at six years ago is switching from React to Angular. I had thought angular was dead.

orravor 2 Jahren

Angular is really popular for corporate apps, in companies who use .NET. Possibly because Angular has batteries included.

datavirtuevor 2 Jahren

I gave React a handful of year to get popular and mature. I tried to approach it an immediately ran into basically endless arguments and bitching about how to manage state. There was no clear winner so I dropped it. Everywhere I landed trying to find advice or best practices just led to more questions. Like WTF?

Svelt, Vue3 or hell...Angular, and it's off to the races. I just need to know how to accomplish all the things being demanded by Product.

mplewisvor 2 Jahren

useState has been present in React for years.

CharlieDigitalvor 2 Jahren

Prop drilling sucks and React has at least a handful of different philosophies when it comes to managing cross-cutting state (Redux, Jotai/Recoil, Zustand, Context, etc.).

zuhsetaqivor 2 Jahren

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!

notpushkinvor 2 Jahren

Here’s the release on GitHub: https://github.com/sveltejs/svelte/releases/tag/svelte%405.0...

Probably a better link for this post?

tlnvor 2 Jahren

Or even https://svelte-omnisite.vercel.app/ which is linked from there. It is the v5 Svelte homepage, currently svelte.dev is v4

Edit: I'm not so sure that's up to date actually. Lots of "Coming soon" sections

gr__orvor 2 Jahren

This kind of feels like an accidental release, would not expect one of the big frameworks to drop a new major with so little doc around it?!

ar-janvor 2 Jahren

It's because they wanted to release it live during Svelte Summit https://www.sveltesummit.com/2024/fall

notpushkinvor 2 Jahren

Yeah, looks like work in progress (and when it's ready I think it will be on svelte.dev)

swyxvor 2 Jahren

Rich said a blogpost will be coming on monday, presumably that will be the canonical link to actually post on hn

pier25vor 2 Jahren

I've been using Svelte since v3 was released almost daily. I've been using v5 for the past couple of weeks and it's fantastic.

The biggest improvement IMO is that you can now write reactive logic intuitively outside your components and it just works without needing to use complex machinery or patterns like Mobx, Redux, or Vuex.

I've been doing frontend since the 90s and used everything under the sun. Svelte 5 is the most pragmatic and elegant solution I've ever used.

ssijakvor 2 Jahren

How is mobx complex, its literally plain class for reactive data and wrapping components with observer()

pier25vor 2 Jahren

Have you ever looked at all the code that it needs to do that? Plus an integration lib like mobx-react. And even then the performance doesn't compare to Svelte 5, Solid, etc.

sampullmanvor 2 Jahren

You can use reactivity outside components in Vue without Vuex, I don't find it to be much less intuitive than Svelte (which is also nice, don't get me wrong).

pier25vor 2 Jahren

You can but it's nowhere near as elegant and natural.

Vue exposes ref(), .value, etc which personally I find to be just cognitive overhead.

With Svelte 5 you just use $state and don't need to care about the implementation details. Furthermore, thanks to the compiler approach, your Svelte code is not coupled with an internal API anymore.

h_tbobvor 2 Jahren

I don't understand how React is so popular, still. With Svelte and Vue, I don't think anybody should do a new project with React.

Waterluvianvor 2 Jahren

I can’t speak for the majority, but for my team it’s because it’s not worth the distraction. We’ve got years of experience and tooling and “tradition” with one approach. Why do we want a second?

It’s also just not an interesting issue. In my experience, the actual coding (and later maintenance) of a web application is the least challenging, least interesting part of the project. At that stage, all the interesting problems have generally been solved in workflow, process, data structure design and general de-risking. Classes? Hooks? Binding style? Tabs or spaces? I really couldn’t care less. Just be consistent so you can all build and develop skills together.

I admit that when I was younger this kind of thing seemed to matter to me. I dunno if it’s because I’m now more focused on big picture or if I’m just tired and don’t care anymore. Maybe both!

troadvor 2 Jahren

I really like this anecdote, and I very much think you're speaking for a lot of people here. Tech is tooling. Some people make a hobby out of the tooling, others merely use the tools to build something.

It's totally valid to make a hobby out of tools (e.g. motorcycles), but it's easy to end up with all sorts of highfalutin' opinions about how the tools must or must not be used, that hinge on minute distinctions that fundamentally don't matter to someone looking to merely use them as tools.

VMtestvor 2 Jahren

From users' point of view, they only care about the performance really

Some e-commerce apps use React in WebView on Android and the apps will become unresponsive after visiting several product pages (more than 10 probably). They have to be force closed and opened to be used again

gr__orvor 2 Jahren

This has the essential bits of one of the most common critiques of React, its claimed slowness.

As a seasoned React dev of 10 years (aka a heavily biased person) I would claim 99% of this issue is better explained by: - React is the most popular choice => used in all kinds of places by all kinds of people - with varying skill - under all kinds of business pressure to deliver features => a lot of slow apps in React

I'm not saying a case for specific areas where React is slow can not be made, these anecdotes just don't do it for me.

We do have the synthetic framework benchmark, where React is indeed one of the slower candidates. I have yet to build an app with functionality akin to adding 10s of millions of rows, so it has not been an instructive decision driver for technology choice. The project I have been working on (also in Vue, Svelte, SwiftUI) had their bottlenecks in other places.

The non-synthetic argument in favor of React passing the performance test is billions of people using FB, Insta, Netflix, MS Office (to name some of the big React apps), about which I have not much in terms of complaints.\ This is usually where the second big React critique kicks in: it being a Fortune-500 framework. That has not been my non-fortune-ate experience.

I think a residual argument can still survive this: I/my org has not been able to write performant React. I'd be curious to read someone go into the details of where it broke down and how switching view layers solved for that specific situation (I hope that does not read cynical, I'd really be curious).

VMtestvor 2 Jahren

reply to my own comment

reddit switch from reactjs to lit for performance reasons

https://www.reddit.com/r/reactjs/comments/12yxva6/whats_you_...

nothing is wrong with react, performance is obviously depending on how optimization is done

Waterluvianvor 2 Jahren

Yeah. And that’s basically the thing, right?

If I need to hit a certain performance because the business has concluded that it matters, and React can’t get us there, then I’m likely switching to Svelte or whatnot.

If none of my tools can do the job, I’m going to the store and buying a new tool and learning how to use it. I don’t feel ideologically attached to my palm sander. I’ll buy a belt sander if the palm doesn’t make sense for a task.

eviksvor 2 Jahren

But your tools can't do the "performance" job right now, it's just that there is enough "friction" in the management/decision chain that it may not be decided on by "the business".

Though the desire to improve without external pressure could be considered ideological

mijamovor 2 Jahren

Hora do you know that? I've seen really well optimized React apps and very poorly optimized Svelte apps. It's not like using Svelte magically makes performance good. Just like using Unreal Engine doesn't mean that a game is optimized. You just have different, maybe better, tools to improve performance.

Aeolunvor 2 Jahren

This sounds familiar. We know React, and while I’d dearly love more automatic performance, it’s not worth introducing a whole bunch of new complexity to do that.

esperentvor 2 Jahren

I'm building a React app from scratch and since I have control this time, I'm following a strict pattern: all data manipulation (∆) happens outside of React components, and the components themselves are as lightweight as possible.

I feel like this change suddenly makes everything about the React paradigm make sense - it can be just a view layer, and when used that way, it works great.

But I can't say I've ever worked on a React app that followed this this pattern before. Perhaps this is React's fault, or perhaps it would be the same with every framework once an app gets big enough (in my limited experience with Vue and Angular, those didn't seem any different from React in this regard).

(∆) By data, I mean the data that is fed into the app from the database. There's a certain amount of data generated internally by components, I write small functional functions at the top level or in the same folder as the components to handle that, but not placed inside the component itself, which is common practice but ends up creating these huge hard to parse components.*

jbhootvor 2 Jahren

> all data manipulation (∆) happens outside of React components,

I do something similar. State and its management lives outside the React components, which only consume this state via hooks. Keeping the state in chunks, and outside the tree lets me access a chunk of state only in the components that need it.

This results into minimum amount of re-rendering of components. Component code also looks cleaner and easier to read.

datavirtuevor 2 Jahren

This many years on and we are still trying to figure out state management. Wasn't React designed for the view?

jbhootvor 2 Jahren

The marketing has kept changing.

I have always found state management easier in React if I keep it out of React.

nsonhavor 2 Jahren

My React fomula is React + MobX, keep the hook use to minimum, single state object per component (the classic React way), do not bother with server components at this point, you should be fine.

FartinMowlervor 2 Jahren

Haha, reminds me of 20 years ago when someone said they are building a PHP app from scratch and this time they won't have HTML, business logic and SQL all in one .php file. We learn as we go ;)

qudatvor 2 Jahren

I think that’s a smart approach. You might be interested in https://starfx.bower.sh which has similar design goals

terandlevor 2 Jahren

This is why I think react is still the best: In react you only deal with plain values. You never have to worry about wrapping a value in an observable or calling it in a function with a tracking context. Or .valueing it or whatever.

It looks like Svelte 5 is trying to make signals "disappear" but they still leak through. Reading the docs about shallow $state.raw vs deep proxying the default $state rune in svelte 5 makes me really appreciate the plain value and simpleness of react.

The react compiler will make the biggest headache of react go away, that being useMemo, memo, and useCallback.

React has the biggest and highest quality ecosystem. It has the smartest and brightest people in this space working either on react directly or in the immediate surrounding ecosystem. React has by far the most $ backing it.

Looking ahead I think react makes the best immediate AI target. Long term AI will go past react but while we still want to vet the code with humans react will probably be the best target.

Thought of another important reason why I love react:

- It has the best TypeScript support of any framework. Partly because MS is so invested in react the typescript team is very incentivized to have good support for them.

Oh yeah and this one is imporant:

- React Native with expo is the best way to make cross platform mobile apps. Yes its better than Flutter.

cagefacevor 2 Jahren

Having used both a fair bit I much prefer Flutter. RN always felt like fragile pile of hacks to me with extremely brittle builds. Flutter feels like a stack engineered for purpose from the ground up and the tooling, ecosystem and performance have been consistently great.

Also RN has no real desktop app story.

lekevor 2 Jahren

My workplace will adopt React for the sole purpose of being easy to find new React developers as it's the most popular library for reactive UI.

Everyone at the company knows a little React already. We are not good at it and we don't like it, but I guess for them it's a safe bet.

prng2021vor 2 Jahren

I think being able to use React Native and Expo are a huge differentiator.

nsonhavor 2 Jahren

There was a sweet spot in the past when React was actually simple and clean.

I really do want to escape it these days but quite frankly every frontend framework is the same and they are just shitty in different ways, not really better than React.

simonsarrisvor 2 Jahren

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

codelikeawolfvor 2 Jahren

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.

taikahessuvor 2 Jahren

Definitely try Astro for static sites, I'm loving it!

yawnxyzvor 2 Jahren

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?!

akudhavor 2 Jahren

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?

chrisldgkvor 2 Jahren

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.

chris_pievor 2 Jahren

offtop, but could you share a bit on why you hate 11ty? I was considering it for a static site.

pbowyervor 2 Jahren

I've used 11ty on and off since pre-1.0. The documentation remains awfully confusing and doesn't cover common use-cases. The system has been pulled together but not thought out as a whole.

Lume (from Deno) is my preferred 11ty alternative.

Nathanael_Mvor 2 Jahren

I adore 11ty. It’s not inherently component driven, but it’s super straightforward and endlessly customizable. It allows you to really experiment with organization, too. I like it a lot.

hasanhajavor 2 Jahren

What do you hate about 11ty?

WuxiFingerHoldvor 2 Jahren

Svelte 5 is almost heaven, I thought. But it's full heaven.

To keep it short: The Svelte team did a remarkable job improving every aspect but preseriving the characteristics and distinctive features (fast, small, easy, elegant).

Now, where I struggled (using Svelte 5 on a business logic heavy SPA since RC in April):

Signal in general are extremly easy to use, but quite hard to track. You have to "know" or "find out" if something is reactive. Vue makes it easy with their .value API, but also not 100% foolproof.

With React: Everything is a value. Unidirectional data flows. It's very easy to follow the flow of the data.

With Angular: Data pipelines are built using RxJS. Hard to learn, but extremely powerful. You can follow the data flow quite well. Not as easy as with React, but once you are good with RxJS, still easy enough.

With Svelte 5: Runes look like values. This mental model is good enough most of the time. It's especially great in small contexts where you exactly know where your variable comes from or where everything is reactive. But Runes also behave like signals and proxies. So, you sometimes need to know exactly what is in your bag. Is it a value? A signal ($state with value or $state.raw with object or array)? A proxy ($state with array or object)? In larger contexts it gets really hard to track.

Why is Svelte still full heaven to me: I realized that Runes are just the basic building blocks. They are the common basic toolkit. I don't have to use them in large business logic areas of my apps. I can create (nominal typed, using TS of course) custom wrapper classes, e.g. to only allow signals, not proxies. This wrapper classes could disallow mutation. Passing those around makes it type safe. If I see a value, it is a value. If I see a type of my reactive wrapper class, it is reactive. Or, I can use RxJS and Svelte 5. Or I can mimic Vue's or Solid's APIs (as Rich showcased).

There's a spot in the new docs (wip) where the Svelte team is going to explain Runes. I think they're also (as other Signal experts - I hope Prof. Signal Carniato solves this for all of us :-)) working on better debugging tools.

I'm happy.

Big thanks and respect to the Svelte team.

9devvor 2 Jahren

It’s interesting to watch this carcinization of reactivity in all major frameworks. They all started out differently, but seem to settle around the same general concepts. These days, you could sit a React guy in front of a modern Vue app, and they could probably figure out how to work with it relatively fast.

dvrpvor 2 Jahren

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.

twicvor 2 Jahren

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...

miki123211vor 2 Jahren

If your native tongue isn't English, I don't think that's necessarily true any more.

aegyptivor 2 Jahren

Expression, comprehension, and mastery of the form are still independent of English, it was never about direct utility or anything.

joakimsvor 2 Jahren

Same!

Writing code and writing literature are curiously similar. It begins with thinking, both structured and creatively. Breaking a story down into pieces while keeping the bigger picture, and making a plan for how to approach it. Then comes the difficult metamorphosis where abstract ideas/concepts are turned into concrete words/code.

Good literature/code is concise, expressive, even beautiful. It doesn't come about easily, but takes time. The author reshapes and refactors the text until it meets some standard that the author aspires to, often revisiting it days later to read it with fresh eyes. Then it's committed for review, and may still have to be reworked a bit.

I agree with those who say that coding is more art than engineering. At least if you're really good at it.

qudatvor 2 Jahren

I had the same thought recently: https://bower.sh/on-writing

chistevvor 2 Jahren

What makes you think about a possible correlation?

codeflovor 2 Jahren

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.

asqueellavor 2 Jahren

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.

Blackareavor 2 Jahren

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...

clessgvor 2 Jahren

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?

DarkUraniumvor 2 Jahren

I've recently moved from Svelte (initially 4, then 5) to Vue 3, and much prefer it.

The big issue for me was the lack of support for nested observables in Svelte, which caused no end of trouble; plus a lack of portals (though maybe the new snippets fix that?).

BodyCulturevor 2 Jahren

There is no way around trying yourself. Stop wasting time asking people for their opinions about frameworks and start building your own insights from first hand experience.

lenkitevor 2 Jahren

Its a valid question, esp if you haven't used a framework for years and want to get to know what other people think of the newer versions. Nobody has time to keep up with all the JS frameworks unless they are a youtuber who does framework comparison as their full time job. And even those youtubers fall behind in the JS world.

clessgvor 2 Jahren

Oh, okay. Thanks.

Squarexvor 2 Jahren

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.

benmccannvor 2 Jahren

SvelteKit is a great way to build a SPA. I think just adding those two lines of config to your project once shouldn't be an issue. If there are any difficulties you'd like to share we'll try to fix them as part of SvelteKit 3. (e.g. this issue which I added to the 3.0 milestone: https://github.com/sveltejs/kit/issues/12580)

toastercatvor 2 Jahren

I would probably just go with the Vite template: https://vite.new/svelte-ts

ffsm8vor 2 Jahren

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

MatekCopatekvor 2 Jahren

The most obvious reason for me would be running something other than Node on the backend, i.e. only using Svelte for the frontend.

sibeliussvor 2 Jahren

SSR always yields surprises! If you don't _need_ it, don't enable it; everything is simpler.

djbusbyvor 2 Jahren

What!? Why would that be?

com2kidvor 2 Jahren

SSR is one missing pragma away from leaking api keys to clients.

SSR means your web server needs to scale with load on your front page, versus static bundles that can be served almost at infinite scale from a $15/month VPS.

toastercatvor 2 Jahren

Sometimes you don't want to develop a full-stack application.

ffsm8vor 2 Jahren

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

WuxiFingerHoldvor 2 Jahren

Running a small Sveltekit app with SSR is the easiest yet most of the time good enough way.

However, when your app is larger or needs to be faster, you want a dedicated backend for your API. Then, you can choose a more secure and more scalable language like C#, Go or Kotlin.

Regarding performance, many SSR advocates (don't forget there's a huge business behind this stuff) don't do the math correctly. It's faster (or as fast) to host a SPA on a CDN and get the data from your backend close to your DB. Let me explain assuming the page containing personal data from the user:

1. The user never visited the site. Getting the SPA from the CDN is very fast. Even if you need to get the JS via a second round trip. Then to get the user data is a much slower second roundtrip to the backend server. With SSR, you also have a first much slower roundtrip to the backend to get your SSR site (maybe even another one for hydration!). Then there's a second slower roundtrip to the server to get the user data. This request is slower than getting the data from a fast API backend in the SPA case. So, if the user never visited the site, you need basically two requests anyway: One for the app another for the data. How else should the backend know, what data to return. With an SPA on a CDN the first request is much faster. I must mention that rendering the SPA is an issue on slow devices. But this is a much smaller problem with Svelte than with React. SEO is probably better with SSR, but no as much as the crawlers are nowadays fast to run the JS.

2. The user has visited the site: The SPA is cached in the browser. Or an eTag validation request goes to the CDN. Very fast. Then, the first relevant request with user auth token goes to the backend to get the user data. With SSR, you get everything with one request. No real world difference there. Both approaches one relevant request. One can argue: Rendering the JS on the client device vs on the Node server. C# or Go backend faster than Next or Sveltekit. But those are not the big numbers.

Now, the big disadvantages of SSR is that you need to run a comparatively slow and not very scalable Node backend. If your app is small, then go for Sveltekit or Next with SSR as the DX is awesome. There's no simpler way to create a fullstack app then Sveltekit. It you have a more complex scenario, most of the time SPA is the way to go.

ffsm8vor 2 Jahren

You do realize that spa stands for single page application, right? That's just synonymous with virtual/JS based routing, which you're now equating with various other technological decisions.

I get that you've got opinions and like to voice them, but the parent comment didn't say they didn't want to use the node backend whatsoever initially. they only asked how to disable hydration.

IMHO, you'd be better of using Angular or plain svelte for this usecase, as almost all value you get from svelteKIT is the tight backend/frontend integration.

If you don't want that, you're using the wrong tool. But hey, the definition of a hacker is basically "a person that uses a tool for an unintended usecase" (literally: someone that uses an axe to build furniture), and this is called hackernews. To each their own.

catlifeonmarsvor 2 Jahren

wouldn’t not running a server be a reason to disable SSR?

dbrueckvor 2 Jahren

We don't run node servers.

kevinakvor 2 Jahren

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)

wg0vor 2 Jahren

SvelteKit is great in SPA mode as well. Other reason would be for example embedding it under wails/tauri with no backend required.

aitchnyuvor 2 Jahren

Also how can we hit back button and keep scroll position? I tend to write pages that scroll to top and make ajax calls. The Sveltekit site does it correctly.

taikahessuvor 2 Jahren

Full v5.x changelog: https://github.com/sveltejs/svelte/blob/main/packages/svelte...

codelikeawolfvor 2 Jahren

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!

gfsvor 2 Jahren

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?"

Vinnlvor 2 Jahren

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.

shepherdjerredvor 2 Jahren

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/

argentinianvor 2 Jahren

Would you use Astro for other type of sites apart from static ones?

I'm not sure if I understand well its use case. It's not for cases when there's complex backend logic, right? What other technologies can be replaced by Astro, to have an example?

shepherdjerredvor 2 Jahren

Astro is _really_ great for static sites. It doesn't feel heavy like Gatsby and Hugo do. I understand what's going on and I get to write JSX that compiles to static HTML.

> What other technologies can be replaced by Astro, to have an example?

As I mentioned above, and you hit on this too, I think Astro can replace static site generators. It wouldn't replace React (or your favorite framework), but it would use those frameworks to reduce your overall reliance on JavaScript and let most of your site be static HTML.

Astro has "island" pattern which allows you to selectively use JS frameworks on portions of pages where interactivity is required. You can use React, Vue, Svelte, etc.

The big benefit of islands is that the majority of your site is static HTML and only the bits of each page that actually need JS rely on it vs React where your entire site would use JS.

I haven't used this feature but I have heard that people really like it.

https://docs.astro.build/en/concepts/islands/

notpushkinvor 2 Jahren

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.

mlbossvor 2 Jahren

I just ignore the whole “frontend stack”. I would suggest to stick with traditional server side rendering and for interactivity use htmx/alpinejs.

maxbondvor 2 Jahren

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.

shadowmanifoldvor 2 Jahren

I am an amateur but the reason I love React is because there is so much learning material. Robin Wieruch's The Road To Learn React book started with building a HN reader.

I think Claude/ChatGPT works exceptionally well with React code.

I tried to learn Svelte but React/Tailwind plus a language model is just incredible.

Much React hate I think is the way I view the band Metallica. They were way cooler in my head when they were not as popular.

cagefacevor 2 Jahren

React is still the most popular framework by a good margin. If your goal is to find work I'd start there, love it or not.

burgerritovor 2 Jahren

Just write Vanilla JS honestly. It's probably enough

chistevvor 2 Jahren

Just choose one.

sureIyvor 2 Jahren

Unpopular opinion: Svelte 4 was much better. It was truly invisible and it used basic JS syntax to do what you wanted. Now runes ruined it.

joakimsvor 2 Jahren

Good news: it's optional.

sureglymopvor 2 Jahren

When I recently looked at SvelteKit, what confused me the most was the universal load function.

If you use "if !browser" with sveltes browser object, the things inside that branch will only run on the server.

But because svelte is compiled, these functions get compiled to two different versions, one for the server and one for the client, in which that if statement has been completely compiled out. That in itself isn't bad but it's weird that normal code and control flow influences compilation. In other languages this would be a macro or something that clearly expresses that it's metaprogramming.

Then there are some other weird things like props being merged and potentially overwriting each other in a deep level. But that is by design and can be reasoned about.

What also felt weird to me is that there is no recommended way to do initialization logic such as reading in a config, reading from the environment and preparing something for the rest of the lifetime of the application.

Has anyone had similar experiences/confusions when learning SvelteKit?

Cloudefvor 2 Jahren

> but it's weird that normal code and control flow influences compilation. In other languages this would be a macro or something that clearly expresses that it's metaprogramming.

Similar kind of thing happens in zig during comptime execution.

sureglymopvor 2 Jahren

It's all acceptable if it at least is documented explicitly and correctly. But I do think sveltekits documentation is a bit sparse and doesn't go into detail about such things.

This is what I would call "magic" or implicit behavior. It seems very nice to have that at first but in reality after significant use of something there will come a point at which one wants to fully understand how it works. The magic then needs to be demystified.

delanyoyokovor 2 Jahren

Why will I use !browser, when I simply move that code into .server endpoint (or file)?

sureglymopvor 2 Jahren

Because then you are doing a different thing than I did there.

The universal load function specifically not only injects the data on the server before serving the page but then also runs on the client once the page is loaded.

In my specific case the client side version hit a different api, hosted in a different region. There are different use cases for this though.

yawnxyzvor 2 Jahren

Is there are Svelte 5 Runes tutorial for those who are familiar with previous Svelte and Sveltekit?

Slylencervor 2 Jahren

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

joshdavhamvor 2 Jahren

> Tutorial is not completely converted yet.

Any idea of when the new tutorial will be complete? I might go back and refresh some stuff.

rootextvor 2 Jahren

https://component-party.dev/compare/svelte4-vs-svelte5 best format to compare to my mind

lasarkoljavor 2 Jahren

notpushkinvor 2 Jahren

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!

youssefabdelmvor 2 Jahren

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', 'ðɛr'], ["they're", 'ðɛr']]

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.

papichulo2023vor 2 Jahren

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.

notpushkinvor 2 Jahren

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!

benmccannvor 2 Jahren

The old syntax is considered legacy and it is recommended to upgrade. There is a migration tool to do most of it automatically for you.

notpushkinvor 2 Jahren

Is there a timeline for the deprecation already? Can I still enjoy it for just a bit longer? ;-;

k__vor 2 Jahren

Finally.

Runes are a pretty slick addition, as someone who comes from React, this feels like home.

dvrpvor 2 Jahren

Blog post will be published on Monday:

https://x.com/Rich_Harris/status/1847682508822913359

jauntywundrkindvor 2 Jahren

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!

KaoruAoiShihovor 2 Jahren

Considering trying out Vue or Svelte after working with React (hate react). Do they have a batteries included bootstrap with social auth?

bufferoverflowvor 2 Jahren

I had to switch to Vue from React after switching jobs, and I gotta say, Vue is so much better in almost every aspect.

I won't choose React for my own projects again.

joshdavhamvor 2 Jahren

> Do they have a batteries included bootstrap with social auth?

Nope, but it does have routing!

kevinakvor 2 Jahren

Actually, with the new Svelte CLI you get auth “built in”

https://github.com/sveltejs/cli

mklvor 2 Jahren

What do you mean? This doesn't seem to say what it does, and the documentation link is broken. I can't find anything related by searching either.

russellpekalavor 2 Jahren

If you like Svelte, Yuzu Health is hiring developers to work in Svelte in New York City. https://yuzu.health/careers/senior-software-engineer

Seems like the number of companies using Svelte in production is growing but still not super high.

nophunphilvor 2 Jahren

Russ - can you please explain the rationale for "In person NYC 5 days a week" and that it's non-negotiable? It seems that you're restricting your talent pool in a labor market that prefers remote work. Given that the Svelte talent pool is smaller as-is, this is counter-intuitive.

schnebbauvor 2 Jahren

Presumably because whoever's in charge decided that's how they want to run their business.

tucnakvor 2 Jahren

How dare they? Oh, no, why wouldn't they think of the labour market?!

adamnemecekvor 2 Jahren

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.

anscvor 2 Jahren

nit: >React, Svelte is an integrated framework

You're talking about SvelteKit. Svelte does not have a router.

adamnemecekvor 2 Jahren

Good point.

ChocolateGodvor 2 Jahren

https://adonisjs.com/ can be an alternative for SvelteKit if you want a more all guns blazing framework to use with Svelte.

impulser_vor 2 Jahren

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.

CharlieDigitalvor 2 Jahren

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.

meiralealvor 2 Jahren

No they are not. They would if they were natively webcomponents based but none are

written-beyondvor 2 Jahren

Well I don't know how Vue3 is but I used Vue before, don't know exactly which version it was.

I found the mental model behind managing state in Vue a little difficult. There was a lot of syntax I had to learn/understand before I could work with it. OTH when I first worked with a svelte working with the code base was extremely straightforward, and that was my very first time touching JS.

I think the main reason for Svelte5 to exist was that state can now be shared beyond the boundaries of a .svelte file. They needed a reactive stateful primitive which is the $state addition.

I recently tried to start building something in NextJS, I worked with react a little bit and thought it really isn't going to be that hard. I honestly didn't get far, I really needed to understand a bunch of concepts before I could just start working. This isn't something I experienced when I started working with Dart&Flutter.

I appreciate all of the work other authors have put in to make UI in plain JS and not bend the language to their whims, but I don't think UIs can be built ergonomically without that. Historically UIs have always been best expressed in languages built around that fact. HTML, CSS and Vanilla JS pushed the envelope for UI development but with what's expected from UIs in this age of browser based computing, that model just doesn't age as well given the complexity it adds.

It's why I reckon people won't give up on making UI frameworks in Rust, because it's macro system allows the authors to build supports around a language that really could not get far on just it's own.

WickyNilliamsvor 2 Jahren

You probably used Vue 2. Vue 3 essentially uses signals for reactivity and it's very straightforward once you have a mental model. It's model is very similar to svelte 5

vivzkestrelvor 2 Jahren

i read about vue vapor mode here https://www.vuemastery.com/blog/the-future-of-vue-vapor-mode... but did not understand the final parts. Are they going to compile your template like svelte does? It says it is inspired from SolidJS but doesnt Svelte do the same thing?

nzoschkevor 2 Jahren

Congrats. I discovered Svelte through the 5 RC and immediately fell in love.

I’m in the process of porting an HTML audio and Spotify Web Playback music player to Svelte5 and it feels so clean and productive.

https://github.com/nzoschke/jukelab

friovor 2 Jahren

This is fantastic news. Between the Svelte 5 RC and Deno 2, I’ve been really enjoying working with the JS/TS ecosystem for the first time in a long time — it’s just been vaguely difficult keeping up with the (minor) tweaks in the RCs along the way. Congratulations to the team :).

joshdavhamvor 2 Jahren

Since we're all here: what UI libraries are y'all using in your SvelteKit apps?

memsetvor 2 Jahren

https://www.shadcn-svelte.com/

atilimcetinvor 2 Jahren

My favourite is daisyUI

stormfathervor 2 Jahren

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.

nwienertvor 2 Jahren

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.

colonelspacevor 2 Jahren

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.

recursivevor 2 Jahren

The difficulty with react generally isn't the syntax. It's the constraints of hooks and reconciliation. Since mutation is always disallowed (but not by mechanical constraints) data changes are harder to express. You have to remember to keep your effect dependency list synchronized even though the linter can tell you when it's wrong. State continuity depends on the heuristics of the reconciler considering this component instance (and all its parents) to be some particular component instance from a previous render function output.

The syntax is maybe the only good part of react. And I still think the way it uses JSX is not great. Conditionals and .map seem... weird.

But yes, judged from syntax only, react is ok.

bippihippi1vor 2 Jahren

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

ysofunnyvor 2 Jahren

seems to be kinda the whole point? (I may be way off the mark)

just came back to svelte after using version 3 previously, and I'm still finding my footing;

gumbulvor 2 Jahren

Do they still operate with very little backwards compatibility policy? They killed the sapper project and replaced it with sveltekit. Is sveltekit still alive?

cmewsvor 2 Jahren

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

hu3vor 2 Jahren

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.

gumbulvor 2 Jahren

It's not a pessimistic statement. I'm just saying they did. There is no guarantee that they will not do the same in the sveltekit project :) I recommend people make smart decisions and use it.

jdsleppyvor 2 Jahren

SvelteKit is very alive and is the way svelte apps are made generally, not like next.js which is more optional.

ChocolateGodvor 2 Jahren

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.

manishsharanvor 2 Jahren

Svelte vs React is discussion that will never end.

For those of us who do not like to code complex logic and state in javascript, I can recommed htmx https://htmx.org/. Also, I am more comfortable writing backend code and this just fits my style better.

stevevvor 2 Jahren

I love Vue. Svelte is great! Unfortunately nothing beats react especially if one plans to develop for mobile. Despite how ugly the nuances in react are compared to those two, it’s still more mature making the other two trying to catch up and feel outdated in terms of features.

fold_leftvor 2 Jahren

I'm curious what users of Svelte think about https://qwik.dev, have many of you been tempted by it? There are a lot of similarities and both are great at keeping file sizes down with a great DX.

aembletonvor 2 Jahren

I'm not a front end developer; so what I think about this might not be relevant to someone who works on front end every day. To me qwik looks like many other JS frameworks as far as the developer experience goes - it mixes up the HTML output into JS functions.

I really like the way that Svelte has a single file that encapsulates the HTML, CSS and JS for a page and it does so as three seperate chunks of the svelte file. This means I just need to look at say blogPost.svelte to see everything I need and I don't need to think about namespaceing or BEM or anything else for the CSS.

Its this way of working with Svelte that I really like and rarely see from other frameworks. I find astro to be good for this too.

fold_leftvor 2 Jahren

I agree, that's a really nice feature of Svelte. It can be done in .astro files from https://astro.build/ too but Svelte is the first place I saw it done, like you say, it's very nice to work that way.

iamkneelvor 2 Jahren

The blog post is up: https://svelte.dev/blog/svelte-5-is-alive

solaticvor 2 Jahren

Svelte noob here: can someone more experienced explain why runes are getting people excited? My untrained eye starting reading the Svelte runes documentation and it just made me go "well I guess Svelte is getting React Hooks?"

izackpvor 2 Jahren

My first web project was with svelte.

Lack of a debugger for the server sided JavaScript seems just as silly to me as server sided JavaScript. I would consider that alone a non-starter.

I’d recommend another solution for experienced devs.

ameliusvor 2 Jahren

Doesn't the philosophy behind Svelte justify a broader scope than just Web apps?

Shouldn't this be a more general programming language, not tied to the web?

joakimsvor 2 Jahren

It is a popular choice for apps made with cross-platform frameworks like Tauri and Electron. It even powers a big POS device in Brasil.

beginningsvor 2 Jahren

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

tamimiovor 2 Jahren

Is there any svelte components or better a full boilerplate/template to save the time building front-ends?

[deleted]vor 2 Jahren

ledgerdevvor 2 Jahren

What's the latest on building PWA's with Svelte/Kit 5?

crowdyrivervor 2 Jahren

nice and everything, but it still has plenty of performance issues and crashes with the tsserver. Using solid start because of that, tooling is not there yet.

kolanosvor 2 Jahren

Any recommendations for component libraries for Svelte?

scosmanvor 2 Jahren

DaisyUI and shadcn-svelte are the big two.

benmccannvor 2 Jahren

shadcn-svelte is great!!

https://www.skeleton.dev/ and https://flowbite-svelte.com/ are another couple of popular ones.

There's a big list at https://www.sveltesociety.dev/packages?category=design-syste...

neontomovor 2 Jahren

any sense in porting a v4 project to 5?

jhonmikevor 2 Jahren

mklkkkvor 2 Jahren

purple-leafyvor 2 Jahren

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

novoreorxvor 2 Jahren

Can't believe you get downvoted so hard just because you dislike Svelte, is praising Svelte the new PC in Hacker News?

purple-leafyvor 2 Jahren

People are sheep haha, everyone hates react because it’s trendy