Hacker News Reader

Comment by bkeating | Hacker News Reader

There is so much "let me just see if this works..." tap tapppy tap .... "no... NO WAY... OMG IT WORKED!" with Svelte.

Very little surface area. It embraces your knowledge of plain ole CSS/JS/HTML and empowers you with reactivity and a means of if being able to add motion to your ui.

Newbs and Pros alike can build fast with it. That speed + reactivity allows your software to better keep up with your converstaions that make it all so. Thats insanely powerful.

It's soooo good. Congratulations to Richard Harris and everyone on the Svelte/SvelteKit Team! <3

View on HN

> It embraces your knowledge of plain ole CSS/JS/HTML

Yeah that's one of the things I love about Svelte. It tends to enhance fundamental web knowledge rather than forcing you to think in convoluted ways.

Features like actions put you close to the bare metal so to speak. I use those all the time.

Backing up how great it is that so much of Sveltekit is built using basic web standards. More often than not when I'm wondering what the shape of an object or function is in Sveltekit, I realize that it's exactly the same as you'd find on MDN documentation.

It's an incredibly refreshing experience compared to other frameworks that create custom concepts for everything they do.

This is what they said about React when it first blew up. Compared to Angular, it's much closer to being *just javascript™*. But I wonder how well that'll hold up after the honeymoon phase

The builder.io team made a tool called Mitosis[^0] that lets you input a component written in almost any framework and automatically recreate that same component in any other framework including Vue, React, Qwik, Angular, Svelte, React Native, Lit, web components, and even Swift

It's always interesting to try out different frameworks and compare the plain HTML version of certain components with this tool

[^0]: https://mitosis.builder.io/

It is absolutely crazy how much more idiomatic the Svelte code is in the example on Mitosis compared to the other frameworks on there.

Unlike React/JSX, Svelte uses ASTs that adhere to HTML, JavaScript, and CSS (non-JSX) format. Yes, there is a minimal Svelte-only API footprint, but the native AST parsers means that parsing is much more respectful of correct code validation, versus JSX's own idiomatic set of ThingsYouCannotDo™.

> This is what they said about React when it first blew up

FWIW, I think that "it's much closer to being just javascript™" statement has absolutely held up over time (Angular, esp. the old angular.js is painful compared to React for this reason), AND that Svelte is likely a step closer again (which they can do because they have an entire compiler and aren't reliant on embedded a DSL inside of JavaScript).

I agree Svelte is a step closer, but most people agree that modern React has at least somewhat strayed from just javascript™. Server components by default, hooks, JSX, synthetic events, etc have added many more layers of abstraction. I fully support these developments. I just think they're a necessary byproduct of a project maturing. I fear that if Svelte ever blows up past a niche framework, it will also stray from it's "use the platform" philosophy out of necessity as well

I've been using Svelte for three years now, or close enough. The honeymoon phase hasn't waned.

I had exact same experience with it "it just worked", I started playing with few days ago and compared with other frameworks where I had to fight my to do what I wanted to do, from libraries to non oblivious behaviours. In SvelteKit it just works and it's refreshing. Especially love the builtin animation stuff.

Except it forces you to use node js, or do I read it wrong? Can we get a streamlined js framework that is just about the frontend and let’s you use whatever backend language you want? I know there is react, vue and angular but they seem so bloated

Nodejs is only needed in the development phase.

That's true if you're developing a SPA or static site with SvelteKit. However, there are APIs that involve Node being run in production, i.e. the authors of SvelteKit envision it being used to build hybrid apps that involve front-end JS and Node.js server/s.

Yes, the whole point of SvelteKit is that it's SSR+hydrate. But it doesn't need Node for that. It'll run on just about any Javascript engine, including Cloudflare Workers which is quite close to pure V8 + standard web APIs.

That is opt in! The adapter system in SK is great.

Svelte is a frontend framework, which you can use to build anything from a full SPA to a single button. SvelteKit is a Node backend framework that integrates tightly with Svelte.

SvelteKit is a Javascript backend framework. It only uses Node at build time (with hopes of replacing even that with e.g. Deno), the deployed serverside component will happily run outside of Node.

Thanks that's exactly the answer I was looking for

We are using SvelteKit frontend with Python backend (Pyramid + SQLAlchemy). When I started the project, I considered doing Python backend + templated HTML frontend a la Django, but SvelteKit server-side rendering was so good that I decided against this. Before I have done JSP, PHP, Django, Next, React and everything between, so I have some experience to compare. Despite all progress on Node.js backends, they still cannot compete with Python for complex SQL + ORM use cases.

The frontend is open source and available here if someone is interested what a complex SSR heavy SvelteKit application deployment looks like:

http://github.com/tradingstrategy-ai/frontend

The SSR server is a lightweight Node.js web server (Vite), but you can have it nicely along your backend API web server (Pyramid in our case). Both are reverse proxied behind the same domain using Caddy.

I'm looking at the frontend source code, and the Svelte components look almost the same as VueJS single file components using the composition API. Can someone who has used both comment on both their pros/cons?

I had the opposite feeling a month or so ago, especially with stores- there's so much "magic" that I kept running into confusing walls.

If I `export let` a variable to be reactive over here, why isn't it reactive over there?

You seem to be conflating a few different concepts. Store are absolutely reactive across all components and pages. They are prefaced with $, and there are a bunch of native stores that you can use such as $page.

You can even create variables reactive to one another by declaring a variable like so:

$: y = x * 2

Using the export let x = default; option is for passing data from the parent component/page to a child. If you want variable changes in the child to be reflected in the parent, you can use a store ($ notation), or you can use bind like so:

In my opinion, all of this is much much easier than in competing frameworks.

For instance I had a variable in a store.

On my page, I had a script tag pulling from the store. The variable was reactive within the script tag.

I export let that into the template via “data” props.

I changed the value of the variable within the script tag.

The template did not reflect the new value.

I'm really struggling to follow what you're trying to do - but why do you not just use the same writable store in both your page and template/component?

Also, maybe look into store subscriptions and/or reactive declarations for what you're trying to do.

Regardless, it sounds like you really need to just read the docs or do a tutorial.

Reply on news.ycombinator.com