15 ms·

Introducing Svelte, and Comparing Svelte with React and Vue (2021)

187 points by rzk 4y ago

nathias 4y ago
I mostly work with React, but Svelte is so much better in every way, I hope it becomes more popular soon.
- intrasight 4y ago
  Your comment captures in a nutshell why new frameworks face an uphill climb.
  - nathias 4y ago
    because people like them very much?
yawnxyz 4y ago
I've worked with all three frameworks, but as a mostly single dev/engineer I very very much prefer Svelte because it lacks a lot of boilerplate that React has, and it's easier to think about than Vue's clunky way to write variables and functions. But I'm a "hacker type" and don't work in a large tech company. I haven't seen Svelte in any sort of "real tech companies", haven't seen it on job boards, and it doesn't seem a very desirable skill. Does this mean that Svelte "doesn't work" for large teams, because it lacks the boilerplate of React?
- dstick 4y ago
  Out of curiosity, what do you find clunky about Vue's variables vs Svelte? I've been working exclusively with Vue for the last... 6 years. Since the launch of v2. So my mind is already conditioned ;-)
  - oefrha 4y ago
    You don’t need to write .value’s everywhere, that’s about all. And Vue is a lot more convenient in other ways.
    - tinco 4y ago
      Do you mean .value when writing a component that's some sort of form field? How do you refer to that value in Svelte components? edit: oh nvm, we haven't upgraded our codebase to Vue 3 yet, there are a lot more ".value"'s if you click through to the Vue 3 examples in the original post.
      - lcrz 4y ago
        Vue has `refs`, which are reactive proxy objects that are used for tracking things like re-rendering. Since vue does not hide the fact that something is a ref, you need to call `myRef.value` to get to the underlying value of `const myRef = ref(10)`. In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, at which point you can just use `myRef` directly. This will then be converted by the Vue SFC compiler. Another option is to use a reactive object as the state: `const state = reactive({ myVal: 10 })`, at which point you can just use `state.myVal`.
        b0afc375b5 4y ago
        > In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, Oh sweet didn't know that. I keep forgetting to type `.value` and debugging it wastes a couple of seconds here and there. https://vuejs.org/guide/extras/reactivity-transform.html#refs-vs-reactive-variables https://vuejs.org/guide/extras/reactivity-transform.html#ref...
        oefrha 4y ago
        Huh, I forgot reactivity transform is already out! Meant to try it but didn't get the chance. Good thing I happen to be starting a new project today.
- mritchie712 4y ago
  It's a case of "Nobody ever got fired for choosing X"[0]. No one would blame you for choosing React for a major project / new startup, but someone could definitely poke holes in choosing Svelte ("theres no package for X", "it doesn't scale", "we can't find devs that know it", etc.) 0 - https://www.quora.com/What-does-the-phrase-Nobody-ever-got-fired-for-choosing-IBM-mean https://www.quora.com/What-does-the-phrase-Nobody-ever-got-f...
  - ricardobeat 4y ago
    Absolutely. I tried to push us to try Svelte at my last job at BigCo for over four years, to replace an internal templating system. We didn't even use React or Node yet, so not only we had to convince the old guard to adopt something new, but also deal with the React-grown crowd protesting. You can't imagine the amount of flak I've taken for that. Managed to get it on a back-of-the-house system, while we built a massively complex React app for the main product. Everyone who worked on it loved it, but was still considered risky. Now that it has a gazillion GH stars and is mentioned in 1 out of 3 blog posts, of course things are much easier.
    - solardev 4y ago
      Man, on one hand... evaluating frameworks is just part of the job, right? Same as evaluating a vendor service, or a third-party package, or an architecture or a pattern... On the other hand, novelty burnout is a real thing. Javascript has mutated so much in a short period of time that it's become impossible to keep up with -- especially once you factor in frameworks and tooling. Times like this, I wish vanilla JS/ECMAscript was more powerful out of the box. For a language designed to work with the HTML DOM -- the ONLY language that works natively with it -- it is so woefully underpowered. Why do we need a framework at all to do a simple stateful AJAX UI? =/ For many sites and apps, the business logic SHOULD be the focus of dev time, but it's not... it's implementing trivial business logic inside of the ever-growing monster that is the JS ecosystem. There are 1000 ways to do anything in JS, but never just one good way.
      - neon_electro 4y ago
- msdrigg 4y ago
  I know svelte is a very common choice for larger news sites to build interactive stories. Ive specifically heart of NYT using it as well as pudding.cool. It makes sense for this small website extension because you can build and compile a small component without having to bundle the entire react runtime in.
  - zozbot234 4y ago
    > It makes sense because you can build and compile a small component without having to bundle the entire react runtime in. Fixed.
  - d1sxeyes 4y ago
    The guy who created it, Rich Harris, used to work for the New York Times and developed it while he was there. So it's not a big surprise that NYT use it. I'm not sure about many other 'larger news sites' using it, but one place I have seen it out in the wild in a big production app is the Apple Music web app.
    - vbezhenar 4y ago
      How did he managed to push his own framework. I’d love to rewrite the world, that’s so much more fun than converting Json to sql. But it would be a very hard sell to management to write our own framework instead of using something battle tested like spring boot.
      - pastor_bob 4y ago
        Well the Jeremy Ashkenas (of Backbone, Underscore, CoffeeScript) and Mike Bostock (of D3) used to work there as well and I'm pretty sure the NYTimes pretty heavily embraced some of those libraries with impressive results, so it's probably part of the culture there.
      - azemetre 4y ago
        Rich Harris did a lot of data viz work (IIRC) during his tenure at the NYT. I don't know if you have experience working with D3 and other template/view libraries but it's always been painful. D3 can also append the dom, so it makes certain parts of the API harder to use. There's also the need to work with large amounts of array values that are uniquely made with D3 (various SVG paths). I can easily see multiple teams adopting it if it makes writing interactive data visualizations that much easier. Supposedly Svelte is able to do this very well, haven't had the chance to try it with D3 myself.
- spuz 4y ago
  Check out https://sveltejobs.com/ https://sveltejobs.com/ And also the #jobs channel on the Svelte Discord https://svelte.dev/chat https://svelte.dev/chat There are jobs being posted every day. And btw, we're one of those looking for Svelte engineers.
  - whiddershins 4y ago
    I’m an engineer who has recently done a large project and a few small ones in Svelte. Where do I apply?
    - spuz 4y ago
      I work at digivault.com in London, UK and we provide custody for digital assets. I've just prepared our job listing and posted it to the Svelte Discord. You'll find all the details about the role there. Hopefully I can also get details on our website soon.
  - datavirtue 4y ago
    Seems like you could put any engineer on Svelte.
- illegalmemory 4y ago
  Apple Music Web version is made using Svelte https://beta.music.apple.com/us/browse https://beta.music.apple.com/us/browse
- jraines 4y ago
  We use it at Stylitics for our main user-facing product, a highly configurable 3rd party js widget, with many millions of engagements daily. It’s a small team that works on it directly, but we’re “real” and have to meet fairly stringent/“real” requirements from our big brand/retailer clients (and we’re hiring, email & link in profile)
- cutler 4y ago
  One of React's competitive advantages is React Native. That's hard to beat.
  - eikaramba 4y ago
    there is svelte-native based on Nativescript. it is similar fast or faster[1] and provides the ability to directly use every native function in JS without having to rely on new interfaces or build versions (e.g. you can directly access new APIs from JS). beeing able to use Svelte makes it sooo much easier to develop mobile apps. [1] https://blog.nativescript.org/perf-metrics-universal-javascript-part1/ https://blog.nativescript.org/perf-metrics-universal-javascr...
    - shroompasta 4y ago
      svelte native is nowhere near react native in maturity. Discord uses React Native. What larger companies uses Svelte Native?
- mcronce 4y ago
  This is my experience as well (in a similar situation to you). I also found Svelte far easier to grok, as someone who is generally not a web developer, than alternatives. Not having to bundle a huge runtime and deal with all the virtual DOM cruft is a nice bonus for performance, but the reality is that it's probably not a measurable difference for anything I'm doing on the front end.
- gherkinnn 4y ago
  Svelte is indeed more svelte and might appeal more to some, but React doesn’t have a lot of boilerplate to begin with. Sure, calling useState is more work than simply declaring a value and useEffect is badly designed. That’s about it. Nowhere near enough “to work for large teams”, as is the argument for Angular and the Java world it gets its bad ideas from.
- nightski 4y ago
  Depends on your needs. Personally I hate Svelte's data model and how it changes the semantics of your code by injecting state handling (it's a mental burden). If you are basically writing blogs or very simple content this is probably not a problem. Writing complex apps though I much prefer deterministic top-down data flow and not arbitrary reactivity. If you hate React for some reason I'd consider SolidJS a much more principled framework.
- danra 4y ago
  Not a large company, but we did choose Svelte and are actively seeking hiring someone experienced with it.
- swyx 4y ago
  list of real tech companies using svelte: https://twitter.com/sveltesociety/status/1260209026563858432?s=21&t=oT1R6bfLJpHjRu7ugYaMEw https://twitter.com/sveltesociety/status/1260209026563858432...
- Existenceblinks 4y ago
  It's a mixed bag of marketing, hiring pool, late mover, and cult problems. The latest one doesn't contribute much but to deaccelerate. The critical point of adoption is libraries, there must be variety of them to serve broad kind of application. That's "late mover" problem, people are tired of re-implementing stuff again. I wish popular frameworks would pass down some funding to vanilla js libs individuals. Marketing, it's about image of "facebook's engineering team" vs "these individuals guys". (often time, big corp's team is not that smart, really) Hiring pool. Small companies couldn't afford shinny things (risks management), so the larger pools of dev, the less risk. Cult, ahaa.. It seems to LOTs of devs agree that Re*ct sucks. Leaving a cult is not easy, it's leaving community. Most people don't want to leave at all, and in a sense they hate that people are leaving too! They become angry and defensive. So we don't make progress more quickly here.
newbieuser 4y ago
I think svelte is a project that will always remain experimental.
- hliceath 4y ago
  And what makes it experimental in your opinion?
  - lakomen 4y ago
    The fact that there's never a v1.0
    - vezycash 4y ago
      https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md Svelte is currently version 3.5
- gpas 4y ago
  Svelte is used in production by several high profile companies. NYT in primis, since its creator Rich Harris worked there, but also Spotify, Ikea, Reuters, Brave...we can debate if it's not as mature as other frameworks, but definitely is not experimental.
  - newbieuser 4y ago
    By experimental, I don't mean unsuitable for production. As a development culture, I think that they are in a structure that constantly tries something within themselves. So if I start using it for an application today, the codes I use in a few months may be depreceted. this is my personal observation. I wanted to share.
    - gpas 4y ago
      I understand what you mean. Something's changed, but the syntax and the svelte way of doing reactive components is the same (but I only used version 3, don't know how they did in the previous versions). SvelteKit on the other hand is still very much a work in progress. I'm using it for personal projects and it's great, but I'm surely waiting until v1.0 to do anything serious with it.
