14 ms·

Svelte 4

396 points by Allezxandre 3y ago

pier25 3y ago
Is there an ETA for Svelte 5? 2024 maybe?
ShadowBanThis01 3y ago
I've heard of Svelte but am not sure exactly what it does. So this time I went to their homepage and it doesn't provide any concise summary of what it is. If I had to guess, I'd say it packages Javascript up into an application that runs locally, but... ¯\_(ツ)_/¯
- pcthrowaway 3y ago
  It's just a frontend framework for building fast, interactive frontends. If you're interested in seeing what all the fuss is about and have 5-10 minutes to spare, you could start https://svelte.dev/tutorial/basics https://svelte.dev/tutorial/basics and get a pretty good sense of it in less than 10 minutes
  - ShadowBanThis01 3y ago
    Thanks! The "what is Svelte" part really should be on the homepage.
bazeblackwood 3y ago
Anyone have examples of a really impressive or complex real world application built with Svelte on the frontend.
- pcthrowaway 3y ago
  I believe Windmill is all svelte: https://app.windmill.dev/ https://app.windmill.dev/ As well as Bloomberg and the NYT sites, and Brave search. I'm sure there are more, but for some reason people aren't talking about it a ton yet, and it's definitely not as ubiquitous as React
AHOHA 3y ago
One of the platforms I built before used jquery and bootstrap, while it obviously do the job but I was looking to revamp the whole UI, svelte was one of the options as it’s close to vanilla js, react is troublesome unless you enjoy your app breaks next time you update it. The only thing I’m looking for, is there any component based svelte UI I can choose from and quickly build my UI, similar to bootstrap if that make sense, as I usually do embedded development and last thing I want is to work wuth css. To be more exact on what I want to do: is a dynamic dashboard, where users can add widgets or/and resize them per needed.
- meiraleal 3y ago
  TailwindCSS can do it
sweetrobot2k 3y ago
Ewe
dimitropoulos 3y ago
minimum TypeScript version is 5, eh? Seems strange since there's no reason listed and TypeScript doesn't do semver but power to 'em I guess for pushing people to stay up-to-date. :)
- rimunroe 3y ago
  I wouldn’t be surprised if this is because of the improved support[1] for writing types as JSDoc comments in TypeScript 5.0 [1] https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/ https://devblogs.microsoft.com/typescript/announcing-typescr...
deleted 3y ago
[deleted]
m8s 3y ago
> Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience on learn.svelte.dev for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%. Wow, that’s a pretty big reduction.
- flanbiscuit 3y ago
  I wonder how much of that came from this TS to JSDoc change Rich Harris talked about here: https://news.ycombinator.com/item?id=35892250 https://news.ycombinator.com/item?id=35892250 > I _would_ say that this will result in no changes that are observable to users of the framework, but that's not quite true — it will result in smaller packages (no need to ship giant sourcemaps etc), and you'll be able to e.g. debug the framework by cmd-clicking on functions you import from `svelte` and its subpackages (instead of taking you to an unhelpful type declaration, it will take you to the actual source, which you'll be able to edit right inside `node_modules` to see changes happen).
  - benmccann 3y ago
    A lot! Sourcemaps are often twice the size of the code itself.
- DonHopkins 3y ago
  At this rate Svelte 5 is going to have to be renamed Anorexic!
- gnrlst 3y ago
  I'm used to Svelte, and I remember last year when I tried to install a basic NextJS starter template (create-nextjs-app) I had to wait a minute or so for all the npm dependencies to install. I then checked my project folder and it was 600MB....mindblowingly bloated.
chillbill 3y ago
I've used Svelte 3 and I like it, but honestly this is the problem I have with most JS projects. Svelte 3 had 3000+ experimental features and hacky stuff, why go into 4 when 3 itself has not mature yet?! Software support is basically the thousands of low-paid js dev jobs that companies hire to update their stack every 6 months?
- chrisweekly 3y ago
  I hear you, but you might be projecting a bit. FTA: > "Svelte 3 was released more than four years ago! In JavaScript-framework-time, that's eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas." This seems eminently reasonable to me.
  - chillbill 3y ago
    Maybe they shouldn't call it Svelte 4 then. Major version in semver are usually breaking.
    - chrisweekly 3y ago
      It definitely qualifies, given e.g. its minimum required node.js version.
