Giving Svelte a Whirl
tl;dr An amazing framework! But is it for every case?
Publish Date: 2021-10-01
Creating a Svelte Project
The easiest way to create a standard Svelte project is to run:
npx degit sveltejs/template my-svelte-project
This will begin the installation process. You can have it create a basic project or an empty project. You can also tell it whether you want to use Typescript and use ESLinter and Prettier for error checks and formatting.
If you want to create a SvelteKit project you can run:
npm init svelte@next my-app
This runs a similar process as the basic Svelte project command, but will include all the SvelteKit features currently usable.
A basic Svelte application will have a public folder and src folder (there are others, but they are not super important here). The public folder contains the files that will be used at build time. There's not a whole lot to do with the public folder during development, but if you want to use local files (IE images) then those go into the public folder.
The src folder is where all the action lies for a developer. The src folder will contain an app.svelte file and an index.js file. If you come from React these files are basically the same as the app.js and index.js files. The index.js file is what links the code written to the index.html file that is used by the browser. The app.svelte file is what delivers the various components to the index.js file. Of course, you can write components and things like that in the src folder.
Svelte files are .svelte files. They can consist of three sections <script>, <style>, and a section for markdown. The format will look similar to JSX and styled JSX or styled components in some ways if you come from React.
Finally, the bottom is usually where the <style> tag is found. Within the <style> tag everything is basically written like standard CSS. It's important to note that everything here (and in the <script> tag as well) is local in nature. So, when it comes to styling, one limitation is that you cannot target anything that is not a class or ID. So, in normal CSS you might target the body or all the <a> tags to create a uniform styling. This can't be done in a .svelte file, at least not on a global level.
Writing Svelte code is very easy and familiar. The JSX-like code can be a little confusing at first if you're completely new to reactive frameworks, but if you have experience with React or Vue (I imagine, have never used Vue) then it'll be very familiar. It's also incredibly easy to get reactive elements to just work with very little code.
Some things, like basic state management, can be accomplished very easily using a 'store' which is built into Svelte. A 'store' acts very similarly to something like Redux, but it is much easier to create, use, and update.
I don't want to go too much into SvelteKit now because it's still in Beta. Things could get better, things could (in theory) get worse. As such, like I said, it's probably better to not talk too much about features and that kind of thing too much. But anyway, I've enjoyed using SvelteKit thus far. SvelteKit does have built in routing that works very similar to Next JS if you've used that framework. When you create a SvelteKit project, inside the src folder is a routes folder. All .svelte files in the routes folder become pages in the web app. Creating dynamic routes are also possible using the [page].svelte syntax. In any event, as Svelte and SvelteKit continue to move along I think it'll be a really nice framework to work with.
Who is Svelte For?
At this point there are a few occasions where I think Svelte is a good option. I think it's probably good for people who are looking for a framework that will work well with slow connections or older computing devices because it is capable of creating files with a very small size. So if someone is developing a web app for senior citizens or where people live in rural areas where high speed internet isn't easily accessible, that may be a good place for Svelte. Web applications that might be large if built in another framework, but a better size in Svelte might be another reason. And this is kind of Svelte's problem. There don't seem to be a huge number of cases where it feels like, "Yes, this is definitely a time for Svelte".
So, should you learn Svelte?