Vanit 4y ago
I'd really like to hear more from Svelte devs about what non-happy paths look like. I specialise in React.js and there are any number of escape hatches to make sure you can get something working just the way you want. What I fear about Svelte is getting to 95% complete and finding the one obscure thing a stakeholder will not budge on is not possible.
- ______ 4y ago
  The one 5% thing I’ve run into is a lack of proper generic component props when using Typescript. Granted, that’s a rather advanced topic, but I miss having a <Component<MyType>> where all the type checking “just works”. It’s not a dealbreaker - more like just something I noticed coming from the React world.
- xrd 4y ago
  Svelte is much closer to regular JavaScript. There really isn't anything you can't do with svelte that you cannot do with vanilla JavaScript. Everything is JavaScript in the end, but react forces you to go through their framework and that's why you need escape hatches. You just don't need that with svelte at all. It's wild when you get that part of it. The reactive part of svelte is just adding stuff during the compile process that at runtime does the DOM manipulation, rather than figuring that entire sequence out in runtime.
  - tomgp 4y ago
    Yeah, this matches my experience moving from React (5+ yrs) to Svelte (2 shipped 3 month projects over the last couple of years at this point). Svelte clearly lacks the massive community support of React but I've found it easier to get by on my understanding of JS and the DOM when I get stuck. I've heard lots of gripeing from other React devs about the $ syntax and a few other things around lack of JSX but that feels like really small change when compared to the flexibility Svelte allows around things like transitions (no more hooks!).
- hbbio 4y ago
  Using Svelte for a quite large codebase. Couple years ago, there was lot of hiccups especially with TS support or the vscode plugin. It's much better now. There are some patterns to know to work around some reactivity issues with component reuse but overall, and still some TS issues with vscode (extra warnings due to lack of understanding of component context) but it's still ok. The biggest drawback of Svelte is not the tech itself, but the lack of a well developed ecosystem of components, design systems, etc. You'll probably end up implementing many components yourself... whether it's a good thing is left for discussion.
floodle 4y ago
The only thing I don't like about Svelte is the reactive blocks, prefixed with $:. There are a number of gotchas, like updating complex objects, which make things a bit...implicit rather than explicit.
- Tade0 4y ago
  Rule of thumb is: it's fired after assignment of a named variable from the root scope which was mentioned in this reactive block. You can even add a line that just says `myVar;` and the reactive block containing it will be executed on every `myVar = ...`.
  - 7sidedmarble 4y ago
    Yeah I understand why people find them confusing. They trip me up too, and I write a lot of Svelte. I think it would have been better if Rich had added something like the computed/useEffect style of this concept, but it would have looked very out of place in the rest of Svelte which is probably why he didn't do it.
- pragmatic 4y ago
  Reactivity is hard in any platform. If you don't like those, I wonder how you'd like the extensive use of rxjs in Angular. I think svelte has taken the best part of the rxjs observable pattern without the PhD level of insanity in the reactive frameworks. Beyond debouncing and throttling, the uses for rxjs style reactive patterns (all the variations of Subjects) gets super confusing fast. (Look at a moderate sized Angular app and you see the horror of types and brackets needed to handle http calls and errors correctly, for example).
- butterfly771 4y ago
  Maybe you need vue3 .value
junon 4y ago
If you want something that is a bit lighter weight, check out Surplus. It's been around for ages, is used for real projects, and has a lot of the same design patterns Svelte adopted, without a lot of the extra language semantics.
- b0afc375b5 4y ago
  Do you mean this? https://github.com/adamhaile/surplus https://github.com/adamhaile/surplus
  - junon 4y ago
    That's the one.
pixard 4y ago
I work with React (Next.js) on my main project and while I don't appreciate some things generally I haven't had any issues and Next.js in particular has been great. I also find JSX stellar. I used Vue from 0.12 until around ~2.5, I really liked it at the beginning (coming from a jQuery only world) but I was forced into learning React for React Native and then I kind of standardized on it for a while and Vue fell off. I used Svelte for a side project recently and it was quite enjoyable but I do really miss JSX and I don't like the $: syntax. I plan to give SolidJS a try on my next side project and then I'll standardize on either Svelte or SolidJS for side projects and React for big things. Since Svelte and SolidJS are such great options for smaller things I kind of don't have a use case for Vue anymore, but I do remember it fondly.
- mccorrinall 4y ago
  I like NextJS too, except for the API part. The DX is so poor compared to e.g. fastify. Want to only allow a specific http method for this route? Have fun adding boilerplate. Want to throw a specific http error like 403? Have fun writing this by hand. It also lacks schema validation (I’d love to see ajv here) and openapi gen. You have to write everything. by. yourself.
  - scrollaway 4y ago
    I like NextJS for the frontend and django-ninja for the backend. django-ninja has all those things you mention and way more, and has a very rich backend ecosystem thanks to being in the django world. https://django-ninja.rest-framework.com/ https://django-ninja.rest-framework.com/ FastAPI is also great but a little more involved. It's good if you don't want to be in the Django world.
    - mccorrinall 4y ago
      Yes, there are many solutions to this problem if you don’t mind hosting yet another service, but the best would be if the integrated API routes wouldn’t suck so hard.
- zozbot234 4y ago
s-lambert 4y ago
I don't see how Svelte is "React without all of the bullshit", Svelte really seems like the complete opposite of React. To me it's more like a modern Angular 1 where it's a magic HTML DSL (just now with a compile step to make it more optimized). For instance, Angular 1 had the ng-if attribute in templates for optionally including parts of the template based on JS values and Svelte has {#if ... } blocks in templates that do similar. Whereas React is just JavaScript, you just write a function and ifs like anywhere else. Seeing Svelte take the global variables (are they now not global because of Svelte's compiler? probably) in a <script> tag and binding them to HTML elements seems too magic for me. Whereas at least with React, I can sort of understand how it works under the hood and could probably write a poorly optimized version of it without thinking much about it. React isn't perfect by a long shot so I think something will eventually overtake it, but I hope it's not magic HTML templates, that seems like a step back.
- pragmatic 4y ago
  If you mean Stores, those are Observables (implement that interface similar to rxjs which is used heavily in Angular) It's a solid pattern that solves a lot of issues in a pragmatic way. Keep in mind "modern" react is easy less clunky, so the whole state management thing is easier with hooks so it's not as impressive how easy svelte is now at it was when it was introduced 5 years ago.
- ttfkam 4y ago
  I think you've missed something fundamental. Imagine you're using a spreadsheet app. You put data into a column. Then in another column you write a formula referencing the first column. Then you write a sum formula to put it all together. Oops! One number is wrong in the first column, so you update it, and everything updates automatically. No muss. No fuss. This is the model that Svelte works in BY DEFAULT. The compiler determines a dependency tree. Variable "b" depends on "a" in a component, you've bound "b" to an element for display, and somewhere, your components logic changes the value to "a". Boom! UI is updated with latest calculation, and all you had to do was use plain ole JavaScript. No useState(). No complete DOM subtree rewrites since the virtual DOM was marked dirty, just the bare minimum of DOM changes automatically. Reactive variables instead of linking up reactive functions within a reactive framework API. In React, for performance reasons, you often have to explicitly mark segments of a component (or whole components) that you know won't change so that it doesn't recalculate every time there's a minor property update. All of that goes away in Svelte. There is no reason to mark segments for no recalculation in Svelte in the first place. It just works, and it just works with what looks to you as the developer as 99% HTML, vanilla JavaScript, and standard CSS. I imagine most folks who love React syntax have Stockholm Syndrome at this point. Having written for web since 1996 or so, I've seen the progress as well as the fads. I still remember document.write(…) and Netscape's layer tag. I remember the JQuery revolution after the missteps of Prototype. I know full well why React (and Angular and Vue) were created as web sites became larger and more complex. And I'll tell you truthfully, I haven't been this excited about a return to relative simplicity as evidenced by Svelte in a long time. The strategy behind Svelte is an industry refactor that's been a long time coming. Even if Svelte is not the eventual "winner", I truly hope it's something closer to the Svelte model than the current old guard of Angular, React, and Vue. You may claim to hate magic, but I have some bad news: there is magic at every level going down to the lightning injected into rock to make it think. The fear of magic is the same argument used by the assembly programmers when C first emerged. "Too much magic. Too easy. Too much loss of control." Never mind that it was an order of magnitude easier to learn, modify, and maintain.
preommr 4y ago
My 2c: I think svelte is overhyped and a poor solution to the problem it's trying to solve. First of all, I am tired of ridiculous metrics like how small svelte is when it's a really small example, and it's one or two lines of initial boilerplate. The thing that really set svelte apart was it's better syntax and experience when it first came out. I think that was when react class components, and vue 2 was still prominent. Look at the react and vue 3 examples now. They're really close. Vue 3 in particular looks a lot like svelte with vue's sfc. I don't even think the dissapearing part about svelte is that important. That kind of performance is rarely going to matter before other bottlenecks. And if it really is that crucial, there's nothing stopping either react or vue 3 from doing something very similar. Vue 3 already has sfc that go through a "compile" process, and it uses getter/setters to make targetted changes. There's also some considerable challenges to svelte: it's brining in custom syntax to really tackle the problems with reactivity. That's honestly really good if we could get one unifying system. It would be wonderful. But that's a tall order. Given how much traction these other tools already have, I don't see svelte ever fully dominating. Which makes it's extra magic and custom language features even more of a burden. People already complain about vue's few dsl's in the template or react's hooks. Finally the eco-system for the other tools have come so far. Given how much the gap has closed, and how much farther the other tools are, the better ecosystems make them much better choices. Also as much as I respect Rich Harris, it's a tough sell against people the momentum of something like Facebook or even Evan You with vue and related tools like vite. I know he's working full-time on svelte now at vercel, but the corporate side of this as well as maintaining a community around this is another hurdle. Say wha t you will about react, nobody got fired for choosing it. On the other hand, it's a punch in the gut to jump on something like sapper and then have it be oddly deprecated/rolled into sveltekit.
- 7sidedmarble 4y ago
  Just throwing this out there, but have you considered that React and Vue in fact also have custom non-JS syntax? JSX is not valid JS, parsers had to be written to work with it. And Vue uses templating syntax in HTML, just like Svelte. Svelte doesn't have any non-native syntax in the JS parts, just the templating.
  - 4y ago
