5 ms·

What's the state of the art with the next generation of JS frameworks, namely the ones without virtual DOM, such as svelte? My feeling since a few years is that

by ktpsns 6y ago

What's the state of the art with the next generation of JS frameworks, namely the ones without virtual DOM, such as svelte? My feeling since a few years is that this is where the new things happen (This impression is based on poor performance with more then 1000 reactive elements in VueJs2).

Cthulhu_ 6y ago
Is the problem in your case Vue, or the fact you have 1000 reactive elements? Haven't heard anything about Svelte in months / years, although usage is steadily increasing (https://npm-stat.com/charts.html?package=svelte&from=2017-11-11&to=2020-11-11 https://npm-stat.com/charts.html?package=svelte&from=2017-11...).
- swyx 6y ago
  if you ever want to check out whats the latest on svelte, i help run Svelte Society, the official-ish community org around Svelte: - https://twitter.com/SvelteSociety https://twitter.com/SvelteSociety - https://youtube.com/sveltesociety https://youtube.com/sveltesociety
- dmitriid 6y ago
  In addition to links in sibling comments, there's the official Svelte blog with regular updates: https://svelte.dev/blog https://svelte.dev/blog and this video from recent conference on the future of Svelte: https://www.youtube.com/watch?v=qSfdtmcZ4d0 https://www.youtube.com/watch?v=qSfdtmcZ4d0
jraedisch 6y ago
And also Web Assembly with the chance of sharing code between backend and frontend in other languages than JS.
mgechev 6y ago
Just a heads up. Angular does not use virtual DOM to reduce memory overhead. At build time, in Angular we've been generating instructions for efficient rendering and change detection since the early versions of the framework.
- buu700 6y ago
  Would it be correct to say that Angular (Ivy) works essentially the same way as Svelte?
  - mgechev 6y ago
    Or Svelte works essentially the same way as Angular? :) They are similar in a sense that both compile HTML to incremental DOM-like structure, but have their own differences.
jackpeterfletch 6y ago
Derviative - But I was thinking that it'd be cool to see a Svelte like plugin for Ktor. Im not 100% sure how it'd look, but I reakon with Kotlin Multiplatform you could have a full stack application, all in one multi-module project, all in the same language, in a language not dervived from Js. One to aseess when I get some time.
deckard1 6y ago
I've been using Svelte for the past few months. It's possible I haven't hit any of the downsides yet. With that caveat out of the way, I will say that I absolutely love it after using React for about 5 years. Here is why: 1. It's simple. The API can be read and fully understood in a day or two. The documentation is clear and their examples are simply wonderful. Seriously. Go through their tutorial (https://svelte.dev/tutorial/basics https://svelte.dev/tutorial/basics) or their examples (https://svelte.dev/examples#hello-world https://svelte.dev/examples#hello-world) or even their API docs (https://svelte.dev/docs https://svelte.dev/docs). It's all well-crafted. 2. It has CSS modules built-in. You don't need to install anything or configure anything. You insert a style tag, write some CSS, and your component gets style without stepping on global styles. 3. It has state built-in. It has a dead simple state protocol. You can even recreate a redux clone in about 20 lines (https://monad.fi/en/svelte-custom-stores/ https://monad.fi/en/svelte-custom-stores/). 4. It's compiled, which means it can do things other frameworks can't. Which also means you get actual messages from the compiler telling you what you are doing wrong and what you should be doing. The messages I've seen so far from svelte are easily some of the best compiler messages I've ever seen. 5. Minimal edge cases. There are a few edge cases (e.g. arrays and reactivity), but it's fairly easy to know when you're hitting one. 6. Way more flexible than React. Event forwarding, event modifiers, boolean class names (i.e. class:large adds the "large" class if "large" is bool and true), ability to create generic actions that can be added to any DOM nodes. Animation support built-in. Variable binding, makes it a breeze to create any form. Sapper is going away, but SvelteKit is being worked on. If you really need more than Rollup+Svelte.
ranyefet 6y ago
I think Solid fits the description. Similar to Svelte but more React-ish. https://github.com/ryansolid/solid https://github.com/ryansolid/solid

by ktpsns 6y ago

Cthulhu_ 6y ago

Is the problem in your case Vue, or the fact you have 1000 reactive elements? Haven't heard anything about Svelte in months / years, although usage is steadily increasing (https://npm-stat.com/charts.html?package=svelte&from=2017-11-11&to=2020-11-11 https://npm-stat.com/charts.html?package=svelte&from=2017-11...).

swyx 6y ago
if you ever want to check out whats the latest on svelte, i help run Svelte Society, the official-ish community org around Svelte: - https://twitter.com/SvelteSociety https://twitter.com/SvelteSociety - https://youtube.com/sveltesociety https://youtube.com/sveltesociety
dmitriid 6y ago
In addition to links in sibling comments, there's the official Svelte blog with regular updates: https://svelte.dev/blog https://svelte.dev/blog and this video from recent conference on the future of Svelte: https://www.youtube.com/watch?v=qSfdtmcZ4d0 https://www.youtube.com/watch?v=qSfdtmcZ4d0

jraedisch 6y ago

And also Web Assembly with the chance of sharing code between backend and frontend in other languages than JS.

mgechev 6y ago

Just a heads up. Angular does not use virtual DOM to reduce memory overhead. At build time, in Angular we've been generating instructions for efficient rendering and change detection since the early versions of the framework.

buu700 6y ago
Would it be correct to say that Angular (Ivy) works essentially the same way as Svelte?
- mgechev 6y ago
  Or Svelte works essentially the same way as Angular? :) They are similar in a sense that both compile HTML to incremental DOM-like structure, but have their own differences.

