What is Svelte?
Svelte is a different take on the idea of building UIs. Rather than being a library that runs in the browser to create your UI, it's a compiler that turns your component into simple JavaScript, with no need for virtual DOM diffing or any of the other techniques that UI libraries use
The web's JavaScript bloat crisis, solved.
- Svelte turns your templates into tiny, framework-less vanilla JavaScript.
- Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
- Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.
In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates markup, styles and behaviours that belong together.
Like Ractive and Vue, Svelte promotes the concept of single-file components: a component is just an .html file. Here's a simple example:
<!-- App.html -->
<h1>Hello {{name}}!</h1>
Svelte turns this into a JavaScript module that you can import into your app:
// main.js
import App from './App.html';
const app = new App({
target: document.querySelector( 'main' ),
data: { name: 'world' }
});
// change the data associated with the template
app.set({ name: 'everybody' });
// detach the component and clean everything up
app.destroy();
Video for Svelte
https://www.youtube.com/watch?v=wtL3SP7bu5Q