thunderbong 4y ago
I've recently started working with Svelte and have been loving it compared to React. A lot of stuff flows through very intuitively. However, for any front-end framework, the UI is paramount, and the most full-fledged component framework I found was Carbon Components[0]. I've heard rave reviews about Quasar[1] for Vue 3. Are there any equivalent UI component frameworks for Svelte? [0]: https://carbondesignsystem.com/developing/frameworks/svelte/ https://carbondesignsystem.com/developing/frameworks/svelte/ [1]: https://quasar.dev/layout/grid/row https://quasar.dev/layout/grid/row
- jdthedisciple 4y ago
  Uhm, Carbon supports Svelte too ...
  - d1sxeyes 4y ago
    Yes, I think that's the point. Carbon does, but there aren't (many) others.
- ibz 4y ago
  I'm using Svelte with Daisy UI [0] which is based on Tailwind CSS. It is incredibly simple and beautiful. [0]: http://daisyui.com http://daisyui.com
  - mkl 4y ago
    Daisyui.com seems to disable scrolling with arrow keys, page up, and page down. Is this a general problem when using Daisy UI, or is there something wrong with the page?
- engido9740 4y ago
  You might check out Skeleton (full disclosure, I'm one of the creators) https://skeleton.brainandbonesllc.com/ https://skeleton.brainandbonesllc.com/ https://github.com/Brain-Bones/skeleton https://github.com/Brain-Bones/skeleton When my partner and I were getting started with Svelte we noticed there was plenty of wrapper libraries, but very few that lean into the benefits of Svelte specifically. We wanted something like Mantine from the React world. We're still early days (open source and public for about a month) but the feedback has been really positive. The one thing to note is we pair heavily with Tailwind, so if that's not your jam the library may not be for you. However for any sizable app where you're building with a design system, something like this can fit right in. Hopefully you can give it a try and it helps out! My username is the same on our Discord if you need any help!
Scootwilli90 4y ago
[dead]
Tade0 4y ago
One (sort of accidental I assume) selling point of Svelte that wasn't mentioned here is that the stack trace is legible. Working with this framework I found that it was very easy for me to trace back to where the change that caused the error happened. You don't get this in most frameworks, which hide everything under layers of event handlers, schedulers and whatnot.
- Sammi 4y ago
  This should really be an explicit goal of a frontend framework and a pain point I have encountered often in React and Angular. How are you supposed to debug stuff if the stack trace isn't even legible?
  - solardev 4y ago
    Does using a debugger help? (like in VScode or IntelliJ). The React stack trace is so useless I find myself just stepping through the code and setting breakpoints when I need to actually locate the source of an issue. Is there a better way, in React or other languages?
pugio 4y ago
Just published an app on both app stores using Svelte and Ionic. Svelte was a pleasure to use - everything seems like just enough of what you need, without adding any additional mental overhead or complexity. I'm really looking forward to the stable release of SvelteKit to use as the backend for my next project.
- lakomen 4y ago
  That's the thing... it's always never stable always in development. I'll habe to check this combination put however. Now the price question, did you use an oidc client? If so which works with both app and web?
FpUser 4y ago
Personally to me the best framework is no framework at all. Instead I use libraries of code and Web Components. The libraries are either my own or some existing ones. Overall writing web front end this way for me is the most natural way. In my personal experience I spend less time creating the web front ends this way comparatively to when using "frameworks". No "compiling" is needed either, other then optional minimization.
- intrasight 4y ago
  I agree. The "DSL" and "compiling" aspect of frameworks scares the crap out of me frankly. And on top, it's all happening on my poor users device - well not for Svelte apparently. Let's have a look at this "compiled" JS. Here's an snippet from the volume slider in his example: function b() { v = W4(this.value), h(0, v) } I understand that this is "compiled" - but really it's not - it's EcmaScript. If I wrote code like that, I'd get fired.
  - bdougherty 4y ago
    You are looking at minified output there; of course nobody writes that. You can see the compiler output in the "JS output" tab here, it's very easy to follow: https://svelte.dev/repl/12aefec27f0d4ec5ad85ab7e5a123642?version=3.50.0 https://svelte.dev/repl/12aefec27f0d4ec5ad85ab7e5a123642?ver...
    - intrasight 4y ago
      Got it. It was both compiled and minified.
- andsoitis 4y ago
  That can work relatively well for projects where there are a handful of engineers, but I wonder whether it doesn’t be some much harder as your team grows to 20+ engineers working in the same UI code base?
  - FpUser 4y ago
owlbynight 4y ago
Have done a couple of projects with sveltekit, including a redesign of my personal website and an internal tool for myself and colleagues for quality of life. I liked working with it, but I regret not waiting for 1.0 to really dive in. The breaking changes are getting annoying, with the most annoying being recently with changes to its routing. It seems like every time I make a small change and go to rebuild my sites, I'm dealing with a new headache. Don't get me wrong, the changes are probably warranted to avoid Angular-style major version catastrophes, but for me, the draw to svelte is its ease of use. If I can't go a day without having to go digging for a fix to a breaking change, it's really not that easy to use. I'm mostly a hobbyist dev and don't have the time to keep up with it. Also, the new folder-based routing is clunky as hell. I'll probably spend some time learning Next.js for future projects. Its ecosystem most likely trumps the syntactic supremacy of svelte currently. That said, I don't doubt svelte will introduce something that reels me back in again in the future.
- laundermaf 4y ago
  I think "breaking" is really part of Svelte’s life. I used Svelte since v1 five tears ago and basically I had to rewrite those small projects every time I touched them.
  - auggierose 4y ago
    One tear for each year?
- pragmatic 4y ago
  I purposely avoided sveltekit in my current project. It's not 1.0 and it clearly states that. I don't need it. Only seems to bring SSR which many projects simply don't need. Svelte and vite are working fine for me. My current project is tied for the most complicated front end project I've built. It's offline first, pwa, service workers, indexeddb, etc etc. No problems so far. Could use better documentation but what projects can't.
b0afc375b5 4y ago
Is anyone writing svelte in emacs? How's the tooling there? I'd like to know if it's good enough.
- nebqr 4y ago
  web-mode supports .svelte files (provided you add the engine to the alist). I haven't made anything too complicated with it but it seems to do the trick.
qwertox 4y ago
I'm afraid of switching to Svelte because of what happened to Angular. I switched to Vue because of Angular's 1.x to 2+ upgrade. Then I was faced with the Vue 2 to Vue 3 upgrade, which now has a lot of my code in a state of mess. Svelte has always looked so promising, just what I wanted. But my fear is that if I ditch Vue and jump to Svelte, it will do the same thing as any other framework did: become a monster and cause problems with all my dependencies. So I'm staying with Vue.
- actionfromafar 4y ago
  Haha, I've had this reaction vs other technologies. But in hindsight your comment (which could have been mine a few years back!), is really funny. Basically, are you staying with Vue because it's the monster you know, or why don't you fear Vue becoming a monster? :)
- adhoc_slime 4y ago
  I did the vue 3 bump a while back and Evan You did a fantastic commit by commit repo to follow along and there's even a migration build of vue 2 which warns you of all the areas where your app will break in vue 3, really fantastic. I can't claim that that upgrade was painless, it took a few days with an app with > 10 pages, >20 custom components and I had to push ahead with re-writing a 3rd party component or 2 that was only vue 2 at the time (honestly I should never have used them in the first place. reap what you sow). But build times are faster, my bundle size is a lot smaller, I'm really pleased with the new features, and I'm a building faster as a result.
- dmix 4y ago
  I upgraded to Vue 3 and Pinia and my project got 2x cleaner. Vue 3 was designed with large complex projects in mind. Vue 2 is probably easier to grok when starting out or for small projects but the functional modularity, typescript integration, and reduced boilerplate with 3 really starts to show in large projects. I did it slowly over a year and besides having to wait for some dependencies to catch up it was mostly painless. Although the biggest pain-reduction was getting to use Vite instead of Webpack (shudder). The build tools not sucking is so critical when doing front end dev.
- 4y ago
Justsignedup 4y ago
Just one note. The article spends a lot of time talking about how all react returns must be wrapped..... Dude, just use fragments it's just an empty tag in the jsx compiler and adds like zero effort. Other than that, seems interesting. Didn't actually function in the embedded browser used in my hn client so that's bad... But overall seems like it's worth a try.
deleted 4y ago
[deleted]
amgreg 4y ago
We use Knockout JS extensively in an old codebase and its two way data bindings and computed values depending on those bindings are a mine field. The uni direcional data flow of React in my opinion has been a breakthrough. How have folks found using two way bindings in Svelte (and other frameworks?)
2OEH8eoCRo0 4y ago
Is Svelte blowing up in popularity? I've never heard of it until seeing it multiple places today. https://github.com/containers/podman-desktop https://github.com/containers/podman-desktop
- pragmatic 4y ago
  Yes. https://survey.stackoverflow.co/2022/#section-most-loved-dreaded-and-wanted-web-frameworks-and-technologies https://survey.stackoverflow.co/2022/#section-most-loved-dre...
  - andsoitis 4y ago
    According to the survey you linked to: Phoenix overtakes Svelte’s spot as the most loved web framework. React.js completes its fifth year as most wanted. So I’m not sure that’s an unequivocal “yes”.
shroompasta 4y ago
Svelte/Solid JS and reactivity are great; Reactivity definitely is a better philosophy than Virtual DOM diffing. However, I'd like to add one more reason to the "arguments adopting svelte" and that is native development. Svelte Native doesn't even come close to touching React Native in maturity, and I'm willing to bet it never will. For a startup to consider a frontend technology, React is easily the better choice in terms of capital because there is no way you're going to build a production ready native app in Svelte Native. If you were to build your web client in Svelte, then you would have to spend capital on another team to build Native (God forbid in React Native), in which you would split teams on ios and android. Or you could you use just one team for React + RN altogether and save you possibly millions in capital. Also I'd like to mention that the NYT article that was linked to showcase Svelete actually showcases more of D3 instead. Mike Bostock also used to work for NYT and NYT absolutely loves using D3.
revskill 4y ago
React Component is just JS function, which made things simple to learn, debug and understand. Svelte is a compiler which strip unnessesary JS code in the output. Wish: Combine both, don't compare.
igtztorrero 4y ago
Never use Svelte but looks very easy to use. I think this post will make it to the top, very interesting comments a lot to learn. Thanks Hackersnews !!!
sod 4y ago
Single file components like .svelte and .vue are nice at first glance. But I want typescript, eslint and prettier understand my code natively and not wrapped in custom syntax and smushed into one file that every tooling now has to support. Maybe it's finally time for someone to standardize this - even if just pointing at what vue & svelte already do - so every tooling can go ahead and support amalgams of filetypes in a single file for any framework that wants to work like this. It's a wonder how react managed to force their jsx and angular forced annotations into typescript just to get a good typescript experience out of the box.
- girvo 4y ago
  Funnily enough, IDEs a decade ago (more, even) solved this for PHP already, as even back then a lot of PHP was still HTML and PHP (and JS) intermixed in one file. It’s a shame we haven’t solved it properly in modern editors without having to rebuild the tooling over and over again for every new framework.
  - pragmatic 4y ago
    Also asp and asp.net etc. I'm sure there's some on the java side I'm forgetting also.
    - girvo 4y ago
      Oh heck, yeah you’re right! Everything old is new again I suppose. Guess that makes me old now if I’m noticing it
      - andsoitis 4y ago
        Or you’re new again!
  - magic123_ 4y ago
    You just gave me flashbacks of the 3000+ lines .phtml files I was working on a few years back, definitely not the most pleasant experience I had as a developer.
logicalmonster 4y ago
I do like working with Svelte, but the most pleasant developer experience I've had in JS has been in Mithril.js with it's small and easily understandable API. I don't understand why there's not a bigger ecosystem and traction around that.
rubenfiszel 4y ago
At windmill (https://github.com/windmill-labs/windmill https://github.com/windmill-labs/windmill), our whole frontend is in svelte, we love it, the performance are second to none and the dev experience is great. But finding svelte dev is proving itself harder than I thought. So there is that issue as well.
- widdershins 4y ago
  Surely any reasonably smart React dev will become productive within a very short period of time? Or is it that people simply don't apply when they see Svelte on the tech list?
  - mhuffman 4y ago
    It must be the second. Svelte is by far the easiest to understand framework (of the "big" ones) that I have yet encountered.
mcv 4y ago
"Introducing"? Hasn't Svelte existed for a couple of years already? I remember a speaker talking about it on a conference some time before Covid hit. Still, it's a great article that does a good job of showing how easy Svelte is. I think it looks most like Vue, but simpler, with even less boilerplate. Of course keeping everything so simple does make me wonder how it would deal with more complex situations where you really do need a lot more structure.
- enraged_camel 4y ago
  >> "Introducing"? Hasn't Svelte existed for a couple of years already? So has your significant other at the time you introduce them to your family, right?
nileshtrivedi 4y ago
I loved using Svelte for these two open-source projects but haven't yet an opportunity to use it at work: - An SVG-based graph dataset editor: https://codeberg.org/nilesh/grapher https://codeberg.org/nilesh/grapher - A curated collection of educational resources: https://github.com/learn-awesome/learndb https://github.com/learn-awesome/learndb Compared to React, developing with Svelte felt like a breath of fresh air.
deleted 4y ago
[deleted]
lexx 4y ago
Svelte is brilliant. The new things you have to learn are minimum. New devs can be productive since day one. I don't know why I would ever want to use vue or react.
- lakomen 4y ago
  Larger ecosystems
  - FractalHQ 4y ago
    Svelte’s Ecosystem is actually the largest of them all once you realize all Vanilla libraries work out of the box in a Svelte file without an “x-for-React” version.
5350-uiop-1130 4y ago
i would like to read a comparison of the major js frameworks from a practical sense of how they can help me meet deadlines faster, as opposed to developer experience i'm not that bothered about the various technical trade-offs, i mean they sent a rocket to the moon using assembly language i just want to know how {newThing} can help me get shit done at work faster with less headaches.
fulafel 4y ago
Svelte is too married to JS. I hope JS gradually becomes just a compile target for other languages. React is great because you can use it nicely from ClojureScript (via Reagent).
caporaltito 4y ago
Hooray! Yet another framework which will do what Angular already does for years.
- vyrotek 4y ago
  I love the kitchen-sink and batteries included of Angular. It made our small team very productive on large projects. But I really dislike the separated component files convention. On the other hand, I love React single components but hate having to shop-around and piece together every basic platform feature.
  - neon_electro 4y ago
    "hate having to shop-around and piece together every basic platform feature." Can you elaborate on what you mean by this?
    - rk06 4y ago
      Say, you are making an app, and find yourself needing a router, state management library. Angular: use inbuilt router and rxjs Vue: use vue router and pinia React: shop around third party libraries. You can shop for alternatives for both angular and vue as well, but they have a first party solution. While react does not and will not have a first party solution for this and many other use cases
SSchick 4y ago
Can someone with more experience in the 3 frameworks give some insights into the type safety ergonomics? I'm extremely biased towards react due to the fact that it effectively brings very strongly typed templates/components to the table, which has saved me easily a hundred hours of debugging/testing over the last 4 years. It also makes components MUCH more accessible due to the declarative nature of props (and their respective types).
- FractalHQ 4y ago
  30k loc into this project with Svelte and Typescript and everything is 100% fully and correctly typed in strict mode with no implicit any
no_wizard 4y ago
Svelte is what Ember could have been and where I suspect Vue is ultimately going (in their own flavor of course). If you really like templates and the constraints they bring over being closer to plain JavaScript, Svelte takes that to the most logical "extreme". On the other hand, if you like leveraging most JavaScript features then React, Preact, Inferno, SolidJS and especially Lit are much closer to allowing developers to use any part of the language that is useful, with some exceptions for reactivity. Lit in particular is 100% JavaScript primitives and very little sugar on top.
- Existenceblinks 4y ago
  My endgame is lib like uhtml/lit-html(alone), custom element, event delegation technique and global store. You can write any fancy widget with this. Writing your own (event -> update -> render) is not rocket science, just utilizing the platform! (seriously, don't make fun of platform, it's legit)
mcluck 4y ago
I had a good time trying out Svelte a while back. However, at least at the time, TypeScript support for it was nearly non-existent which makes it a non-starter for me.
shirogane86x 4y ago
I'm still very skeptical of the random templating syntax, of the weird reactivity with gotchas and most of all, of two way databinding. Wasn't two way databinding one of the reasons we got react (and one of the reasons i bought into it) back when angular was the go-to? I feel like every time i try to use two-way-databinding it ends up in a jumbled unintelligible mess where I'm chasing mutations around... Personally, if I have to try out a new framework, I'll probably try out solid instead.
- swyx 4y ago
  svelte’s 2 way data binding is only within a component, and actually is 1 way if you look at the compiled output. very different than say angular, and pretty much equivalent to what you manually write with setState calls. this is such a common misconception i feel like we should put this in the FAQ somewhere. people are fixating on the wrong thing when they go “oh ho 2 way binding bad”. its local and its compiled away, its fine.
  - shirogane86x 4y ago
    Thank you very much for the explanation! I agree with you that this information should be somewhere, especially seeing as I (mistakenly) thought that too, I probably would've had less of a knee-jerk reaction to it if I knew that it's effectively syntax sugar. I'm guessing I'm not the only one who has really bad memories of angular... Sorry for the misunderstanding!
    - swyx 4y ago
      yeah no worries it’s a very common superficial reaction! we just spend a lot of time explaining it: https://twitter.com/rich_harris/status/1420214295242199041?s=21&t=oT1R6bfLJpHjRu7ugYaMEw https://twitter.com/rich_harris/status/1420214295242199041?s... https://twitter.com/rich_harris/status/1147902393293688834?s=21&t=oT1R6bfLJpHjRu7ugYaMEw https://twitter.com/rich_harris/status/1147902393293688834?s... https://www.swyx.io/svelte-why#two-way-binding https://www.swyx.io/svelte-why#two-way-binding
jmull 4y ago
I'm using Svelte/Sveltekit for a project with about 80 pages (as the designer conceives them -- there are repeated patterns of course... there might be 30-40 sveltekit pages, though some are fairly complex.) It's been great. I have no experience with Vue, but I'd rather not work more with react.
- FractalHQ 4y ago
  Vue is just Svelte with extra steps.
y-c-o-m-b 4y ago
I still think Vue (especially Vue 2) is the greatest of them all. I've worked professionally with Angular, React, and Vue. Each for several years. Vue is easily the winner for me with the syntax that closely matches native HTML and JS/TS and how it encourages clean separation of concerns and clean code. JSX/TSX is absolutely the worst for the latter, it's like the wild west. "But you don't have to write it that way" - yeah ok, but when you work in a large organization it's going to get written that way by your peers; good luck trying to stop it. Angular is just a clusterfuck of pipes and observables that require higher cognitive load to unravel when trying to understand a semi-complex block of code. Contrast with Vue where I can near instantly understand what it's trying to accomplish. This shit right here - {#if <condition>} {:else} {/if} - is why Svelte is deterring me. For the love of god, can we stop coming up with weird custom syntax for templating code? This is one area where Angular also pisses me off: *ngIf for example is just as hideous. With Vue: v-if, v-else. You add it as an attribute to native html, it's dead simple. No weird symbols, no braces or other oddball shit I have to look up when I step away from it for a few months and come back. It just makes sense right away.
- lakomen 4y ago
  Amen brother preach however I don't agree with the last paragraph. It's just a different way of expressing it and in React that's actually straightforward, all your interpreted logic is in {}. Each of them has their upsides but personally I use Vue because it just worksTM. And it has vuex-orm, which albeit not perfect is the only no bs client state orm that you can query any way you like and supports relationships. I was in an Angular discord and dared speak against the pipes/streams. They has their place but ultimately they're too complicated for every day use. No it's not an issue of me not being able to deal with them. It's a too complicated way. Sometimes all you need is 1 variable, to which the moderators there said I'm doing it wrong, no it's in the data store and I want that 1 var's value, I have to break my fingers just to get it, a block of code to get 1 value, since I can't write if a == 10... Well they kept suggesting I'm too dumb to handle it and in the end banned me for criticizing their holy framework. I said that I've recently worked with Vue, you have to try other things too, after 3 years of Angular and that Vue was a productivity increase and that I finished 2 projects with vue in the same time I did half a project in Angular. In the end Vue won it for me, I tried React also NextJS and React has some nice things, it's more JS , more straightforward than Vue but its ecosystem is a hell of commercial offerings. Want to use MUI? Well pay up. Redux-orm complicated because Redux is complicated. Svelte, I'd love to use it but it's always in development it seems and no "proper" or well maintained packages seem to exist. I did 2 experimental projects with Svelte, it's nice and it's fast but it's never there... always in development
michaelwww 4y ago
I was curious about what Svelte "compiler magic" was so this is what I found (I may be wrong): The compiler wires up all the reactive JavaScript ahead of time, while Angular and React do it at run time. Svelte also does DOM manipulation directly and is fast because browsers have improved very much since React was first created. One of Svelte's taglines was "You don't need a virtual DOM". That said, I haven't used Svelte to see what kind of JavaScript it makes and how easy it is to reason about once compiled.

187 points by rzk 4y ago

nathias 4y ago

I mostly work with React, but Svelte is so much better in every way, I hope it becomes more popular soon.

intrasight 4y ago
Your comment captures in a nutshell why new frameworks face an uphill climb.
- nathias 4y ago
  because people like them very much?

yawnxyz 4y ago

I've worked with all three frameworks, but as a mostly single dev/engineer I very very much prefer Svelte because it lacks a lot of boilerplate that React has, and it's easier to think about than Vue's clunky way to write variables and functions. But I'm a "hacker type" and don't work in a large tech company. I haven't seen Svelte in any sort of "real tech companies", haven't seen it on job boards, and it doesn't seem a very desirable skill. Does this mean that Svelte "doesn't work" for large teams, because it lacks the boilerplate of React?

dstick 4y ago
Out of curiosity, what do you find clunky about Vue's variables vs Svelte? I've been working exclusively with Vue for the last... 6 years. Since the launch of v2. So my mind is already conditioned ;-)
- oefrha 4y ago
  You don’t need to write .value’s everywhere, that’s about all. And Vue is a lot more convenient in other ways.
  - tinco 4y ago
    Do you mean .value when writing a component that's some sort of form field? How do you refer to that value in Svelte components? edit: oh nvm, we haven't upgraded our codebase to Vue 3 yet, there are a lot more ".value"'s if you click through to the Vue 3 examples in the original post.
    - lcrz 4y ago
      Vue has `refs`, which are reactive proxy objects that are used for tracking things like re-rendering. Since vue does not hide the fact that something is a ref, you need to call `myRef.value` to get to the underlying value of `const myRef = ref(10)`. In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, at which point you can just use `myRef` directly. This will then be converted by the Vue SFC compiler. Another option is to use a reactive object as the state: `const state = reactive({ myVal: 10 })`, at which point you can just use `state.myVal`.
      - b0afc375b5 4y ago
        > In a new and currently experimental syntax, you can use `const myRef = $ref(10)`, Oh sweet didn't know that. I keep forgetting to type `.value` and debugging it wastes a couple of seconds here and there. https://vuejs.org/guide/extras/reactivity-transform.html#refs-vs-reactive-variables https://vuejs.org/guide/extras/reactivity-transform.html#ref...
        oefrha 4y ago
        Huh, I forgot reactivity transform is already out! Meant to try it but didn't get the chance. Good thing I happen to be starting a new project today.
mritchie712 4y ago
It's a case of "Nobody ever got fired for choosing X"[0]. No one would blame you for choosing React for a major project / new startup, but someone could definitely poke holes in choosing Svelte ("theres no package for X", "it doesn't scale", "we can't find devs that know it", etc.) 0 - https://www.quora.com/What-does-the-phrase-Nobody-ever-got-fired-for-choosing-IBM-mean https://www.quora.com/What-does-the-phrase-Nobody-ever-got-f...
- ricardobeat 4y ago
  Absolutely. I tried to push us to try Svelte at my last job at BigCo for over four years, to replace an internal templating system. We didn't even use React or Node yet, so not only we had to convince the old guard to adopt something new, but also deal with the React-grown crowd protesting. You can't imagine the amount of flak I've taken for that. Managed to get it on a back-of-the-house system, while we built a massively complex React app for the main product. Everyone who worked on it loved it, but was still considered risky. Now that it has a gazillion GH stars and is mentioned in 1 out of 3 blog posts, of course things are much easier.
  - solardev 4y ago
    Man, on one hand... evaluating frameworks is just part of the job, right? Same as evaluating a vendor service, or a third-party package, or an architecture or a pattern... On the other hand, novelty burnout is a real thing. Javascript has mutated so much in a short period of time that it's become impossible to keep up with -- especially once you factor in frameworks and tooling. Times like this, I wish vanilla JS/ECMAscript was more powerful out of the box. For a language designed to work with the HTML DOM -- the ONLY language that works natively with it -- it is so woefully underpowered. Why do we need a framework at all to do a simple stateful AJAX UI? =/ For many sites and apps, the business logic SHOULD be the focus of dev time, but it's not... it's implementing trivial business logic inside of the ever-growing monster that is the JS ecosystem. There are 1000 ways to do anything in JS, but never just one good way.
    - neon_electro 4y ago
msdrigg 4y ago
I know svelte is a very common choice for larger news sites to build interactive stories. Ive specifically heart of NYT using it as well as pudding.cool. It makes sense for this small website extension because you can build and compile a small component without having to bundle the entire react runtime in.
- zozbot234 4y ago
  > It makes sense because you can build and compile a small component without having to bundle the entire react runtime in. Fixed.
- d1sxeyes 4y ago
  The guy who created it, Rich Harris, used to work for the New York Times and developed it while he was there. So it's not a big surprise that NYT use it. I'm not sure about many other 'larger news sites' using it, but one place I have seen it out in the wild in a big production app is the Apple Music web app.
  - vbezhenar 4y ago
    How did he managed to push his own framework. I’d love to rewrite the world, that’s so much more fun than converting Json to sql. But it would be a very hard sell to management to write our own framework instead of using something battle tested like spring boot.
    - pastor_bob 4y ago
      Well the Jeremy Ashkenas (of Backbone, Underscore, CoffeeScript) and Mike Bostock (of D3) used to work there as well and I'm pretty sure the NYTimes pretty heavily embraced some of those libraries with impressive results, so it's probably part of the culture there.
    - azemetre 4y ago
      Rich Harris did a lot of data viz work (IIRC) during his tenure at the NYT. I don't know if you have experience working with D3 and other template/view libraries but it's always been painful. D3 can also append the dom, so it makes certain parts of the API harder to use. There's also the need to work with large amounts of array values that are uniquely made with D3 (various SVG paths). I can easily see multiple teams adopting it if it makes writing interactive data visualizations that much easier. Supposedly Svelte is able to do this very well, haven't had the chance to try it with D3 myself.
spuz 4y ago
Check out https://sveltejobs.com/ https://sveltejobs.com/ And also the #jobs channel on the Svelte Discord https://svelte.dev/chat https://svelte.dev/chat There are jobs being posted every day. And btw, we're one of those looking for Svelte engineers.
- whiddershins 4y ago
  I’m an engineer who has recently done a large project and a few small ones in Svelte. Where do I apply?
  - spuz 4y ago
    I work at digivault.com in London, UK and we provide custody for digital assets. I've just prepared our job listing and posted it to the Svelte Discord. You'll find all the details about the role there. Hopefully I can also get details on our website soon.
- datavirtue 4y ago
  Seems like you could put any engineer on Svelte.
illegalmemory 4y ago
Apple Music Web version is made using Svelte https://beta.music.apple.com/us/browse https://beta.music.apple.com/us/browse
jraines 4y ago
We use it at Stylitics for our main user-facing product, a highly configurable 3rd party js widget, with many millions of engagements daily. It’s a small team that works on it directly, but we’re “real” and have to meet fairly stringent/“real” requirements from our big brand/retailer clients (and we’re hiring, email & link in profile)
cutler 4y ago
One of React's competitive advantages is React Native. That's hard to beat.
- eikaramba 4y ago
  there is svelte-native based on Nativescript. it is similar fast or faster[1] and provides the ability to directly use every native function in JS without having to rely on new interfaces or build versions (e.g. you can directly access new APIs from JS). beeing able to use Svelte makes it sooo much easier to develop mobile apps. [1] https://blog.nativescript.org/perf-metrics-universal-javascript-part1/ https://blog.nativescript.org/perf-metrics-universal-javascr...
  - shroompasta 4y ago
    svelte native is nowhere near react native in maturity. Discord uses React Native. What larger companies uses Svelte Native?
mcronce 4y ago
This is my experience as well (in a similar situation to you). I also found Svelte far easier to grok, as someone who is generally not a web developer, than alternatives. Not having to bundle a huge runtime and deal with all the virtual DOM cruft is a nice bonus for performance, but the reality is that it's probably not a measurable difference for anything I'm doing on the front end.
gherkinnn 4y ago
Svelte is indeed more svelte and might appeal more to some, but React doesn’t have a lot of boilerplate to begin with. Sure, calling useState is more work than simply declaring a value and useEffect is badly designed. That’s about it. Nowhere near enough “to work for large teams”, as is the argument for Angular and the Java world it gets its bad ideas from.
nightski 4y ago
Depends on your needs. Personally I hate Svelte's data model and how it changes the semantics of your code by injecting state handling (it's a mental burden). If you are basically writing blogs or very simple content this is probably not a problem. Writing complex apps though I much prefer deterministic top-down data flow and not arbitrary reactivity. If you hate React for some reason I'd consider SolidJS a much more principled framework.
danra 4y ago
Not a large company, but we did choose Svelte and are actively seeking hiring someone experienced with it.
swyx 4y ago
list of real tech companies using svelte: https://twitter.com/sveltesociety/status/1260209026563858432?s=21&t=oT1R6bfLJpHjRu7ugYaMEw https://twitter.com/sveltesociety/status/1260209026563858432...
Existenceblinks 4y ago
It's a mixed bag of marketing, hiring pool, late mover, and cult problems. The latest one doesn't contribute much but to deaccelerate. The critical point of adoption is libraries, there must be variety of them to serve broad kind of application. That's "late mover" problem, people are tired of re-implementing stuff again. I wish popular frameworks would pass down some funding to vanilla js libs individuals. Marketing, it's about image of "facebook's engineering team" vs "these individuals guys". (often time, big corp's team is not that smart, really) Hiring pool. Small companies couldn't afford shinny things (risks management), so the larger pools of dev, the less risk. Cult, ahaa.. It seems to LOTs of devs agree that Re*ct sucks. Leaving a cult is not easy, it's leaving community. Most people don't want to leave at all, and in a sense they hate that people are leaving too! They become angry and defensive. So we don't make progress more quickly here.

newbieuser 4y ago

I think svelte is a project that will always remain experimental.

hliceath 4y ago
And what makes it experimental in your opinion?
- lakomen 4y ago
  The fact that there's never a v1.0
  - vezycash 4y ago
    https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md Svelte is currently version 3.5
gpas 4y ago
Svelte is used in production by several high profile companies. NYT in primis, since its creator Rich Harris worked there, but also Spotify, Ikea, Reuters, Brave...we can debate if it's not as mature as other frameworks, but definitely is not experimental.
- newbieuser 4y ago
  By experimental, I don't mean unsuitable for production. As a development culture, I think that they are in a structure that constantly tries something within themselves. So if I start using it for an application today, the codes I use in a few months may be depreceted. this is my personal observation. I wanted to share.
  - gpas 4y ago
    I understand what you mean. Something's changed, but the syntax and the svelte way of doing reactive components is the same (but I only used version 3, don't know how they did in the previous versions). SvelteKit on the other hand is still very much a work in progress. I'm using it for personal projects and it's great, but I'm surely waiting until v1.0 to do anything serious with it.

Vanit 4y ago

I'd really like to hear more from Svelte devs about what non-happy paths look like. I specialise in React.js and there are any number of escape hatches to make sure you can get something working just the way you want. What I fear about Svelte is getting to 95% complete and finding the one obscure thing a stakeholder will not budge on is not possible.

______ 4y ago
The one 5% thing I’ve run into is a lack of proper generic component props when using Typescript. Granted, that’s a rather advanced topic, but I miss having a <Component<MyType>> where all the type checking “just works”. It’s not a dealbreaker - more like just something I noticed coming from the React world.
xrd 4y ago
Svelte is much closer to regular JavaScript. There really isn't anything you can't do with svelte that you cannot do with vanilla JavaScript. Everything is JavaScript in the end, but react forces you to go through their framework and that's why you need escape hatches. You just don't need that with svelte at all. It's wild when you get that part of it. The reactive part of svelte is just adding stuff during the compile process that at runtime does the DOM manipulation, rather than figuring that entire sequence out in runtime.
- tomgp 4y ago
  Yeah, this matches my experience moving from React (5+ yrs) to Svelte (2 shipped 3 month projects over the last couple of years at this point). Svelte clearly lacks the massive community support of React but I've found it easier to get by on my understanding of JS and the DOM when I get stuck. I've heard lots of gripeing from other React devs about the $ syntax and a few other things around lack of JSX but that feels like really small change when compared to the flexibility Svelte allows around things like transitions (no more hooks!).
hbbio 4y ago
Using Svelte for a quite large codebase. Couple years ago, there was lot of hiccups especially with TS support or the vscode plugin. It's much better now. There are some patterns to know to work around some reactivity issues with component reuse but overall, and still some TS issues with vscode (extra warnings due to lack of understanding of component context) but it's still ok. The biggest drawback of Svelte is not the tech itself, but the lack of a well developed ecosystem of components, design systems, etc. You'll probably end up implementing many components yourself... whether it's a good thing is left for discussion.

floodle 4y ago

The only thing I don't like about Svelte is the reactive blocks, prefixed with $:. There are a number of gotchas, like updating complex objects, which make things a bit...implicit rather than explicit.

Tade0 4y ago
Rule of thumb is: it's fired after assignment of a named variable from the root scope which was mentioned in this reactive block. You can even add a line that just says `myVar;` and the reactive block containing it will be executed on every `myVar = ...`.
- 7sidedmarble 4y ago
  Yeah I understand why people find them confusing. They trip me up too, and I write a lot of Svelte. I think it would have been better if Rich had added something like the computed/useEffect style of this concept, but it would have looked very out of place in the rest of Svelte which is probably why he didn't do it.
pragmatic 4y ago
Reactivity is hard in any platform. If you don't like those, I wonder how you'd like the extensive use of rxjs in Angular. I think svelte has taken the best part of the rxjs observable pattern without the PhD level of insanity in the reactive frameworks. Beyond debouncing and throttling, the uses for rxjs style reactive patterns (all the variations of Subjects) gets super confusing fast. (Look at a moderate sized Angular app and you see the horror of types and brackets needed to handle http calls and errors correctly, for example).
butterfly771 4y ago
Maybe you need vue3 .value

junon 4y ago

If you want something that is a bit lighter weight, check out Surplus. It's been around for ages, is used for real projects, and has a lot of the same design patterns Svelte adopted, without a lot of the extra language semantics.

b0afc375b5 4y ago
Do you mean this? https://github.com/adamhaile/surplus https://github.com/adamhaile/surplus
- junon 4y ago
  That's the one.

pixard 4y ago

I work with React (Next.js) on my main project and while I don't appreciate some things generally I haven't had any issues and Next.js in particular has been great. I also find JSX stellar. I used Vue from 0.12 until around ~2.5, I really liked it at the beginning (coming from a jQuery only world) but I was forced into learning React for React Native and then I kind of standardized on it for a while and Vue fell off. I used Svelte for a side project recently and it was quite enjoyable but I do really miss JSX and I don't like the $: syntax. I plan to give SolidJS a try on my next side project and then I'll standardize on either Svelte or SolidJS for side projects and React for big things. Since Svelte and SolidJS are such great options for smaller things I kind of don't have a use case for Vue anymore, but I do remember it fondly.

mccorrinall 4y ago
I like NextJS too, except for the API part. The DX is so poor compared to e.g. fastify. Want to only allow a specific http method for this route? Have fun adding boilerplate. Want to throw a specific http error like 403? Have fun writing this by hand. It also lacks schema validation (I’d love to see ajv here) and openapi gen. You have to write everything. by. yourself.
- scrollaway 4y ago
  I like NextJS for the frontend and django-ninja for the backend. django-ninja has all those things you mention and way more, and has a very rich backend ecosystem thanks to being in the django world. https://django-ninja.rest-framework.com/ https://django-ninja.rest-framework.com/ FastAPI is also great but a little more involved. It's good if you don't want to be in the Django world.
  - mccorrinall 4y ago
    Yes, there are many solutions to this problem if you don’t mind hosting yet another service, but the best would be if the integrated API routes wouldn’t suck so hard.
zozbot234 4y ago

s-lambert 4y ago

I don't see how Svelte is "React without all of the bullshit", Svelte really seems like the complete opposite of React. To me it's more like a modern Angular 1 where it's a magic HTML DSL (just now with a compile step to make it more optimized). For instance, Angular 1 had the ng-if attribute in templates for optionally including parts of the template based on JS values and Svelte has {#if ... } blocks in templates that do similar. Whereas React is just JavaScript, you just write a function and ifs like anywhere else. Seeing Svelte take the global variables (are they now not global because of Svelte's compiler? probably) in a <script> tag and binding them to HTML elements seems too magic for me. Whereas at least with React, I can sort of understand how it works under the hood and could probably write a poorly optimized version of it without thinking much about it. React isn't perfect by a long shot so I think something will eventually overtake it, but I hope it's not magic HTML templates, that seems like a step back.