jackpeterfletch 6y ago

Derviative - But I was thinking that it'd be cool to see a Svelte like plugin for Ktor. Im not 100% sure how it'd look, but I reakon with Kotlin Multiplatform you could have a full stack application, all in one multi-module project, all in the same language, in a language not dervived from Js. One to aseess when I get some time.

deckard1 6y ago

I've been using Svelte for the past few months. It's possible I haven't hit any of the downsides yet. With that caveat out of the way, I will say that I absolutely love it after using React for about 5 years. Here is why: 1. It's simple. The API can be read and fully understood in a day or two. The documentation is clear and their examples are simply wonderful. Seriously. Go through their tutorial (https://svelte.dev/tutorial/basics https://svelte.dev/tutorial/basics) or their examples (https://svelte.dev/examples#hello-world https://svelte.dev/examples#hello-world) or even their API docs (https://svelte.dev/docs https://svelte.dev/docs). It's all well-crafted. 2. It has CSS modules built-in. You don't need to install anything or configure anything. You insert a style tag, write some CSS, and your component gets style without stepping on global styles. 3. It has state built-in. It has a dead simple state protocol. You can even recreate a redux clone in about 20 lines (https://monad.fi/en/svelte-custom-stores/ https://monad.fi/en/svelte-custom-stores/). 4. It's compiled, which means it can do things other frameworks can't. Which also means you get actual messages from the compiler telling you what you are doing wrong and what you should be doing. The messages I've seen so far from svelte are easily some of the best compiler messages I've ever seen. 5. Minimal edge cases. There are a few edge cases (e.g. arrays and reactivity), but it's fairly easy to know when you're hitting one. 6. Way more flexible than React. Event forwarding, event modifiers, boolean class names (i.e. class:large adds the "large" class if "large" is bool and true), ability to create generic actions that can be added to any DOM nodes. Animation support built-in. Variable binding, makes it a breeze to create any form. Sapper is going away, but SvelteKit is being worked on. If you really need more than Rollup+Svelte.

ranyefet 6y ago

I think Solid fits the description. Similar to Svelte but more React-ish. https://github.com/ryansolid/solid https://github.com/ryansolid/solid