- swyx 3y ago
  read TFA: > "Svelte 3 was released more than four years ago... Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas." Major Changes breaking: Minimum supported Node version is now Node 16 (#8566) breaking: Minimum supported webpack version is now webpack 5 (#8515) breaking: Bundlers must specify the browser condition when building a frontend bundle for the browser (#8516) breaking: Minimum supported vite-plugin-svelte version is now 2.4.1. SvelteKit users can upgrade to 1.20.0 or newer to ensure a compatible version ([#8516] (#8516)) breaking: Minimum supported rollup-plugin-svelte version is now 7.1.5 (198dbcf) breaking: Minimum supported svelte-loader is now 3.1.8 (198dbcf) breaking: Minimum supported TypeScript version is now TypeScript 5 (it will likely work with lower versions, but we make no guarantees about that) ([#8488] (#8488)) breaking: Remove svelte/register hook, CJS runtime version and CJS compiler output (#8613) breaking: Stricter types for createEventDispatcher (see PR for migration instructions) (#7224) breaking: Stricter types for Action and ActionReturn (see PR for migration instructions) (#7442) breaking: Stricter types for onMount - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions (see PR for migration instructions) (#8136) breaking: Overhaul and drastically improve creating custom elements with Svelte (see PR for list of changes and migration instructions) ([#8457](https://github https://github. com//pull/8457)) breaking: Deprecate SvelteComponentTyped in favor of SvelteComponent (#8512) breaking: Make transitions local by default to prevent confusion around page navigations (#6686) breaking: Error on falsy values instead of stores passed to derived (#7947) breaking: Custom store implementers now need to pass an update function additionally to the set function ([#6750](https://github.com/sveltejs/svelte/pull/ https://github.com/sveltejs/svelte/pull/ 6750)) breaking: Do not expose default slot bindings to named slots and vice versa (#6049) breaking: Change order in which preprocessors are applied (#8618) breaking: The runtime now makes use of classList.toggle(name, boolean) which does not work in very old browsers ([#8629](https://github.com/sveltejs/svelte/ https://github.com/sveltejs/svelte/ pull/8629)) breaking: apply inert to outroing elements (#8627) breaking: use CustomEvent constructor instead of deprecated createEvent method (#8775) These are just catch up releases, nothing seriously breaking. to give you perspective, Nodejs went from v10 to v20 in the same time frame.
WhereDoesThisGo 3y ago
In order from most favorite to least favorite: StencilJS SolidJS Svelte React Vue Angular
- CharlesW 3y ago
  I just rebuilt a web app in Vue (and Vite), and first-class Single File Components are the dream. Is there anything that even approaches that simply joyful DX?
  - sebastianconcpt 3y ago
    Rebuilt with that but coming from which stack?
    - CharlesW 3y ago
      Just POJS/Vanilla JS with jQuery. I've had good experiences with earlier versions of Vue for other projects, so surely there's some familiarity bias there. I now see that Svelte has SFCs and that Vite supports Svelte, so I might give that a try for my next project.
- sebastianconcpt 3y ago
  Your tolerance for JSX is too high.
swyx 3y ago
The release was livestreamed on the Svelte youtube: https://www.youtube.com/watch?v=72TIVhRtyWE https://www.youtube.com/watch?v=72TIVhRtyWE also > Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience on learn.svelte.dev for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%.
- swyx 3y ago
  fun/weird fact - the major release seems to have caused ~9m downloads happening on npm, catapulting Svelte to technically the top of the charts https://twitter.com/SvelteSociety/status/1671923994671603713?s=20 https://twitter.com/SvelteSociety/status/1671923994671603713...
  - csjh 3y ago
    that's just every developer switching every single one of their side projects to svelte in excitement
nu11ptr 3y ago
Could someone give a one or two sentence explanation of why I would want to use Svelte over something like React? I have heard it is "better", but have never understood why.
- pier25 3y ago
  You will write a fraction of the code and your apps will be considerably lighter.
- miohtama 3y ago
  Because you can deliver a better product, faster, with Svelte. The total cost of development goes down, as the productivity is better, bugs per lines less, total lines of code less.
- thornewolf 3y ago
  Massive reduction in boilerplate. As someone who attempted to onboard onto both react and svelte for a couple days each, react continued to feel hyper unintuitive with a bunch of magic constructs. Svelte felt like I could guess what would work and it just did. Caveat: since I went react -> svelte it's possible I was just warmed up to JS by that point
  - Capricorn2481 3y ago
    It's the opposite for me. React can be verbose but that's because a lot of it is explicit and has escape hatches. Svelte has magic that works until it doesn't and then you're stuck in Svelte land. It's not "just JS" despite people marketing it as such
    - jankiel 3y ago
      I was stuck once by abusing `bind:` and other time with global exit transitions + sveltekit routing, but that's about it. React on the other hand feels like a pot warming up and we're the frogs being boiled alive at this point. You can write some perfectly valid, but naive React code and it's going to have some footguns. We're so used to write idiomatic React code we don't even notice that anymore. You learn to use stable references in callback functions, to be careful using Context, and so on. But the list is not short, and it only grows. Wanna write some naive code in svelte two days in? There's a good chance it's the same code you'd write a year later. Maybe that's what people mean by "just JS".
afavour 3y ago
> The number of dependencies in Svelte has been greatly reduced from 61 down to 16 Adore this. Would love to see more JS frameworks reduce their dependency trees.
- Timon3 3y ago
  I understand this thought for external dependencies, but dependencies also includes internal ones, which I don't see a reason to reduce. Modularity and re-usability of individual pieces of code are a good sign for me.
  - tomtheelder 3y ago
    I assume they mean external dependencies when they say that. I'm not sure what the point of the statement would be if it included internal ones.
    - Timon3 3y ago
      Dependency managers like NPM don't differentiate between internal and external dependencies. I assumed that the Svelte devs were referring to this. Vue for example only has internal dependencies, but NPM shows them as any other: https://www.npmjs.com/package/vue?activeTab=dependencies https://www.npmjs.com/package/vue?activeTab=dependencies
      - benmccann 3y ago
        It's referring to all transitive dependencies - not just direct dependencies. More like this: https://npm.anvaka.com/#/view/2d/vue https://npm.anvaka.com/#/view/2d/vue
        Timon3 3y ago
        Good point, didn't want to make it seem different! Just wanted to show that internal dependencies are also tracked as any other dependency.
- 3y ago
solarkraft 3y ago
Time for a very naive question. As somebody looking for a more effcient (less re-rendering) and nicer DX (template based, stuff like exit animations) alternative to React, what actually makes Svelte measurably better than Vue? On first (and very naive) look the two seem pretty similar, with the biggest difference being that Vue seems to have the much bigger ecosystem and more mature tooling (I keep hearing about Svelte's flavor of JS basically being its own language now and it not playing all that well with Typescript). From what I remember they even once had a virtual DOM-replacing Ahead of Time compiler, so that might not be the biggest moat either. Both can be fiddled around with to support rendering using JSX, but it seems to easier and better supported for Vue. Edit: The AOT compilation was called "Reactivity Transform" and dropped due to the aforementioned shift away from "real" JavaScript: https://vuejs.org/guide/extras/reactivity-in-depth.html#runtime-vs-compile-time-reactivity https://vuejs.org/guide/extras/reactivity-in-depth.html#runt... Now I wonder whether the performance benefit is big enough to justify using Svelte, especially since Vue already uses a "compiler informed virtual DOM". Anecodally all Vue apps I have used felt fast while the React experience was more mixed, but the sample on the Vue side is also just really small.
- h0l0cube 3y ago
  > especially since Vue already uses a "compiler informed virtual DOM" Not diffing at all against a virtual DOM and instead executing the pre-compiled DOM manipulations is an order of magnitude better in terms of processing. It also avoids diffing entirely. At a casual glance, the compiler hints and other VDOM optimisations in Vue reduce but do not obviate this burden (e.g., don't re-render static nodes, flatten the DOM tree to avoid traversing) But as ever, it's best to measure these things and I can't seem to find any recent benchmarks between the two platforms, and any benchmark would vary wildly depending on use-case, and with the exigencies of real-world development.
- s__s 3y ago
  Svelte is more like a compiler than a library. The code you ship is plain JavaScript without any svelte dependency. That’s why svelte has always been simple and fast.
- swyx 3y ago
benmccann 3y ago
@dang https://news.ycombinator.com/item?id=36432447 https://news.ycombinator.com/item?id=36432447 was on the front page and has substantially more discussion. It was somehow marked as a duplicate of this post. Could you merge them?
- pronoiac 3y ago
  I emailed the mods. I don't think they get notified for @'s.
  - beebeepka 3y ago
    Can confirm. dang himself told me that after I tried using "@dang" once.
foxandmouse 3y ago
I've recently embraced Svelte for my side-projects, hackathons, and personal endeavors, and I must say, I'm absolutely enamored with its developer experience (DX) when compared to React. If you're interested, I've shared some of my thoughts about this on my personal website: https://www.kabirsewani.com/blog/why-svelte https://www.kabirsewani.com/blog/why-svelte . (However, if personal links are not permitted, I'd be more than happy to provide a brief summary instead.)
- dimgl 3y ago
  > What binds us to a virtual DOM? The virtual DOM was created to solve browser performance issues with the actual DOM. This may not be relevant anymore, but that's why it was made.
  - samwillis 3y ago
    The VDOM was never about performance problems with the actual dom. It was always slower as you still have to mutate the actual DOM. The "VDOM if faster" was always FUD. The VDOM was invited to prevent bugs by removing the difficult of managing fine grade DOM mutations. Technically you are doing more work with a VDOM and diffing, than carefully mutating the DOM, it's slower. Of course if you just threw away the whole DOM and re built it, then he's the VDOM was quicker, but that's not how anyone was building stuff.
    - dimal 3y ago
      It was not FUD. It’s not faster than carefully mutating the DOM, but back then, almost no one was “carefully mutating the DOM” all the time. It was a shit-show of ad hoc re-rendering strategies that often re-rendered excessively because no one has time to do it carefully for every case. For most common use cases, VDOM had great performance with little cognitive overhead.
      - cztomsik 3y ago
        There were other frameworks before React: AngularJS, Knockout.JS, Backbone.JS, ExtJS, and I'm probably missing few others... Most of them had a concept of props/dirty-checking/retained-mode and they were definitely faster than naive React. What VDOM made easier (in terms of performance) was memoization, you could get faster if you carefully evaluated your dependencies, but to be fair, it introduced many edge-cases and many people avoid memoization to this day. VDOM also made react-native possible, and it made cross-browser programming bearable (but other frameworks at the time did that too) Now, one REALLY COOL thing about VDOM is fragments, because being able to render multiple elements from one component, makes certain layouts very easy using plain CSS - either with simple > * or even with CSS GRID. I am not sure, if Svelte 4 can do that, but it's very simple thing to do with VDOM. And it certainly was not common feature for a very long time.
bodge5000 3y ago
What an odd coincidence, after seeing Svelte for years I decided to actually try it for the first time yesterday, and now this drops. To be honest the timing of this is actually kind of a shame (just for me) as I haven't used it nearly enough to be particularly excited about this, but seeing as Svelte 3 was 4 years ago, I doubt I'll see another one anytime soon. All sounds great anyway, congrats to the team!
- tobr 3y ago
  They seem to be doing something of a tick-tock update approach. Not sure if it’s planned or by accident. V2 was a small change, V3 was a big change, V4 is small, and as far as I understand they’re already working on something that might end up V5.
- ESchouten 3y ago
  Svelte 5 is speculated to release as early as this year (2023)! Svelte 4 was mainly a maintenance release; updated dependencies, TS to JSDoc migration and more, in preparation for the development of Svelte 5. The reason Svelte 4 is a major version release is due to upgrading some dependencies like the Nodejs version making it a breaking change.
SkyMarshal 3y ago
Anyone using Svelte with Deno? I see some stuff on github and google about it, but curious if any HN folks have any experience with this.
SkyMarshal 3y ago
Anyone using Svelte with Deno? I see some stuff on github and google about it, but curious if any HN folks have any experience with this.
- benmccann 3y ago
  As far as I'm aware, SvelteKit has fully supported Deno since 1.17.0: https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md#1170 https://github.com/sveltejs/kit/blob/master/packages/kit/CHA...
solumunus 3y ago
Svelte is #1
kayson 3y ago
I'm curious what peoples' experiences have been using modern react vs svelte vs whatever else is popular these days. I used react a while back for a dashboard mockup and was pretty happy with it. Something about svelte being a superset of standard html/js/css that gets compiled bothers me. I realize that the same can be said about typescript/tsx but I feel like in can trust it more... Maybe it's a maturity thing? Or that it's just one language getting compiled to its subset (with syntactic sugar for dom elements)
- giancarlostoro 3y ago
  Not sure about it being a superset, my understanding is that react is a renderer, whereas svelte is a compiler, basically removing unused code from its std lib, and even converting some code to native JS code. It tries to work with the DOM not around it. SolidJS is the one I am really excited about moreso though, since it uses JSX and works even moreso with the DOM.
- levmiseri 3y ago
  I'm a big fan of svelte vs. other frameworks. The closeness to vanilla js and natural coexistence with html+css makes it so smooth to work with and you feel productive right away. Recently built this with it: https://meoweler.com https://meoweler.com At least for small projects like this, it's perfect. For something larger/complex I'd be a bit more weary.
  - valbaca 3y ago
    That website is AWESOME. I also found your dribble. Your work is absolutely stunning and inspiring.
  - ComputerGuru 3y ago
    Great site. Some feedback: * Main search (bottom center, not top right) taking over the screen when you click on desktop is terrible ux * Should support some fuzzy search or misspelling tolerance, e.g. Cuzco for Cusco * Valencia, Spain gives a 500 error * No keyboard bindings when searching to navigate up/down between the matching results (e.g. type in 'Valencia' and I expect I can use the down key to choose which of the three results)
bovermyer 3y ago
I'm pretty happy with Svelte for one of my side projects. I wish my _other_ side project used it, but I'm not in charge of that one, hah.
azemetre 3y ago
This is odd timing with Rich Harris just releasing a course on Svelte v3 on Frontend Masters (June 12th 2023). https://frontendmasters.com/courses/svelte-v2/ https://frontendmasters.com/courses/svelte-v2/ From the migration there does appear to be some breaking changes, don't know how that aligns with the course which I planned to take. His old course was good as well, but that relied on Sapper.
- Orangeair 3y ago
  It does say "Svelte 3+" on the page, although I don't know if the plus was there before.
- csjh 3y ago
  The breaking changes aren't really gamechanging stuff, just cleaning up baggage in preparation for Svelte 4.x and Svelte 5. The course would still be fully applicable
  - azemetre 3y ago
    Gotcha, thanks for the clarification. I really enjoyed his course last time, I also wish he would put out some data viz content too. I bet he develop lots of good insights during his tenure at the NYT, but understand he is tied up with Svelte atm :D
- cadooo 3y ago
  I took the course when he did it live. There is lots of good stuff in there. The meat of the course was mostly going through learn.svelte.dev. One day was on Svelte and one day was on Sveltekit. The most interesting part was the end of day sessions where you actually build apps. I don't think you learn anything that wouldn't apply to Svelte 4. It's intended as a smaller update to prep them for bigger changes coming in Svelte 5.
willio58 3y ago
I don't use Svelte in my day-to-day (I use React) but I love reading about it and others in the space. We need new ideas and other packages are really pushing us forward!
ComputerGuru 3y ago
Curious as to people’s experience with Svelte (or SvelteKit) for making so-called “native” apps via Electron/Taurus/etc? (I believe the new 1Password app is powered by Svelte.)
- marcelr 3y ago
  We did a pretty big one, integrated with a python/gtk app [yikes]. Anyways, svelte is a joy to work with, also on the note of libraries, svelte's community is smaller but I found by far my favourite component system I've ever used - https://carbon-components-svelte.onrender.com/ https://carbon-components-svelte.onrender.com/.. surprising coming from IBM, but hey, I'll take it. But in general electron was a pain, slow builds - had an adhoc solution for the svelte dev server, but its not great.
  - ComputerGuru 3y ago
    Thanks for sharing. Curious if you know the answer: what’s the difference between a “pictogram” and an “icon” in the components? I looked at a few and it seemed arbitrary?
synergy20 3y ago
hope it adds a client side router, and provides a true SPA mode(not the sveltekit stuff), before then, no plan to use svelte again as my use cases is 100% SPA with 0% SSR, absolutely nothing with SSR.
- pie_flavor 3y ago
  You can use SvelteKit without SSR; it can be compiled for many backends, including static files.
- square_usual 3y ago
  There are pure SPA svelte routers: https://github.com/ItalyPaleAle/svelte-spa-router https://github.com/ItalyPaleAle/svelte-spa-router
- khromov 3y ago
  It sounds like you have a misunderstanding about SvelteKit. It does have a client side router and you can use SvelteKit as a pure SPA today very easily, all you need is to set `export const ssr = false;` and `export const prerender = false;` in `src/routes/+layout.ts`. Then export with `adapter-static` and you're done. Swing by the official Svelte Discord, we're happy to discuss your questions! https://discord.com/invite/svelte https://discord.com/invite/svelte
  - synergy20 3y ago
    I'm aware of that in fact, it's still far from the "pure" SPA as what React or Vue provides. SSR-first sveltekit is not the same as "pure" CSR SPA, and I do not need read all the SSR oriented doc to figure out how to do a CSR SPA. I spent a few months with Svelte(kit) and eventually returned to React. If ever Svelte does CSR-first SPA with client side builtin router, I will definitely give a second try, until then, React will be my choice.
    - khromov 3y ago
      You would be hard pressed to find a functional difference between a SvelteKit project compiled with adapter-static and a "Create React App" app. If you have any concrete differences, do share them. They're functionally equivalent (except a SvelteKit project is a lot lighter in JS due to the compiler architecture). There are unfortunately a lot of misunderstandings around SvelteKit because it is SSR-centric. SvelteKit has probably the best interactive docs of any framework at https://learn.svelte.dev/ https://learn.svelte.dev/ and I do encourage everyone to go through them to get the full picture!
croes 3y ago
At the moment I am testing SolidJs and Svelte for a small side project and feel that SolidJs is slightly superior but Svelte will win.
- twmths 3y ago
  Why it's superior? Because it's faster?
dingleberry 3y ago
is there a way to host learn.svelte.dev locally ? like git clone repo and then npm run dev ?
- cadooo 3y ago
  https://github.com/sveltejs/learn.svelte.dev https://github.com/sveltejs/learn.svelte.dev
  - dingleberry 3y ago
    thank you, i got it working in localhost
beebeepka 3y ago
The only problem I have with Svelte is that I can't find a job. Only seen one in the last six months and they bailed after we discussed pay. I love Vue but I really wanted to work on an actual project with Svelte because the developer experience was fantastic. Guess I'll have to wait a few more years. Almost every job is react, react, react. It's exhausting dealing with the cultists
moomoo11 3y ago
Svelte rocks!!! I'd recommend it to anyone who is focused on actually just shipping UI and making progress (not bike shedding or wasting time, you know who I'm talking about lol). It is a nice paradigm that lets devs focus on just writing HTML, CSS, and JS with a little bit of teeny tiny magic (it is actually easy to understand). That's it.
Covzire 3y ago
I have a project I'd like to work on that shares a lot of similarities to how I imagine a "family tree maker" webapp might work, would Svelte be a good choice for it? Basically I'd need the ability to drag and drop, move the tree around like a Map, detect clicks to add new nodes and new branches, stuff like that. I'm thinking an HTML5 canvas would be best but idk.
- IamFr0ssT 3y ago
  I don't think it would be a bad choice for it, there is even Svelvet which I think could be a good starting point.
kokizzu5 3y ago
shameless piggybacking Svelte MPA now using Svelte 4 https://github.com/kokizzu/svelte-mpa https://github.com/kokizzu/svelte-mpa
khromov 3y ago
Super happy Svelte user. Have recently published an iOS + Android app using SvelteKit and blogged about the process for those interested: https://khromov.se/how-i-published-a-gratitude-journaling-app-for-ios-and-android-using-sveltekit-and-capacitor/ https://khromov.se/how-i-published-a-gratitude-journaling-ap... I tested the beta version of Svelte 4 on my app and it worked without requiring any changes other than running the migration script. Excellent work from the team!
- gonzaloalvarez 3y ago
  Happy user of your app. Works great. Thanks for documenting all the process. It’s really insightful
- laurels-marts 3y ago
  This was a great blog post! Thank you for sharing your journey.
nickstinemates 3y ago
Can someone point me to a concise location of getting a development environment setup for Docker. Spent an hour or so after reading this and found conflicting information/out of date documentation. The tutorial[1] on the website is not helpful for actual deployment/development. I found Svelte for New Developers[2] which is slightly better, however, when building according to the instructions what I expect to happen is not happening. i.e, a static index.html is rendered vs. the src/App.svelte getting rendered. Wrangling all of this is the worst part of modern day Javascript. 1: https://learn.svelte.dev/tutorial/welcome-to-svelte https://learn.svelte.dev/tutorial/welcome-to-svelte 2: https://svelte.dev/blog/svelte-for-new-developers https://svelte.dev/blog/svelte-for-new-developers
- pcthrowaway 3y ago
  I can't help you with a docker setup, but if I'd highly recommend Vite for standing up a working Svelte dev environment (or Sveltekit, or React, or Next for that matter): https://vitejs.dev/guide/ https://vitejs.dev/guide/ You'll be up and running in seconds. This is all you need to know: # npm 6.x npm create vite@latest my-svelte-app --template svelte # npm 7+, extra double-dash is needed: npm create vite@latest my-svelte-app -- --template svelte (if you're looking for sveltekit it's the same command, you'll just select sveltekit in the prompt)
  - nickstinemates 3y ago
    I did this - that's part of the 2nd link. Problem is that it didn't work for me. I definitely did something wrong.
    - pcthrowaway 3y ago
      Did you use the right command for your npm version? Did the installer work? Or did something go wrong with `npm run dev`?
      - nickstinemates 3y ago

396 points by Allezxandre 3y ago

Is there an ETA for Svelte 5? 2024 maybe?

I've heard of Svelte but am not sure exactly what it does. So this time I went to their homepage and it doesn't provide any concise summary of what it is. If I had to guess, I'd say it packages Javascript up into an application that runs locally, but... ¯\_(ツ)_/¯

pcthrowaway 3y ago
It's just a frontend framework for building fast, interactive frontends. If you're interested in seeing what all the fuss is about and have 5-10 minutes to spare, you could start https://svelte.dev/tutorial/basics https://svelte.dev/tutorial/basics and get a pretty good sense of it in less than 10 minutes
- ShadowBanThis01 3y ago
  Thanks! The "what is Svelte" part really should be on the homepage.

bazeblackwood 3y ago

Anyone have examples of a really impressive or complex real world application built with Svelte on the frontend.

pcthrowaway 3y ago
I believe Windmill is all svelte: https://app.windmill.dev/ https://app.windmill.dev/ As well as Bloomberg and the NYT sites, and Brave search. I'm sure there are more, but for some reason people aren't talking about it a ton yet, and it's definitely not as ubiquitous as React

AHOHA 3y ago

One of the platforms I built before used jquery and bootstrap, while it obviously do the job but I was looking to revamp the whole UI, svelte was one of the options as it’s close to vanilla js, react is troublesome unless you enjoy your app breaks next time you update it. The only thing I’m looking for, is there any component based svelte UI I can choose from and quickly build my UI, similar to bootstrap if that make sense, as I usually do embedded development and last thing I want is to work wuth css. To be more exact on what I want to do: is a dynamic dashboard, where users can add widgets or/and resize them per needed.

meiraleal 3y ago
TailwindCSS can do it

sweetrobot2k 3y ago

Ewe

dimitropoulos 3y ago

minimum TypeScript version is 5, eh? Seems strange since there's no reason listed and TypeScript doesn't do semver but power to 'em I guess for pushing people to stay up-to-date. :)

rimunroe 3y ago
I wouldn’t be surprised if this is because of the improved support[1] for writing types as JSDoc comments in TypeScript 5.0 [1] https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/ https://devblogs.microsoft.com/typescript/announcing-typescr...

deleted 3y ago

[deleted]

m8s 3y ago

> Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience on learn.svelte.dev for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%. Wow, that’s a pretty big reduction.

flanbiscuit 3y ago
I wonder how much of that came from this TS to JSDoc change Rich Harris talked about here: https://news.ycombinator.com/item?id=35892250 https://news.ycombinator.com/item?id=35892250 > I _would_ say that this will result in no changes that are observable to users of the framework, but that's not quite true — it will result in smaller packages (no need to ship giant sourcemaps etc), and you'll be able to e.g. debug the framework by cmd-clicking on functions you import from `svelte` and its subpackages (instead of taking you to an unhelpful type declaration, it will take you to the actual source, which you'll be able to edit right inside `node_modules` to see changes happen).
- benmccann 3y ago
  A lot! Sourcemaps are often twice the size of the code itself.
DonHopkins 3y ago
At this rate Svelte 5 is going to have to be renamed Anorexic!
gnrlst 3y ago
I'm used to Svelte, and I remember last year when I tried to install a basic NextJS starter template (create-nextjs-app) I had to wait a minute or so for all the npm dependencies to install. I then checked my project folder and it was 600MB....mindblowingly bloated.

chillbill 3y ago

I've used Svelte 3 and I like it, but honestly this is the problem I have with most JS projects. Svelte 3 had 3000+ experimental features and hacky stuff, why go into 4 when 3 itself has not mature yet?! Software support is basically the thousands of low-paid js dev jobs that companies hire to update their stack every 6 months?

chrisweekly 3y ago
I hear you, but you might be projecting a bit. FTA: > "Svelte 3 was released more than four years ago! In JavaScript-framework-time, that's eons. Svelte’s freshness has persisted throughout, but Node.js and browser APIs have evolved during that time and today we’re updating Svelte to take advantage of some of these improvements. Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas." This seems eminently reasonable to me.
- chillbill 3y ago
  Maybe they shouldn't call it Svelte 4 then. Major version in semver are usually breaking.
  - chrisweekly 3y ago
    It definitely qualifies, given e.g. its minimum required node.js version.
swyx 3y ago
read TFA: > "Svelte 3 was released more than four years ago... Svelte 4 is mainly a maintenance release, bumping minimum version requirements and tightening up the design in specific areas." Major Changes breaking: Minimum supported Node version is now Node 16 (#8566) breaking: Minimum supported webpack version is now webpack 5 (#8515) breaking: Bundlers must specify the browser condition when building a frontend bundle for the browser (#8516) breaking: Minimum supported vite-plugin-svelte version is now 2.4.1. SvelteKit users can upgrade to 1.20.0 or newer to ensure a compatible version ([#8516] (#8516)) breaking: Minimum supported rollup-plugin-svelte version is now 7.1.5 (198dbcf) breaking: Minimum supported svelte-loader is now 3.1.8 (198dbcf) breaking: Minimum supported TypeScript version is now TypeScript 5 (it will likely work with lower versions, but we make no guarantees about that) ([#8488] (#8488)) breaking: Remove svelte/register hook, CJS runtime version and CJS compiler output (#8613) breaking: Stricter types for createEventDispatcher (see PR for migration instructions) (#7224) breaking: Stricter types for Action and ActionReturn (see PR for migration instructions) (#7442) breaking: Stricter types for onMount - now throws a type error when returning a function asynchronously to catch potential mistakes around callback functions (see PR for migration instructions) (#8136) breaking: Overhaul and drastically improve creating custom elements with Svelte (see PR for list of changes and migration instructions) ([#8457](https://github https://github. com//pull/8457)) breaking: Deprecate SvelteComponentTyped in favor of SvelteComponent (#8512) breaking: Make transitions local by default to prevent confusion around page navigations (#6686) breaking: Error on falsy values instead of stores passed to derived (#7947) breaking: Custom store implementers now need to pass an update function additionally to the set function ([#6750](https://github.com/sveltejs/svelte/pull/ https://github.com/sveltejs/svelte/pull/ 6750)) breaking: Do not expose default slot bindings to named slots and vice versa (#6049) breaking: Change order in which preprocessors are applied (#8618) breaking: The runtime now makes use of classList.toggle(name, boolean) which does not work in very old browsers ([#8629](https://github.com/sveltejs/svelte/ https://github.com/sveltejs/svelte/ pull/8629)) breaking: apply inert to outroing elements (#8627) breaking: use CustomEvent constructor instead of deprecated createEvent method (#8775) These are just catch up releases, nothing seriously breaking. to give you perspective, Nodejs went from v10 to v20 in the same time frame.

WhereDoesThisGo 3y ago

In order from most favorite to least favorite: StencilJS SolidJS Svelte React Vue Angular

CharlesW 3y ago
I just rebuilt a web app in Vue (and Vite), and first-class Single File Components are the dream. Is there anything that even approaches that simply joyful DX?
- sebastianconcpt 3y ago
  Rebuilt with that but coming from which stack?
  - CharlesW 3y ago
    Just POJS/Vanilla JS with jQuery. I've had good experiences with earlier versions of Vue for other projects, so surely there's some familiarity bias there. I now see that Svelte has SFCs and that Vite supports Svelte, so I might give that a try for my next project.
sebastianconcpt 3y ago
Your tolerance for JSX is too high.

swyx 3y ago

The release was livestreamed on the Svelte youtube: https://www.youtube.com/watch?v=72TIVhRtyWE https://www.youtube.com/watch?v=72TIVhRtyWE also > Svelte 4 reduces the Svelte package size by nearly 75% (10.6 MB down to 2.8 MB), which means less waiting on npm install. This improvement will be especially noticeable for users who are loading our interactive learning experience on learn.svelte.dev for the first time, users of the Svelte REPL, and users with limited connectivity. The majority of the remaining package size is eslint support, which necessitates distributing a CJS build, and once the eslint rewrite is completed the Svelte package size can drop by over another 50%.

swyx 3y ago
fun/weird fact - the major release seems to have caused ~9m downloads happening on npm, catapulting Svelte to technically the top of the charts https://twitter.com/SvelteSociety/status/1671923994671603713?s=20 https://twitter.com/SvelteSociety/status/1671923994671603713...
- csjh 3y ago
  that's just every developer switching every single one of their side projects to svelte in excitement

nu11ptr 3y ago

Could someone give a one or two sentence explanation of why I would want to use Svelte over something like React? I have heard it is "better", but have never understood why.

pier25 3y ago
You will write a fraction of the code and your apps will be considerably lighter.
miohtama 3y ago
Because you can deliver a better product, faster, with Svelte. The total cost of development goes down, as the productivity is better, bugs per lines less, total lines of code less.
thornewolf 3y ago
Massive reduction in boilerplate. As someone who attempted to onboard onto both react and svelte for a couple days each, react continued to feel hyper unintuitive with a bunch of magic constructs. Svelte felt like I could guess what would work and it just did. Caveat: since I went react -> svelte it's possible I was just warmed up to JS by that point
- Capricorn2481 3y ago
  It's the opposite for me. React can be verbose but that's because a lot of it is explicit and has escape hatches. Svelte has magic that works until it doesn't and then you're stuck in Svelte land. It's not "just JS" despite people marketing it as such
  - jankiel 3y ago
    I was stuck once by abusing `bind:` and other time with global exit transitions + sveltekit routing, but that's about it. React on the other hand feels like a pot warming up and we're the frogs being boiled alive at this point. You can write some perfectly valid, but naive React code and it's going to have some footguns. We're so used to write idiomatic React code we don't even notice that anymore. You learn to use stable references in callback functions, to be careful using Context, and so on. But the list is not short, and it only grows. Wanna write some naive code in svelte two days in? There's a good chance it's the same code you'd write a year later. Maybe that's what people mean by "just JS".

afavour 3y ago

> The number of dependencies in Svelte has been greatly reduced from 61 down to 16 Adore this. Would love to see more JS frameworks reduce their dependency trees.

Timon3 3y ago
I understand this thought for external dependencies, but dependencies also includes internal ones, which I don't see a reason to reduce. Modularity and re-usability of individual pieces of code are a good sign for me.
- tomtheelder 3y ago
  I assume they mean external dependencies when they say that. I'm not sure what the point of the statement would be if it included internal ones.
  - Timon3 3y ago
    Dependency managers like NPM don't differentiate between internal and external dependencies. I assumed that the Svelte devs were referring to this. Vue for example only has internal dependencies, but NPM shows them as any other: https://www.npmjs.com/package/vue?activeTab=dependencies https://www.npmjs.com/package/vue?activeTab=dependencies
    - benmccann 3y ago
      It's referring to all transitive dependencies - not just direct dependencies. More like this: https://npm.anvaka.com/#/view/2d/vue https://npm.anvaka.com/#/view/2d/vue
      - Timon3 3y ago
        Good point, didn't want to make it seem different! Just wanted to show that internal dependencies are also tracked as any other dependency.
3y ago

solarkraft 3y ago

Time for a very naive question. As somebody looking for a more effcient (less re-rendering) and nicer DX (template based, stuff like exit animations) alternative to React, what actually makes Svelte measurably better than Vue? On first (and very naive) look the two seem pretty similar, with the biggest difference being that Vue seems to have the much bigger ecosystem and more mature tooling (I keep hearing about Svelte's flavor of JS basically being its own language now and it not playing all that well with Typescript). From what I remember they even once had a virtual DOM-replacing Ahead of Time compiler, so that might not be the biggest moat either. Both can be fiddled around with to support rendering using JSX, but it seems to easier and better supported for Vue. Edit: The AOT compilation was called "Reactivity Transform" and dropped due to the aforementioned shift away from "real" JavaScript: https://vuejs.org/guide/extras/reactivity-in-depth.html#runtime-vs-compile-time-reactivity https://vuejs.org/guide/extras/reactivity-in-depth.html#runt... Now I wonder whether the performance benefit is big enough to justify using Svelte, especially since Vue already uses a "compiler informed virtual DOM". Anecodally all Vue apps I have used felt fast while the React experience was more mixed, but the sample on the Vue side is also just really small.

h0l0cube 3y ago
> especially since Vue already uses a "compiler informed virtual DOM" Not diffing at all against a virtual DOM and instead executing the pre-compiled DOM manipulations is an order of magnitude better in terms of processing. It also avoids diffing entirely. At a casual glance, the compiler hints and other VDOM optimisations in Vue reduce but do not obviate this burden (e.g., don't re-render static nodes, flatten the DOM tree to avoid traversing) But as ever, it's best to measure these things and I can't seem to find any recent benchmarks between the two platforms, and any benchmark would vary wildly depending on use-case, and with the exigencies of real-world development.
s__s 3y ago
Svelte is more like a compiler than a library. The code you ship is plain JavaScript without any svelte dependency. That’s why svelte has always been simple and fast.
swyx 3y ago

benmccann 3y ago

@dang https://news.ycombinator.com/item?id=36432447 https://news.ycombinator.com/item?id=36432447 was on the front page and has substantially more discussion. It was somehow marked as a duplicate of this post. Could you merge them?

pronoiac 3y ago
I emailed the mods. I don't think they get notified for @'s.
- beebeepka 3y ago
  Can confirm. dang himself told me that after I tried using "@dang" once.

foxandmouse 3y ago

I've recently embraced Svelte for my side-projects, hackathons, and personal endeavors, and I must say, I'm absolutely enamored with its developer experience (DX) when compared to React. If you're interested, I've shared some of my thoughts about this on my personal website: https://www.kabirsewani.com/blog/why-svelte https://www.kabirsewani.com/blog/why-svelte . (However, if personal links are not permitted, I'd be more than happy to provide a brief summary instead.)

dimgl 3y ago
> What binds us to a virtual DOM? The virtual DOM was created to solve browser performance issues with the actual DOM. This may not be relevant anymore, but that's why it was made.
- samwillis 3y ago
  The VDOM was never about performance problems with the actual dom. It was always slower as you still have to mutate the actual DOM. The "VDOM if faster" was always FUD. The VDOM was invited to prevent bugs by removing the difficult of managing fine grade DOM mutations. Technically you are doing more work with a VDOM and diffing, than carefully mutating the DOM, it's slower. Of course if you just threw away the whole DOM and re built it, then he's the VDOM was quicker, but that's not how anyone was building stuff.
  - dimal 3y ago
    It was not FUD. It’s not faster than carefully mutating the DOM, but back then, almost no one was “carefully mutating the DOM” all the time. It was a shit-show of ad hoc re-rendering strategies that often re-rendered excessively because no one has time to do it carefully for every case. For most common use cases, VDOM had great performance with little cognitive overhead.
    - cztomsik 3y ago
      There were other frameworks before React: AngularJS, Knockout.JS, Backbone.JS, ExtJS, and I'm probably missing few others... Most of them had a concept of props/dirty-checking/retained-mode and they were definitely faster than naive React. What VDOM made easier (in terms of performance) was memoization, you could get faster if you carefully evaluated your dependencies, but to be fair, it introduced many edge-cases and many people avoid memoization to this day. VDOM also made react-native possible, and it made cross-browser programming bearable (but other frameworks at the time did that too) Now, one REALLY COOL thing about VDOM is fragments, because being able to render multiple elements from one component, makes certain layouts very easy using plain CSS - either with simple > * or even with CSS GRID. I am not sure, if Svelte 4 can do that, but it's very simple thing to do with VDOM. And it certainly was not common feature for a very long time.

bodge5000 3y ago

What an odd coincidence, after seeing Svelte for years I decided to actually try it for the first time yesterday, and now this drops. To be honest the timing of this is actually kind of a shame (just for me) as I haven't used it nearly enough to be particularly excited about this, but seeing as Svelte 3 was 4 years ago, I doubt I'll see another one anytime soon. All sounds great anyway, congrats to the team!

tobr 3y ago
They seem to be doing something of a tick-tock update approach. Not sure if it’s planned or by accident. V2 was a small change, V3 was a big change, V4 is small, and as far as I understand they’re already working on something that might end up V5.
ESchouten 3y ago
Svelte 5 is speculated to release as early as this year (2023)! Svelte 4 was mainly a maintenance release; updated dependencies, TS to JSDoc migration and more, in preparation for the development of Svelte 5. The reason Svelte 4 is a major version release is due to upgrading some dependencies like the Nodejs version making it a breaking change.

SkyMarshal 3y ago

Anyone using Svelte with Deno? I see some stuff on github and google about it, but curious if any HN folks have any experience with this.

SkyMarshal 3y ago

Anyone using Svelte with Deno? I see some stuff on github and google about it, but curious if any HN folks have any experience with this.

benmccann 3y ago
As far as I'm aware, SvelteKit has fully supported Deno since 1.17.0: https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md#1170 https://github.com/sveltejs/kit/blob/master/packages/kit/CHA...

solumunus 3y ago

Svelte is #1

kayson 3y ago

I'm curious what peoples' experiences have been using modern react vs svelte vs whatever else is popular these days. I used react a while back for a dashboard mockup and was pretty happy with it. Something about svelte being a superset of standard html/js/css that gets compiled bothers me. I realize that the same can be said about typescript/tsx but I feel like in can trust it more... Maybe it's a maturity thing? Or that it's just one language getting compiled to its subset (with syntactic sugar for dom elements)

giancarlostoro 3y ago
Not sure about it being a superset, my understanding is that react is a renderer, whereas svelte is a compiler, basically removing unused code from its std lib, and even converting some code to native JS code. It tries to work with the DOM not around it. SolidJS is the one I am really excited about moreso though, since it uses JSX and works even moreso with the DOM.
levmiseri 3y ago
I'm a big fan of svelte vs. other frameworks. The closeness to vanilla js and natural coexistence with html+css makes it so smooth to work with and you feel productive right away. Recently built this with it: https://meoweler.com https://meoweler.com At least for small projects like this, it's perfect. For something larger/complex I'd be a bit more weary.
- valbaca 3y ago
  That website is AWESOME. I also found your dribble. Your work is absolutely stunning and inspiring.
- ComputerGuru 3y ago
  Great site. Some feedback: * Main search (bottom center, not top right) taking over the screen when you click on desktop is terrible ux * Should support some fuzzy search or misspelling tolerance, e.g. Cuzco for Cusco * Valencia, Spain gives a 500 error * No keyboard bindings when searching to navigate up/down between the matching results (e.g. type in 'Valencia' and I expect I can use the down key to choose which of the three results)

bovermyer 3y ago

I'm pretty happy with Svelte for one of my side projects. I wish my _other_ side project used it, but I'm not in charge of that one, hah.

azemetre 3y ago

This is odd timing with Rich Harris just releasing a course on Svelte v3 on Frontend Masters (June 12th 2023). https://frontendmasters.com/courses/svelte-v2/ https://frontendmasters.com/courses/svelte-v2/ From the migration there does appear to be some breaking changes, don't know how that aligns with the course which I planned to take. His old course was good as well, but that relied on Sapper.

Orangeair 3y ago
It does say "Svelte 3+" on the page, although I don't know if the plus was there before.
csjh 3y ago
The breaking changes aren't really gamechanging stuff, just cleaning up baggage in preparation for Svelte 4.x and Svelte 5. The course would still be fully applicable
- azemetre 3y ago
  Gotcha, thanks for the clarification. I really enjoyed his course last time, I also wish he would put out some data viz content too. I bet he develop lots of good insights during his tenure at the NYT, but understand he is tied up with Svelte atm :D
cadooo 3y ago
I took the course when he did it live. There is lots of good stuff in there. The meat of the course was mostly going through learn.svelte.dev. One day was on Svelte and one day was on Sveltekit. The most interesting part was the end of day sessions where you actually build apps. I don't think you learn anything that wouldn't apply to Svelte 4. It's intended as a smaller update to prep them for bigger changes coming in Svelte 5.

willio58 3y ago

I don't use Svelte in my day-to-day (I use React) but I love reading about it and others in the space. We need new ideas and other packages are really pushing us forward!

ComputerGuru 3y ago

Curious as to people’s experience with Svelte (or SvelteKit) for making so-called “native” apps via Electron/Taurus/etc? (I believe the new 1Password app is powered by Svelte.)

marcelr 3y ago
We did a pretty big one, integrated with a python/gtk app [yikes]. Anyways, svelte is a joy to work with, also on the note of libraries, svelte's community is smaller but I found by far my favourite component system I've ever used - https://carbon-components-svelte.onrender.com/ https://carbon-components-svelte.onrender.com/.. surprising coming from IBM, but hey, I'll take it. But in general electron was a pain, slow builds - had an adhoc solution for the svelte dev server, but its not great.
- ComputerGuru 3y ago
  Thanks for sharing. Curious if you know the answer: what’s the difference between a “pictogram” and an “icon” in the components? I looked at a few and it seemed arbitrary?

synergy20 3y ago

hope it adds a client side router, and provides a true SPA mode(not the sveltekit stuff), before then, no plan to use svelte again as my use cases is 100% SPA with 0% SSR, absolutely nothing with SSR.

pie_flavor 3y ago
You can use SvelteKit without SSR; it can be compiled for many backends, including static files.
square_usual 3y ago
There are pure SPA svelte routers: https://github.com/ItalyPaleAle/svelte-spa-router https://github.com/ItalyPaleAle/svelte-spa-router
khromov 3y ago
It sounds like you have a misunderstanding about SvelteKit. It does have a client side router and you can use SvelteKit as a pure SPA today very easily, all you need is to set `export const ssr = false;` and `export const prerender = false;` in `src/routes/+layout.ts`. Then export with `adapter-static` and you're done. Swing by the official Svelte Discord, we're happy to discuss your questions! https://discord.com/invite/svelte https://discord.com/invite/svelte
- synergy20 3y ago
  I'm aware of that in fact, it's still far from the "pure" SPA as what React or Vue provides. SSR-first sveltekit is not the same as "pure" CSR SPA, and I do not need read all the SSR oriented doc to figure out how to do a CSR SPA. I spent a few months with Svelte(kit) and eventually returned to React. If ever Svelte does CSR-first SPA with client side builtin router, I will definitely give a second try, until then, React will be my choice.
  - khromov 3y ago
    You would be hard pressed to find a functional difference between a SvelteKit project compiled with adapter-static and a "Create React App" app. If you have any concrete differences, do share them. They're functionally equivalent (except a SvelteKit project is a lot lighter in JS due to the compiler architecture). There are unfortunately a lot of misunderstandings around SvelteKit because it is SSR-centric. SvelteKit has probably the best interactive docs of any framework at https://learn.svelte.dev/ https://learn.svelte.dev/ and I do encourage everyone to go through them to get the full picture!

croes 3y ago

At the moment I am testing SolidJs and Svelte for a small side project and feel that SolidJs is slightly superior but Svelte will win.

twmths 3y ago
Why it's superior? Because it's faster?

dingleberry 3y ago

is there a way to host learn.svelte.dev locally ? like git clone repo and then npm run dev ?

cadooo 3y ago
https://github.com/sveltejs/learn.svelte.dev https://github.com/sveltejs/learn.svelte.dev
- dingleberry 3y ago
  thank you, i got it working in localhost

beebeepka 3y ago

The only problem I have with Svelte is that I can't find a job. Only seen one in the last six months and they bailed after we discussed pay. I love Vue but I really wanted to work on an actual project with Svelte because the developer experience was fantastic. Guess I'll have to wait a few more years. Almost every job is react, react, react. It's exhausting dealing with the cultists

moomoo11 3y ago

Svelte rocks!!! I'd recommend it to anyone who is focused on actually just shipping UI and making progress (not bike shedding or wasting time, you know who I'm talking about lol). It is a nice paradigm that lets devs focus on just writing HTML, CSS, and JS with a little bit of teeny tiny magic (it is actually easy to understand). That's it.

Covzire 3y ago

I have a project I'd like to work on that shares a lot of similarities to how I imagine a "family tree maker" webapp might work, would Svelte be a good choice for it? Basically I'd need the ability to drag and drop, move the tree around like a Map, detect clicks to add new nodes and new branches, stuff like that. I'm thinking an HTML5 canvas would be best but idk.

IamFr0ssT 3y ago
I don't think it would be a bad choice for it, there is even Svelvet which I think could be a good starting point.

kokizzu5 3y ago

shameless piggybacking Svelte MPA now using Svelte 4 https://github.com/kokizzu/svelte-mpa https://github.com/kokizzu/svelte-mpa

khromov 3y ago

Super happy Svelte user. Have recently published an iOS + Android app using SvelteKit and blogged about the process for those interested: https://khromov.se/how-i-published-a-gratitude-journaling-app-for-ios-and-android-using-sveltekit-and-capacitor/ https://khromov.se/how-i-published-a-gratitude-journaling-ap... I tested the beta version of Svelte 4 on my app and it worked without requiring any changes other than running the migration script. Excellent work from the team!

gonzaloalvarez 3y ago
Happy user of your app. Works great. Thanks for documenting all the process. It’s really insightful
laurels-marts 3y ago
This was a great blog post! Thank you for sharing your journey.

nickstinemates 3y ago

Can someone point me to a concise location of getting a development environment setup for Docker. Spent an hour or so after reading this and found conflicting information/out of date documentation. The tutorial[1] on the website is not helpful for actual deployment/development. I found Svelte for New Developers[2] which is slightly better, however, when building according to the instructions what I expect to happen is not happening. i.e, a static index.html is rendered vs. the src/App.svelte getting rendered. Wrangling all of this is the worst part of modern day Javascript. 1: https://learn.svelte.dev/tutorial/welcome-to-svelte https://learn.svelte.dev/tutorial/welcome-to-svelte 2: https://svelte.dev/blog/svelte-for-new-developers https://svelte.dev/blog/svelte-for-new-developers

pcthrowaway 3y ago
I can't help you with a docker setup, but if I'd highly recommend Vite for standing up a working Svelte dev environment (or Sveltekit, or React, or Next for that matter): https://vitejs.dev/guide/ https://vitejs.dev/guide/ You'll be up and running in seconds. This is all you need to know: # npm 6.x npm create vite@latest my-svelte-app --template svelte # npm 7+, extra double-dash is needed: npm create vite@latest my-svelte-app -- --template svelte (if you're looking for sveltekit it's the same command, you'll just select sveltekit in the prompt)
- nickstinemates 3y ago
  I did this - that's part of the 2nd link. Problem is that it didn't work for me. I definitely did something wrong.
  - pcthrowaway 3y ago
    Did you use the right command for your npm version? Did the installer work? Or did something go wrong with `npm run dev`?
    - nickstinemates 3y ago