pragmatic 4y ago
If you mean Stores, those are Observables (implement that interface similar to rxjs which is used heavily in Angular) It's a solid pattern that solves a lot of issues in a pragmatic way. Keep in mind "modern" react is easy less clunky, so the whole state management thing is easier with hooks so it's not as impressive how easy svelte is now at it was when it was introduced 5 years ago.
ttfkam 4y ago
I think you've missed something fundamental. Imagine you're using a spreadsheet app. You put data into a column. Then in another column you write a formula referencing the first column. Then you write a sum formula to put it all together. Oops! One number is wrong in the first column, so you update it, and everything updates automatically. No muss. No fuss. This is the model that Svelte works in BY DEFAULT. The compiler determines a dependency tree. Variable "b" depends on "a" in a component, you've bound "b" to an element for display, and somewhere, your components logic changes the value to "a". Boom! UI is updated with latest calculation, and all you had to do was use plain ole JavaScript. No useState(). No complete DOM subtree rewrites since the virtual DOM was marked dirty, just the bare minimum of DOM changes automatically. Reactive variables instead of linking up reactive functions within a reactive framework API. In React, for performance reasons, you often have to explicitly mark segments of a component (or whole components) that you know won't change so that it doesn't recalculate every time there's a minor property update. All of that goes away in Svelte. There is no reason to mark segments for no recalculation in Svelte in the first place. It just works, and it just works with what looks to you as the developer as 99% HTML, vanilla JavaScript, and standard CSS. I imagine most folks who love React syntax have Stockholm Syndrome at this point. Having written for web since 1996 or so, I've seen the progress as well as the fads. I still remember document.write(…) and Netscape's layer tag. I remember the JQuery revolution after the missteps of Prototype. I know full well why React (and Angular and Vue) were created as web sites became larger and more complex. And I'll tell you truthfully, I haven't been this excited about a return to relative simplicity as evidenced by Svelte in a long time. The strategy behind Svelte is an industry refactor that's been a long time coming. Even if Svelte is not the eventual "winner", I truly hope it's something closer to the Svelte model than the current old guard of Angular, React, and Vue. You may claim to hate magic, but I have some bad news: there is magic at every level going down to the lightning injected into rock to make it think. The fear of magic is the same argument used by the assembly programmers when C first emerged. "Too much magic. Too easy. Too much loss of control." Never mind that it was an order of magnitude easier to learn, modify, and maintain.

