DEV Community

Discussion on: 1 Backend, 5 Frontends - Todo List with Rails, React, Angular, Vue, Svelte, and jQuery

Collapse
 
k776 profile image
Kieran Pilkington

This is nice comparison of frontend frameworks. Of course, I realise that there are many aspects not covered here, each framework is powerful for a certain purpose. For the above described example (simple todo app), I think my preference would be Svelte.

To me, React's use of useState and JSX makes things more complicated than things need to be. Angular's very specific function name and html tag attr names means I'll constantly be looking up the reference guide. I've heard good things about Vue, and it would probably my first choice, but the need for a specific export structure was enough to tip it into second place.

I think Svelte with its regular HTML, no specific state obj (all variables hold state), simple function use (on:submit and on:click), and easy to understand bind system takes the top spot.

One thing not clear, does Svelte know which parts of the DOM need updating like the other frameworks? e.g. if you add a todo at the end of the array, or update one, does it re-render the entire html tree, just the each loop contents, or just append/replace a single list item? Frameworks like React use the shadow dom to calculate changes, and Vue use "v-bind:key" to help the renderer update only those elements. My guess is Svelte would be slower here?

Collapse
 
alexmercedcoder profile image
Alex Merced • Edited

I don't think Svelte has VirtualDOM but it is Reactive, so the bundle size is WAAAAY smaller but wouldn't it be as performant in larger applications, not sure.