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. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. Some features are:
- No Virtual DOM: Virtual DOM is pure overhead. As Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is generally good enough. That means less buggy code, and more time spent on creative tasks instead of tedious ones. But it turns out that we can achieve a similar programming model without using virtual DOM – and that’s where Svelte comes in. It retires the ‘virtual DOM is fast’ myth once and for all. As it compiles your code to tiny, framework-less vanilla JS – your app starts fast and stays fast.
Steps to create first Svelte project
Svelte project is created by using degit, a project scaffolding tool. In the terminal, you can instantly create first svelte project by using follow command:
# Create first svelte project npx degit sveltejs/template first-svelte-project # Change Directory to created project cd first-svelte-project # install the dependencies listed inside package.json npm install # starts the server on http://localhost:5000. npm run dev
Now we are ready to develop an application on Svelte!
The directory structure for Svelte project is:
- package.json: This file contains all the dependencies and dev dependencies required for the application. This file also defines a number of scripts reuired for a Svelte project.k
- index.html: There is a public folder which contain app bundle and an index.html file. This file is root HTML file for svelte application.
- Svelte files: Svelte apps are built using components that are written in .svelte files, which contain all the logic, styling and markup for the component.
See the Svelte guide for more information.