preommr 4y ago

My 2c: I think svelte is overhyped and a poor solution to the problem it's trying to solve. First of all, I am tired of ridiculous metrics like how small svelte is when it's a really small example, and it's one or two lines of initial boilerplate. The thing that really set svelte apart was it's better syntax and experience when it first came out. I think that was when react class components, and vue 2 was still prominent. Look at the react and vue 3 examples now. They're really close. Vue 3 in particular looks a lot like svelte with vue's sfc. I don't even think the dissapearing part about svelte is that important. That kind of performance is rarely going to matter before other bottlenecks. And if it really is that crucial, there's nothing stopping either react or vue 3 from doing something very similar. Vue 3 already has sfc that go through a "compile" process, and it uses getter/setters to make targetted changes. There's also some considerable challenges to svelte: it's brining in custom syntax to really tackle the problems with reactivity. That's honestly really good if we could get one unifying system. It would be wonderful. But that's a tall order. Given how much traction these other tools already have, I don't see svelte ever fully dominating. Which makes it's extra magic and custom language features even more of a burden. People already complain about vue's few dsl's in the template or react's hooks. Finally the eco-system for the other tools have come so far. Given how much the gap has closed, and how much farther the other tools are, the better ecosystems make them much better choices. Also as much as I respect Rich Harris, it's a tough sell against people the momentum of something like Facebook or even Evan You with vue and related tools like vite. I know he's working full-time on svelte now at vercel, but the corporate side of this as well as maintaining a community around this is another hurdle. Say wha t you will about react, nobody got fired for choosing it. On the other hand, it's a punch in the gut to jump on something like sapper and then have it be oddly deprecated/rolled into sveltekit.

