Svelte vs MarkoJS

Question

I’m working on rebuilding a new project for many reasons. Currently the project uses Marko. I’m investigating if it’s worth moving to svelte. I actually didn’t find a big difference between them. Does one of them has advantage on the other? Why the big hype around Svelte?

Answer 1

In my view Svelte's popularity is based on the fact that:

1. it tends to lead to smaller JS client bundle sizes than the big three (React, Vue, Angular) and can still outperform them on a broad range of applications, especially on low spec/power client devices.
2. it's fairly easy to learn once you have a good grasp of JavaScript, HTML and CSS.

I would go as far as saying that Svelte feels more like a natural extension to the browser platform while the big three tend to do "their own thing" (Angular being an "opinionated" framework, React obsessing over fn(state) => view and Vue sitting in between). The code savings (and "client battery friendliness") in Svelte are largely due to it not using a VDOM like React and Vue - that translates to less code downloaded and fewer CPU cycles burned. Also Svelte uses a compiler to generate code so it only includes what is actually needed - even before the bundler's tree-shaking gets to do its thing. Svelte uses a reactive update model instead (there are actually two systems: reactive assignments and stores)

The downside to Svelte is that at this point in time its ecosystem is much smaller compared to any of the big three - but that is to be expected as it is a much younger tool.

Rich Harris has given some excellent talks about Svelte:

• Rethinking reactivity
• The Return of 'Write Less, Do More'

See also MDN: Getting started with Svelte

However just like React and Vue, Svelte's core design is based on CSR - Client Side Rendering. So while all of them have SSR solutions (Next.js - React, Nuxt.js - Vue, SvelteKit - formerly Sapper) these solutions tend to introduce some accidental complexity because SSR wasn't part of the initial design.

This is where Marko is different. It started as a server-based solution with a client-based aspect. Back in 2017 that client-based aspect was VDOM based. One of the advantages of Marko is that it supports Async Fragments - streaming of HTML from the server - out of the box. Now Marko plans to ditch the VDOM and replace it with fine grained reactivity to reduce the size of shipped code and improve performance on low-end client devices. Ryan Carniato of Solid JS joined the Marko Team in July 2020 to make that happen.

In that sense Marko is unique as it implements an approach that tries leverage the strengths of both parties involved in any web application - the server and the client - in an integrated manner. As such it seems ideally suited for the Islands Architecture something that needs a bit more work in Svelte (Elder.js and its backstory).

• Maybe you don’t need that SPA
• A First Look at MarkoJS
• FLUURT: Re-inventing Marko
• Marko: Designing a UI Language

In terms of taglines: Marko is HTML re-imagined while Svelte is using a superset of HTML.