Introduction

Svelte is an open-source front-end compiler which has an unique approach to execute the front-end code and displays it in browser in an efficient way.

Other frameworks like ReactJS execute the code in the browser itself, when the app is running. Whereas Svelte does it in a different way. It executes the code during the compile time, producing highly-optimised Vanilla JavaScript.

As compared to other frameworks, Svelte uses less concepts and tools to create a web application. For example, virtual DOM is present in ReactJS but not in Svelte.

Svelte is created by Rich Harris which is licensed under MIT License.

Creation of Svelte App

Note: Make sure NodeJS and npm is downloaded before creating Svelte App.

Step-1: Download and unzip the Svelte repo using degit method.

npx degit sveltejs/template <app-name>

For example,

Step-2: Go to the app directory.

cd <app-name>

For example,

Step-3: Run the application.

npm install
npm run dev

For example,

Step-4: Go to the link as shown in the above picture http://localhost:5000

Tada!!! We have created the app!

Understanding File Structure in Svelte App

The file structure of Svelte app is given below:

girlscript-app
├── node_modules
├── public
    ├── build
        ├── bundle.css
        ├── bundle.js
        ├── bundle.js.map
    ├── favicon.png
    ├── global.css
    ├── index.html
├── scripts
    ├── setupTypeScript.js
├── src
    ├── App.svelte
    ├── main.js
├── package.json
├── package-lock.json
├── README.md
├── rollup.config.js

The compiled file App.svelte is the where we write and run the code. main.js is the external JS file which is optional. Here it is shown after the installation just for the demonstration.

Let's observe the contents of App.svelte.

Contents of App.svelte

As discussed earlier, App.svelte is the main file to show the contents in the webpage.

After creating the Svelte app, this file already has some pre-written codes which looks like the following below code:

<script>
	export let name;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

The above code has three main tags:

1. Script: To write JS/TypeScript codes.
2. Style: To write CSS codes.
3. Main: To write HTML codes.

Advantages of Svelte

1. Svelte is processed in the compile time, not in runtime. That's why it shows the webpage faster than other JS frameworks.

2. Many concepts of HTML and CSS can be applied with some modifications.

3. It enables output flexibility.

4. It has got minimal learning curve.

Disadvantages of Svelte

1. Svelte has got small open-source ecosystem which will take time to grow up.

2. It has got limited packages and tooling support.

3. Svelte has less IDE integration, which needs a lot of work compared to other frameworks that have been around for a long time.

References

1. https://en.wikipedia.org/wiki/Svelte

2. https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started

3. https://daily.dev/blog/building-with-svelte-all-you-need-to-know-before-you-start

4. https://svelte.dev/docs

---

Contributors: Subhendu Dash