7sidedmarble 4y ago
Just throwing this out there, but have you considered that React and Vue in fact also have custom non-JS syntax? JSX is not valid JS, parsers had to be written to work with it. And Vue uses templating syntax in HTML, just like Svelte. Svelte doesn't have any non-native syntax in the JS parts, just the templating.
- 4y ago

thunderbong 4y ago

I've recently started working with Svelte and have been loving it compared to React. A lot of stuff flows through very intuitively. However, for any front-end framework, the UI is paramount, and the most full-fledged component framework I found was Carbon Components[0]. I've heard rave reviews about Quasar[1] for Vue 3. Are there any equivalent UI component frameworks for Svelte? [0]: https://carbondesignsystem.com/developing/frameworks/svelte/ https://carbondesignsystem.com/developing/frameworks/svelte/ [1]: https://quasar.dev/layout/grid/row https://quasar.dev/layout/grid/row

jdthedisciple 4y ago
Uhm, Carbon supports Svelte too ...
- d1sxeyes 4y ago
  Yes, I think that's the point. Carbon does, but there aren't (many) others.
ibz 4y ago
I'm using Svelte with Daisy UI [0] which is based on Tailwind CSS. It is incredibly simple and beautiful. [0]: http://daisyui.com http://daisyui.com
- mkl 4y ago
  Daisyui.com seems to disable scrolling with arrow keys, page up, and page down. Is this a general problem when using Daisy UI, or is there something wrong with the page?
