6 ms·

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 you

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

pier25 4y ago
> 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.
- samtp 4y ago
  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.
- culi 4y ago
  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/ https://mitosis.builder.io/
  - samtp 4y ago
    It is absolutely crazy how much more idiomatic the Svelte code is in the example on Mitosis compared to the other frameworks on there.
  - arxpoetica 4y ago
    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™.
  - nicoburns 4y ago
    > 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).
    - culi 4y ago
      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
  - NetOpWibby 4y ago
    I've been using Svelte for three years now, or close enough. The honeymoon phase hasn't waned.
unsupp0rted 4y ago
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?
- samtp 4y ago
  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: <ChildComponent bind:x={someValue}> In my opinion, all of this is much much easier than in competing frameworks.
  - unsupp0rted 4y ago
    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.
    - samtp 4y ago
      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.
no_way 4y ago
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.
fruit2020 4y ago
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
- hamdouni 4y ago
  Nodejs is only needed in the development phase.
  - michaelsbradley 4y ago
    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.
    - yencabulator 4y ago
      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.
    - cpfohl 4y ago
      That is opt in! The adapter system in SK is great.
- pie_flavor 4y ago
  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.
  - yencabulator 4y ago
    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.

pier25 4y ago

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

samtp 4y ago
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.
culi 4y ago
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/ https://mitosis.builder.io/
- samtp 4y ago
  It is absolutely crazy how much more idiomatic the Svelte code is in the example on Mitosis compared to the other frameworks on there.
- arxpoetica 4y ago
  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™.
- nicoburns 4y ago
  > 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).
  - culi 4y ago
    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
- NetOpWibby 4y ago
  I've been using Svelte for three years now, or close enough. The honeymoon phase hasn't waned.

unsupp0rted 4y ago

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?

samtp 4y ago
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: <ChildComponent bind:x={someValue}> In my opinion, all of this is much much easier than in competing frameworks.
- unsupp0rted 4y ago
  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.
  - samtp 4y ago
    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.

no_way 4y ago

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.

fruit2020 4y ago

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

hamdouni 4y ago
Nodejs is only needed in the development phase.
- michaelsbradley 4y ago
  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.
  - yencabulator 4y ago
    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.
  - cpfohl 4y ago
    That is opt in! The adapter system in SK is great.
pie_flavor 4y ago
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.
- yencabulator 4y ago
  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.