If you deal with Javascript and work with frameworks, you've probably heard of Svelte. Svelte came out in 2016 and was created by Rich Harris. Svelte on its own is technically not a framework, but a compiler that converts the code written into plain Javascript when the application is built. Svelte is currently in it's third version (Svelte 3) which was released in 2019. Currently the Svelte maintainers are working on SvelteKit which is a web framework that will be used as a standard way to create Svelte applications. SvelteKit is currently in Beta mode, but it is available to use.

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.

Application Structure

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

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.

Usually, the <script> tag goes on top. Here code can be written that looks very much like plain Javascript. You can import components and files, declare regular variables, reactive variables, write functions and do all that fun stuff here.

The middle is usually the markdown section. As mentioned above, the way the HTML is written looks basically just like JSX. The familiar HTML tags are used, and within the tags you can do things like bind data and call functions. Unlike JSX, the standard 'class' is used to connect to styles rather than a special name like "className". Another special feature in Svelte is the ability to run some Javascript like functions within the HTML (things like for loops and if/else).

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.

Svelte's Strengths

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.

Svelte's Weaknesses

Because it just compiles code into Javascript, Svelte can't do some things like routing. To do so requires an outside library. This of course is not a huge issue, but it's still an extra step that can be avoided by using a different framework. The need to look outside also leads to another issue with Svelte. Because it's a relatively new framework and doesn't have a huge number of users (compared to more established options like React, Vue, and Angular), the number of libraries that can be used with Svelte are limited. You won't find hundreds of options for everything like you will with React.

SvelteKit

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?

Maybe? Which doesn't seem like a great answer, but for now that probably is the best answer. If you're objective is to get employment at a certain company or if you're already well-versed in another Javascript framework, then the answer is probably 'no'. Svelte is not widely used by many companies, and while I think it's really nice to use, I don't know if it's worth switching over from a different framework you're already comfortable with.

However, if you're relatively new to Javascript frameworks and are looking for one to learn or if you want a simple option as a back up of sorts to something like React/Vue/Angular then Svelte is a good option I think. Conversely if you're a more experienced developer and just want to check out what's new and what else is out there beyond the 'classics', Svelte is a good one to look at.

For me, I was looking for something that kind of fell between Next JS and a vanilla HTML/CSS/Javascript use case. Something that could give some simple interactivity and animation type stuff without needing to do all of the Javascript stuff. Since I'm still relatively new to everything sometimes switching between Next JS/React and then vanilla usage is a little confusing. The syntaxes get a bit mixed up and muddled, so I wondered if there was something that wrote similar to Next JS, but was a little smaller and simpler. Svelte seemed to fit that so I decided to check it out.

And indeed, I think that's probably where Svelte will stay in my quiver so to speak. When a project needs a bit of interactivity, but not so much that Next JS feels like overkill and not so little that just writing plain vanilla Javascript would be faster.