Any thoughts on Svelte?
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser , Svelte shifts that work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
Sadly never worked with it – just heard a lot of good feedback from JS devs.
It’s kind of like Rust for JS, meaning that it compiles to “native” JS without you having to carry the framework with you. Which I quite like.
I’ve gone through a few Svelte tutorials but haven’t built anything with it yet. It looks great so far. This tutorial provides a good, quick intro. The text version is linked to in the YouTube description.
Shall we split these posts into a dedicated thread about Svelte? Sounds like it could be interesting to a lot of people 
That would be great^^
…done 
Is there any routing support? I had a quick peek through the docs and nothing stood out to me.
I’m not sure but from a quick search, it looks like there are a few options:
There’s also Routify which Rich Harris (Svelte and Sapper creator) mentioned favorably.
Sapper seems to be the easiest to get started with. There might be a few little gotchas with authentication because Sapper is server-side rendered.
You could also use routing from Elixir/Phoenix etc. and just include Svelte components in your pages.
There are a few libraries for such things, for example Sveltex.
I’ve used it, both svelte and sapper.
My opinions:
The good:
It’s reactivity works well, you get used to the special syntax bits very quickly, so don’t be afraid of it.
Overall it’s quite fast, both for those synthetic benchmarks(look at how I render a million dom nodes with my library instead of using canvas!) and for real use cases.
It comes with a state management solution(stores), animations and transitions out of the box.
Sapper makes sense, and is a fast and quite batteries included solution for both SPA and SSR. You can get an decent SPA with SSR website up and running in a couple minutes. Handling cookies can be a bit confusing at first, though.
It’s relatively easy to integrate with other js libraries, I wrote some bindings for prosemirror while learning it and it worked quite fine.
The bad:
It’s output doesn’t work in legacy edge nor older browsers(try to see any NYT article featuring Rich Harris visualisations on an older browser, it just doesn’t load).
There’s no way to access child nodes. If you want to wrap individual childs(say, receive a list of components and wrap each of them in some other component, like you would do with special list items), you can’t.
For example, I created a ListStream component that imitates discourse’s cloaking behaviour(unmount out of screen dom nodes), and I had to pass the list items as a prop for the ListStream to wrap them, which is a horrible workaround in my opinion.
There was a discussion about that in the svelte’s discord when this article was published and there was no solution. Responses from contributors were too defensive from my pov(part of that was valid: the medium article wasn’t particularly good, but it had valid criticism on svelte’s lack of reflection) and ranged from “yes you can” or “why would you do that”, but no examples of how is it possible was given, and it was proven to be impossible.
That discussion and Rich’s responses in his Why I don’t use web components article, where people addressed his criticisms and he replied with snarky comments or refused to continue the discussion left me with a bitter taste. I would like to see more transparency and discussions about svelte’s weak points too, so they can be addressed properly.
Typescript support was bad a couple months ago, though it is supposed to improve sometime in the future.
Overall it’s very good, and it’s worth trying out.
I’m not currently using it though, since I want to render as much html as possible with Elixir Phoenix and custom elements are more suitable for that usecase.
We’re at an opposite end of the spectrum working with Ember.js. Kinda maximalists 
Svelte has sounded like an option I might like. But I haven’t dived in and haven’t had an excuse to play with it yet.
Has anybody here actually used in production? I’ve been eying it for a while and it seems like it’s a great fit if you want to enhance your web app without going all-in on a framework like React or even Elm to a certain degree.
With svelte you can compile to custom elements, so it would be relatively easy to enhance the web app without going all-in on a framework. If you have a part of the page you want to enhance, you can create a svelte component and have it available as <cool-component> in your html. You don’t need to go the SPA way.
However, when it comes to enhance existing dom nodes, without re-rendering everything, I’m not sure of how it would work with svelte.
As a side note, Andrea Giammarchi’s libraries are excellent for that; the combination of uhtml(or lighterhtml ) with wicked-elements(or maybe even hooked-elements) is great for enhancing certain parts of your web app. I’ve been progressively replacing some parts of my app with custom elements build with those libraries and it’s been a nice experience so far. They’re tiny, fast and leverage the web platform instead of creating a whole new paradigm.
Worth noting, they’re libraries, and sadly not as popular as svelte(though featured in some webs and platforms like components.studio and webcomponents.dev ). It’s not a framework or platform with opinions on how you should design your components or the data flow.
You can render everything from the component, or enhance existing dom nodes like you would with stimulus, but for a fraction if it’s size. The choice is yours.
To me, the basic(and painful) problems when enhancing some part of a web page were automatically mounting behavior on certain elements, securely(and ergonomically) defining it’s markup(no innerhtml nor string concatenation), and efficiently re-rendering when data changes(dom diffing). Those tiny libraries helped a lot to solve those problems.
Svelte is not just compiled and faster, it’s also cleaner, and easier to write and read.
Svelte also supports TypeScript:
I think Svelte is the easiest framework out there.
If you know html, css, and js, then the only new concepts for you would be reactive variables “$:” and stores (observables).
It also has very nice and clean syntax (no “this” keyword everywhere like in Vue, or boilerplate like useState in React).
The only tricky parts are “tick”, stores (if you see an observable for the first time) and defered transitions. I personally use Svelte + Electron in production and I am super happy with DX. I feel much more productive compared to other frameworks like React.
And also by its compiler nature Svelte can be easily integrated with any 3rd party vanilla JS library.
I’ve been going through the tutorial on their site and I really like what I’ve seen so far!! I love the idea of Svelte components having everything (CSS, HTML, JS) within the component itself and how they can be used in any page not just a SPA.
I think I need to dedicate a good few months learning Svelte, TypeScript, NativeScript and everything else I need to catch up on! 
If anyone knows of any good learning resources please share
