Check out the Cheat Sheet to get a quick rundown of common Svelte features.
You can't write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.
Frameworks move the complexity around, away from code that you had to write and into code you didn't but it’s still there and it is shipping to the browser.
The issue is with the frontend frameworks is that we're shipping too much code to our users. It's not just the network time that'll kill your app's startup performance, but the time spent parsing and evaluating your script, during which time the browser becomes completely unresponsive. On mobile, those milliseconds rack up very quickly.
Something important is happening in JS land: the mega-frameworks are crashing on the rocks of CPU and network limits. -Alex Russell
With Svelte you write your components using HTML, CSS and JavaScript and during your build process svelte compiles them into tiny standalone JavaScript modules. By statically analysing the component template, it can make sure that the browser does as little work as possible.
The Svelte implementation of TodoMVC weighs 3.6kb zipped. For comparison, React plus ReactDOM without any app code weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
It's basically as fast as vanilla JS, which makes sense because it is vanilla JS – just vanilla JS that you didn't have to write.
Some key points that make Svelte stand out from the other players in the market is:
Mostly frameworks work by adding them to the page with CDN or adding their package but as svelte works on build time things don’t work this way, the best way to use Svelte is to integrate it into your build system – there are plugins for Rollup, Browserify, Gulp and others, with more on the way.
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.
Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.
In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates markup (HTML), styles (CSS) and behaviours (JS) that belong together.
A component’s HTML, CSS and JS is written into a .svelte file which will later be compiled to vanilla JS.
HTML is open, CSS in style tag and JS in script tag.