Svelte Framework
Svelte is a different type of framework. With other frameworks such as React and Vue they handle the heavy lifting in the user's browser, but Svelte does the work in a compile step when you build your app. This makes the web page sent to the client much smaller. If you want to geek out about the size difference, @halfnelson did a great investigation, it's all on their Github repo: But will it scale.
A question you might be thinking is why learn Svelte over React or some other framework. In my opinion there isn't a clean answer. We could put up some chart of pros and cons about both. And there is plenty of posts out there that do exactly that. The reason that I'm going over to Svelte is the quickness to get a project up and running. As I'm learning new functions and features of web development, I will create many small projects. Svelte let's me get up and running very quickly and as I'm building the project, stays out of my way.
Svelte uses very similar component structure and styling, so if you learn Svelte you can jump over to React. Or the other way around. With most frameworks and libraries that are used today, Svelte relies heavily on ECMAScript 2015; sometimes called ES6. I'd highly suggest that you have solid foundation of ES6 before tackling Svelte.
Today we're going to look at the steps of getting the basic Svelte template loaded and started up. In this post we'll walk through setting the template up and changing the app to get it to do some action.
The next few posts will contain a deeper walk through for a Svelte app that hits an API and displays the results.
Installing the Template code
Svelte has a template that is ready to go, making starting a project very quick. There are two methods to get the template.
1 Using Node, the template is installed using just 1 line.
npx degit sveltejs/template firstApp
Change firstApp to the name of the project. A folder will be created with that name containing the Svelte template.
2 Download a ZIP file. The advantage of have the ZIP file is you won't need to download the template every time you want to start a project. Just make sure that you update the ZIP file anytime new updates happen to the template.
Files and Folders
Inside the firstApp folder will be three folders and a bunch of files.
Most of these files are used for setup. We're going to focus on getting the app up and running. The template doesn't include everything needed, but to finish it up is fairly quick.
Installing the Node Packages
The part missing is the Node Packages. Node Packages are the plugins and dependencies needed to run the app.
cd firstApp
npm install
A new folder will be created call node_modules. This contains the packages listed in the package.json file.
If you aren't familiar Node and NPM check out Stanley Nguyen's article on FreeCodeCamp - What is npm? A Node Package Manager Tutorial for Beginners.
Running the App.
Now the project has everything it needs to run.
npm run dev
After lots of text goes by you'll get a message that your application is ready. Set your browser to:
http://localhost:5000
Your link may be different depending on your system. Once loaded the browser will be showing a simple web site. Svelte is now watching the files and if any of the files are changed the page will automatically be updated.
In the public folder you will now notice a build folder. This is where Svelte will place all the bundled files that Svelte creates when it builds the site. At this point you could take everything in the public folder and copy it to a web server and it'll run. Don't make any changes inside the build folder since the next time Svelte builds all the files will be replaced.
public/index.html
As with any web site, the first page in the chain is index.html. This file won't be changed to often, unless it's global. Since Svelte is designed to be component based, very little needs to be global.
One change that is common, is changing the title element. This is what will be on the browser's tab so it will need to be changed to reflect the name of your project.
If you are using Google Fonts, the link element to embed the font can be placed in the head portion of this file. If the font is only used in a single component you may also use the @import element in the styling for that component.
main.js
This is the JavaScript file that is the entry point of your app. It calls the very first Svelte component.
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;
Inside this file we are importing the App.svelte component and applying it to the target. In this case the target is the body element of the index.html file. There is also props being passed along. We can remove this since very seldomly you'll need to pass a name variable holding world.
props is how you pass information from one component to the one being called.
The import and export are common in Svelte and if this is new, it would be best to dig into ECMA Script 2015 (ES6).
src/App.svelte
Here is where we are finally going to start editing.
With any component, the HTML, CSS and JavaScript can be either combined into a single file or broken apart into separate files. This is completely up to the style of development of the team. Since Svelte will be bundling everything together, it makes very little difference once the Svelte has been processed.
For this example we're sticking with a single component so we'll combine it into a single file.
There will be three sections; HTML, JavaScript and CSS. They can be in any order, but it's very common to have the order as Javascript, HTML CSS.
Replace everything in App.svelte file with:
<script>
let count = 0;
function adder(){
count += 1;
}
</script>
<main>
<div>
<h1>Click the button to increase the count: {count}</h1>
<button on:click={adder}>+ 1</button>
</div>
</main>
<style>
main {
display: grid;
place-items: center;
text-align: center;
margin: 20px auto;
}
button {
outline: none;
border: none;
border-radius: 10px;
background-color: #0000ff;
color: white;
padding: 15px;
}
</style>
In this example the script and style sections have no special Svelte syntax. The HTML portion does though.
<h1>Click the button to increase the count: {count}</h1>
The {count} tells Svelte to insert the value of the count variable. You'll notice as you click the button, the value is being updated. So what's signally to Svelte to update the page? It's the assignment operation count += 1. Anytime there is an assignment operation, Svelte will update the page. This can cause problems if the JavaScript makes changes without assigning a value. For example, when an array is changed using push, there might not be an assignment so the change won't be reflected. A method around this is to use a temp variable to make changes and then assign it into the regular variable.
<button on:click={adder}>+ 1</button>
This is Svelte's method of adding an event listener to an element. adder is the function that is called when the element is clicked.
If you still have the site running in the background, you'll see the web page update. Otherwise run npm run dev to relaunch the app and test out the button.
Next up
Svelte has a tutorial on their main site which is a great way of getting to know more about Svelte.
Join me next week for a building an Svelte app using an API.
May the force be with you!