Svelte is a unique JavaScript framework for building interactive user interfaces. In this tutorial, you will learn about Svelte, how to get started with it, and how to build your first Svelte application.
Why Svelte?
What sets Svelte apart from other frameworks like React and Vue is that Svelte shifts the work that is done to update the UI to the compile step, instead of in-browser like with React and Vue. This is a radical change that transforms what it means to be modern JavaScript framework. Once Svelte compiles your code, it is completely out of the way. There is no Svelte-specific code that ships to the end-user's browser. The code is completely standalone without any dependencies.
This means that finished compiled Svelte apps are extremely optimized and performant thanks to their smaller bundle sizes. Svelte rejects the virtual DOM for operations and instead builds imperative code at compile time that surgically updates the DOM. By skipping the virtual DOM entirely, Svelte is able to perform all of its work at compile time, which is a huge performance boost.
Not only that but, because Svelte is so simple syntax-wise, it is a great framework to learn if you are new to JavaScript because if you know HTML, CSS, and JavaScript, you can build a Svelte app in minutes.
For more advanced users, it supports TypeScript so you can write your code in a more modern and safe way.
Prerequisites
- Basic HTML knowledge is needed. If you're absolutely new, check out our class on HTML.
- Basics of using a command line interface.
- Node and NPM installed. If you don't have them installed, follow our how to install Node guide.
Installing Yarn
We will be using Yarn to manage our dependencies. This step is technically optional because you can just stick to npm if you prefer. To install Yarn, run this:
npm install -g yarn
To test if you've installed Yarn, check the version:
yarn -v
If you see a version number, you're good to go.
Installing Svelte
Now that we have Node and NPM installed, we can install Svelte. To do this, we will take advantage of npx which is a way to run Node commands that other people have written.
To set up our Svlete project, we will use degit, a command that clones a repository without any of the history. We will want to get the sveltejs/template from GitHub. Run this command to create a new Svelte project, named app:
npx degit sveltejs/template app
Now change directories to your new project. If you named it app, then run this command:
cd app
Now must install the Svelte dependencies listed in the package.json file. This is done by running this command:
yarn install
Or if you are using npm, you can use this command:
npm install
A quick peek into the package.json file will show you that this project is actually pretty simple. It is simply using Svelte and rollup for packaging and bundling our code.
Running Svelte
With our project set up, we can now run our Svelte app. To do this, we will use the dev command. This will run the app in development mode, which means that it will watch for changes and automatically rebuild the app.
Run the app in development mode:
yarn dev
Alternatively, you can also use npm:
npm run dev
Once you do that, you should see the following output:
Your application is ready~! 🚀
- Local: http://localhost:5000
- Network: Add `--host` to expose
Now you can open the app in your browser by visiting http://localhost:5000. You should see a simple Svelte app.
Svelte Development Setup
With your Svelte app running, you can now start working on and tweaking the app to see how it works. If you are using Visual Studio Code as your editor, make sure to download the Svelte for VS Code extension and install it.
This extension will add support for Svelte to Visual Studio Code. This includes syntax highlighting, code completion, code formatter, and much more must-haves.
Svelte Basics
Taking a look at the code, the example template is fairly simple. The input to rollup is our main.js file, which is the entry point for our app. The output of rollup is our public/build/bundle.js file, which is the compiled JavaScript code.
If you take a look at our main.js file, you will see that it simply exports an instance of the App component.
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
The App.svelte file is the root component for our app. It is a single file component, meaning it is a file that includes the script, styles and markup for the component all in one place, a practice very common in Vue. This keeps everything relevant to the Svelte component in a single file, making it easier to make changes to the component.
<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 script tag is where the functionality of the app goes, and it is written in pure JavaScript. The style tag is where the styles of the component goes. Everything else is considered markup. This simple syntax is made possible by the Svelte compiler, which does all the heavy lifting for us.
Svelte Kit
When you are ready to build a serious app, you can use the Svelte Kit to do so. Svelte Kit is an application framework that is powered by Svelte. It allows you to server-side render Svelte applications that can then be hydrated on the client after page load.
The benefits of Svelte Kit is that you don't compromise on SEO, you can still provide the slick navigation experience that single-page applications provide, and you can use the same codebase for both server and client-side rendering.
As the Svelte team puts it, Svelte Kit is the fastest way to build Svelte apps.
Conclusion
Svelte represents a radical departure from what a modern JavaScript framework looks like. By using Svelte, you can build a modern web app that is extremely fast, bundles little code, and requires little learning to get started. By not using the virtual DOM, Svelte is trying to set a new standard for building web apps. Hopefully this tutorial has helped you get started with Svelte.
Thanks for reading and happy coding!
