Question

How does Svelte.js work?

Answer 1

Svelte is a front-end UI framework so, we write components in HTML files. The HTML files can optionally include <style> and <script> elements to encapsulate CSS and other behaviors. You can easily learn Svelte.js template syntax.

The Svelte.js compiler converts the HTML component files into modules using the command line interface or various build tool integrations. These modules contain low-level DOM manipulation, according to our app. It means Svelte doesn't follow any data-binding technique or DOM diffing, or any of the other tricks the other frameworks have to use to render our UI.

Example:

HelloWorld.html file:

1. <h1>Hello {{name}}!</h1>  

app.js file:

1. import HelloWorld from './HelloWorld.html';  
2. var app = new HelloWorld({  
3.   target: document.querySelector('main'),  
4.   data: {  
5.     name: 'world'  
6.   }  
7. });  
8. app.set({ name: 'JavaTpoint' });  

Output:

Hello JavaTpoint