engido9740 4y ago
You might check out Skeleton (full disclosure, I'm one of the creators) https://skeleton.brainandbonesllc.com/ https://skeleton.brainandbonesllc.com/ https://github.com/Brain-Bones/skeleton https://github.com/Brain-Bones/skeleton When my partner and I were getting started with Svelte we noticed there was plenty of wrapper libraries, but very few that lean into the benefits of Svelte specifically. We wanted something like Mantine from the React world. We're still early days (open source and public for about a month) but the feedback has been really positive. The one thing to note is we pair heavily with Tailwind, so if that's not your jam the library may not be for you. However for any sizable app where you're building with a design system, something like this can fit right in. Hopefully you can give it a try and it helps out! My username is the same on our Discord if you need any help!

Scootwilli90 4y ago

[dead]

Tade0 4y ago

One (sort of accidental I assume) selling point of Svelte that wasn't mentioned here is that the stack trace is legible. Working with this framework I found that it was very easy for me to trace back to where the change that caused the error happened. You don't get this in most frameworks, which hide everything under layers of event handlers, schedulers and whatnot.

Sammi 4y ago
This should really be an explicit goal of a frontend framework and a pain point I have encountered often in React and Angular. How are you supposed to debug stuff if the stack trace isn't even legible?
- solardev 4y ago
  Does using a debugger help? (like in VScode or IntelliJ). The React stack trace is so useless I find myself just stepping through the code and setting breakpoints when I need to actually locate the source of an issue. Is there a better way, in React or other languages?

pugio 4y ago

Just published an app on both app stores using Svelte and Ionic. Svelte was a pleasure to use - everything seems like just enough of what you need, without adding any additional mental overhead or complexity. I'm really looking forward to the stable release of SvelteKit to use as the backend for my next project.

lakomen 4y ago
That's the thing... it's always never stable always in development. I'll habe to check this combination put however. Now the price question, did you use an oidc client? If so which works with both app and web?

FpUser 4y ago

Personally to me the best framework is no framework at all. Instead I use libraries of code and Web Components. The libraries are either my own or some existing ones. Overall writing web front end this way for me is the most natural way. In my personal experience I spend less time creating the web front ends this way comparatively to when using "frameworks". No "compiling" is needed either, other then optional minimization.

intrasight 4y ago
I agree. The "DSL" and "compiling" aspect of frameworks scares the crap out of me frankly. And on top, it's all happening on my poor users device - well not for Svelte apparently. Let's have a look at this "compiled" JS. Here's an snippet from the volume slider in his example: function b() { v = W4(this.value), h(0, v) } I understand that this is "compiled" - but really it's not - it's EcmaScript. If I wrote code like that, I'd get fired.
- bdougherty 4y ago
  You are looking at minified output there; of course nobody writes that. You can see the compiler output in the "JS output" tab here, it's very easy to follow: https://svelte.dev/repl/12aefec27f0d4ec5ad85ab7e5a123642?version=3.50.0 https://svelte.dev/repl/12aefec27f0d4ec5ad85ab7e5a123642?ver...
  - intrasight 4y ago
    Got it. It was both compiled and minified.
andsoitis 4y ago
That can work relatively well for projects where there are a handful of engineers, but I wonder whether it doesn’t be some much harder as your team grows to 20+ engineers working in the same UI code base?
- FpUser 4y ago

owlbynight 4y ago

Have done a couple of projects with sveltekit, including a redesign of my personal website and an internal tool for myself and colleagues for quality of life. I liked working with it, but I regret not waiting for 1.0 to really dive in. The breaking changes are getting annoying, with the most annoying being recently with changes to its routing. It seems like every time I make a small change and go to rebuild my sites, I'm dealing with a new headache. Don't get me wrong, the changes are probably warranted to avoid Angular-style major version catastrophes, but for me, the draw to svelte is its ease of use. If I can't go a day without having to go digging for a fix to a breaking change, it's really not that easy to use. I'm mostly a hobbyist dev and don't have the time to keep up with it. Also, the new folder-based routing is clunky as hell. I'll probably spend some time learning Next.js for future projects. Its ecosystem most likely trumps the syntactic supremacy of svelte currently. That said, I don't doubt svelte will introduce something that reels me back in again in the future.

laundermaf 4y ago
I think "breaking" is really part of Svelte’s life. I used Svelte since v1 five tears ago and basically I had to rewrite those small projects every time I touched them.
- auggierose 4y ago
  One tear for each year?
pragmatic 4y ago
I purposely avoided sveltekit in my current project. It's not 1.0 and it clearly states that. I don't need it. Only seems to bring SSR which many projects simply don't need. Svelte and vite are working fine for me. My current project is tied for the most complicated front end project I've built. It's offline first, pwa, service workers, indexeddb, etc etc. No problems so far. Could use better documentation but what projects can't.

b0afc375b5 4y ago

Is anyone writing svelte in emacs? How's the tooling there? I'd like to know if it's good enough.

nebqr 4y ago
web-mode supports .svelte files (provided you add the engine to the alist). I haven't made anything too complicated with it but it seems to do the trick.

qwertox 4y ago

I'm afraid of switching to Svelte because of what happened to Angular. I switched to Vue because of Angular's 1.x to 2+ upgrade. Then I was faced with the Vue 2 to Vue 3 upgrade, which now has a lot of my code in a state of mess. Svelte has always looked so promising, just what I wanted. But my fear is that if I ditch Vue and jump to Svelte, it will do the same thing as any other framework did: become a monster and cause problems with all my dependencies. So I'm staying with Vue.

actionfromafar 4y ago
Haha, I've had this reaction vs other technologies. But in hindsight your comment (which could have been mine a few years back!), is really funny. Basically, are you staying with Vue because it's the monster you know, or why don't you fear Vue becoming a monster? :)
adhoc_slime 4y ago
I did the vue 3 bump a while back and Evan You did a fantastic commit by commit repo to follow along and there's even a migration build of vue 2 which warns you of all the areas where your app will break in vue 3, really fantastic. I can't claim that that upgrade was painless, it took a few days with an app with > 10 pages, >20 custom components and I had to push ahead with re-writing a 3rd party component or 2 that was only vue 2 at the time (honestly I should never have used them in the first place. reap what you sow). But build times are faster, my bundle size is a lot smaller, I'm really pleased with the new features, and I'm a building faster as a result.
dmix 4y ago
I upgraded to Vue 3 and Pinia and my project got 2x cleaner. Vue 3 was designed with large complex projects in mind. Vue 2 is probably easier to grok when starting out or for small projects but the functional modularity, typescript integration, and reduced boilerplate with 3 really starts to show in large projects. I did it slowly over a year and besides having to wait for some dependencies to catch up it was mostly painless. Although the biggest pain-reduction was getting to use Vite instead of Webpack (shudder). The build tools not sucking is so critical when doing front end dev.
4y ago

Justsignedup 4y ago

Just one note. The article spends a lot of time talking about how all react returns must be wrapped..... Dude, just use fragments it's just an empty tag in the jsx compiler and adds like zero effort. Other than that, seems interesting. Didn't actually function in the embedded browser used in my hn client so that's bad... But overall seems like it's worth a try.

deleted 4y ago

[deleted]

amgreg 4y ago

We use Knockout JS extensively in an old codebase and its two way data bindings and computed values depending on those bindings are a mine field. The uni direcional data flow of React in my opinion has been a breakthrough. How have folks found using two way bindings in Svelte (and other frameworks?)

2OEH8eoCRo0 4y ago

Is Svelte blowing up in popularity? I've never heard of it until seeing it multiple places today. https://github.com/containers/podman-desktop https://github.com/containers/podman-desktop

pragmatic 4y ago
Yes. https://survey.stackoverflow.co/2022/#section-most-loved-dreaded-and-wanted-web-frameworks-and-technologies https://survey.stackoverflow.co/2022/#section-most-loved-dre...
- andsoitis 4y ago
  According to the survey you linked to: Phoenix overtakes Svelte’s spot as the most loved web framework. React.js completes its fifth year as most wanted. So I’m not sure that’s an unequivocal “yes”.

shroompasta 4y ago

Svelte/Solid JS and reactivity are great; Reactivity definitely is a better philosophy than Virtual DOM diffing. However, I'd like to add one more reason to the "arguments adopting svelte" and that is native development. Svelte Native doesn't even come close to touching React Native in maturity, and I'm willing to bet it never will. For a startup to consider a frontend technology, React is easily the better choice in terms of capital because there is no way you're going to build a production ready native app in Svelte Native. If you were to build your web client in Svelte, then you would have to spend capital on another team to build Native (God forbid in React Native), in which you would split teams on ios and android. Or you could you use just one team for React + RN altogether and save you possibly millions in capital. Also I'd like to mention that the NYT article that was linked to showcase Svelete actually showcases more of D3 instead. Mike Bostock also used to work for NYT and NYT absolutely loves using D3.

revskill 4y ago

React Component is just JS function, which made things simple to learn, debug and understand. Svelte is a compiler which strip unnessesary JS code in the output. Wish: Combine both, don't compare.

igtztorrero 4y ago

Never use Svelte but looks very easy to use. I think this post will make it to the top, very interesting comments a lot to learn. Thanks Hackersnews !!!

sod 4y ago

Single file components like .svelte and .vue are nice at first glance. But I want typescript, eslint and prettier understand my code natively and not wrapped in custom syntax and smushed into one file that every tooling now has to support. Maybe it's finally time for someone to standardize this - even if just pointing at what vue & svelte already do - so every tooling can go ahead and support amalgams of filetypes in a single file for any framework that wants to work like this. It's a wonder how react managed to force their jsx and angular forced annotations into typescript just to get a good typescript experience out of the box.

girvo 4y ago
Funnily enough, IDEs a decade ago (more, even) solved this for PHP already, as even back then a lot of PHP was still HTML and PHP (and JS) intermixed in one file. It’s a shame we haven’t solved it properly in modern editors without having to rebuild the tooling over and over again for every new framework.
- pragmatic 4y ago
  Also asp and asp.net etc. I'm sure there's some on the java side I'm forgetting also.
  - girvo 4y ago
    Oh heck, yeah you’re right! Everything old is new again I suppose. Guess that makes me old now if I’m noticing it
    - andsoitis 4y ago
      Or you’re new again!
- magic123_ 4y ago
  You just gave me flashbacks of the 3000+ lines .phtml files I was working on a few years back, definitely not the most pleasant experience I had as a developer.

logicalmonster 4y ago

I do like working with Svelte, but the most pleasant developer experience I've had in JS has been in Mithril.js with it's small and easily understandable API. I don't understand why there's not a bigger ecosystem and traction around that.

rubenfiszel 4y ago

At windmill (https://github.com/windmill-labs/windmill https://github.com/windmill-labs/windmill), our whole frontend is in svelte, we love it, the performance are second to none and the dev experience is great. But finding svelte dev is proving itself harder than I thought. So there is that issue as well.

widdershins 4y ago
Surely any reasonably smart React dev will become productive within a very short period of time? Or is it that people simply don't apply when they see Svelte on the tech list?
- mhuffman 4y ago
  It must be the second. Svelte is by far the easiest to understand framework (of the "big" ones) that I have yet encountered.

mcv 4y ago

"Introducing"? Hasn't Svelte existed for a couple of years already? I remember a speaker talking about it on a conference some time before Covid hit. Still, it's a great article that does a good job of showing how easy Svelte is. I think it looks most like Vue, but simpler, with even less boilerplate. Of course keeping everything so simple does make me wonder how it would deal with more complex situations where you really do need a lot more structure.

enraged_camel 4y ago
>> "Introducing"? Hasn't Svelte existed for a couple of years already? So has your significant other at the time you introduce them to your family, right?

nileshtrivedi 4y ago

I loved using Svelte for these two open-source projects but haven't yet an opportunity to use it at work: - An SVG-based graph dataset editor: https://codeberg.org/nilesh/grapher https://codeberg.org/nilesh/grapher - A curated collection of educational resources: https://github.com/learn-awesome/learndb https://github.com/learn-awesome/learndb Compared to React, developing with Svelte felt like a breath of fresh air.

deleted 4y ago

[deleted]

lexx 4y ago

Svelte is brilliant. The new things you have to learn are minimum. New devs can be productive since day one. I don't know why I would ever want to use vue or react.

lakomen 4y ago
Larger ecosystems
- FractalHQ 4y ago
  Svelte’s Ecosystem is actually the largest of them all once you realize all Vanilla libraries work out of the box in a Svelte file without an “x-for-React” version.

5350-uiop-1130 4y ago

i would like to read a comparison of the major js frameworks from a practical sense of how they can help me meet deadlines faster, as opposed to developer experience i'm not that bothered about the various technical trade-offs, i mean they sent a rocket to the moon using assembly language i just want to know how {newThing} can help me get shit done at work faster with less headaches.

fulafel 4y ago

Svelte is too married to JS. I hope JS gradually becomes just a compile target for other languages. React is great because you can use it nicely from ClojureScript (via Reagent).

caporaltito 4y ago

Hooray! Yet another framework which will do what Angular already does for years.

vyrotek 4y ago
I love the kitchen-sink and batteries included of Angular. It made our small team very productive on large projects. But I really dislike the separated component files convention. On the other hand, I love React single components but hate having to shop-around and piece together every basic platform feature.
- neon_electro 4y ago
  "hate having to shop-around and piece together every basic platform feature." Can you elaborate on what you mean by this?
  - rk06 4y ago
    Say, you are making an app, and find yourself needing a router, state management library. Angular: use inbuilt router and rxjs Vue: use vue router and pinia React: shop around third party libraries. You can shop for alternatives for both angular and vue as well, but they have a first party solution. While react does not and will not have a first party solution for this and many other use cases

SSchick 4y ago

Can someone with more experience in the 3 frameworks give some insights into the type safety ergonomics? I'm extremely biased towards react due to the fact that it effectively brings very strongly typed templates/components to the table, which has saved me easily a hundred hours of debugging/testing over the last 4 years. It also makes components MUCH more accessible due to the declarative nature of props (and their respective types).

FractalHQ 4y ago
30k loc into this project with Svelte and Typescript and everything is 100% fully and correctly typed in strict mode with no implicit any

no_wizard 4y ago

Svelte is what Ember could have been and where I suspect Vue is ultimately going (in their own flavor of course). If you really like templates and the constraints they bring over being closer to plain JavaScript, Svelte takes that to the most logical "extreme". On the other hand, if you like leveraging most JavaScript features then React, Preact, Inferno, SolidJS and especially Lit are much closer to allowing developers to use any part of the language that is useful, with some exceptions for reactivity. Lit in particular is 100% JavaScript primitives and very little sugar on top.

Existenceblinks 4y ago
My endgame is lib like uhtml/lit-html(alone), custom element, event delegation technique and global store. You can write any fancy widget with this. Writing your own (event -> update -> render) is not rocket science, just utilizing the platform! (seriously, don't make fun of platform, it's legit)

mcluck 4y ago

I had a good time trying out Svelte a while back. However, at least at the time, TypeScript support for it was nearly non-existent which makes it a non-starter for me.

shirogane86x 4y ago

I'm still very skeptical of the random templating syntax, of the weird reactivity with gotchas and most of all, of two way databinding. Wasn't two way databinding one of the reasons we got react (and one of the reasons i bought into it) back when angular was the go-to? I feel like every time i try to use two-way-databinding it ends up in a jumbled unintelligible mess where I'm chasing mutations around... Personally, if I have to try out a new framework, I'll probably try out solid instead.

swyx 4y ago
svelte’s 2 way data binding is only within a component, and actually is 1 way if you look at the compiled output. very different than say angular, and pretty much equivalent to what you manually write with setState calls. this is such a common misconception i feel like we should put this in the FAQ somewhere. people are fixating on the wrong thing when they go “oh ho 2 way binding bad”. its local and its compiled away, its fine.
- shirogane86x 4y ago
  Thank you very much for the explanation! I agree with you that this information should be somewhere, especially seeing as I (mistakenly) thought that too, I probably would've had less of a knee-jerk reaction to it if I knew that it's effectively syntax sugar. I'm guessing I'm not the only one who has really bad memories of angular... Sorry for the misunderstanding!
  - swyx 4y ago
    yeah no worries it’s a very common superficial reaction! we just spend a lot of time explaining it: https://twitter.com/rich_harris/status/1420214295242199041?s=21&t=oT1R6bfLJpHjRu7ugYaMEw https://twitter.com/rich_harris/status/1420214295242199041?s... https://twitter.com/rich_harris/status/1147902393293688834?s=21&t=oT1R6bfLJpHjRu7ugYaMEw https://twitter.com/rich_harris/status/1147902393293688834?s... https://www.swyx.io/svelte-why#two-way-binding https://www.swyx.io/svelte-why#two-way-binding

jmull 4y ago

I'm using Svelte/Sveltekit for a project with about 80 pages (as the designer conceives them -- there are repeated patterns of course... there might be 30-40 sveltekit pages, though some are fairly complex.) It's been great. I have no experience with Vue, but I'd rather not work more with react.

FractalHQ 4y ago
Vue is just Svelte with extra steps.

y-c-o-m-b 4y ago

I still think Vue (especially Vue 2) is the greatest of them all. I've worked professionally with Angular, React, and Vue. Each for several years. Vue is easily the winner for me with the syntax that closely matches native HTML and JS/TS and how it encourages clean separation of concerns and clean code. JSX/TSX is absolutely the worst for the latter, it's like the wild west. "But you don't have to write it that way" - yeah ok, but when you work in a large organization it's going to get written that way by your peers; good luck trying to stop it. Angular is just a clusterfuck of pipes and observables that require higher cognitive load to unravel when trying to understand a semi-complex block of code. Contrast with Vue where I can near instantly understand what it's trying to accomplish. This shit right here - {#if <condition>} {:else} {/if} - is why Svelte is deterring me. For the love of god, can we stop coming up with weird custom syntax for templating code? This is one area where Angular also pisses me off: *ngIf for example is just as hideous. With Vue: v-if, v-else. You add it as an attribute to native html, it's dead simple. No weird symbols, no braces or other oddball shit I have to look up when I step away from it for a few months and come back. It just makes sense right away.

lakomen 4y ago
Amen brother preach however I don't agree with the last paragraph. It's just a different way of expressing it and in React that's actually straightforward, all your interpreted logic is in {}. Each of them has their upsides but personally I use Vue because it just worksTM. And it has vuex-orm, which albeit not perfect is the only no bs client state orm that you can query any way you like and supports relationships. I was in an Angular discord and dared speak against the pipes/streams. They has their place but ultimately they're too complicated for every day use. No it's not an issue of me not being able to deal with them. It's a too complicated way. Sometimes all you need is 1 variable, to which the moderators there said I'm doing it wrong, no it's in the data store and I want that 1 var's value, I have to break my fingers just to get it, a block of code to get 1 value, since I can't write if a == 10... Well they kept suggesting I'm too dumb to handle it and in the end banned me for criticizing their holy framework. I said that I've recently worked with Vue, you have to try other things too, after 3 years of Angular and that Vue was a productivity increase and that I finished 2 projects with vue in the same time I did half a project in Angular. In the end Vue won it for me, I tried React also NextJS and React has some nice things, it's more JS , more straightforward than Vue but its ecosystem is a hell of commercial offerings. Want to use MUI? Well pay up. Redux-orm complicated because Redux is complicated. Svelte, I'd love to use it but it's always in development it seems and no "proper" or well maintained packages seem to exist. I did 2 experimental projects with Svelte, it's nice and it's fast but it's never there... always in development

michaelwww 4y ago

I was curious about what Svelte "compiler magic" was so this is what I found (I may be wrong): The compiler wires up all the reactive JavaScript ahead of time, while Angular and React do it at run time. Svelte also does DOM manipulation directly and is fast because browsers have improved very much since React was first created. One of Svelte's taglines was "You don't need a virtual DOM". That said, I haven't used Svelte to see what kind of JavaScript it makes and how easy it is to reason about once compiled.