Published on 18 Jun 2020 by Dave Regg
I feel like Svelte is only now just blowing up. Before, the "Big 3" were React, Angular, and Vue, but now I would include Svelte onto that list. Many "big name" tech teachers like Scott Tolinski, Brad Traversy, and The Net Ninja all have tutorials on Svelte. I have also seen a few job requirements mention Svelte specifically, rather than React or Angular. It's because of this that I decided to take some time to dive into the world of Svelte and see what the big deal is.
So why do we need another framework? What makes Svelte so great that Vue, React, and Angular don't already do?
Well to begin with, Svelte isn't even a frontend framework. It's actually a code compiler. It will compile all of the JS, CSS, and HTML and build static files of each when deployed. The static files are much smaller than a React App. The benefit of using Svelte rather than React is instantly noticeable when you $npx create-react-app
versus $degit sveltejs/template
because CRA can take minutes to create an application while Svelte takes just moments. Even when you $npm install
the dependencies of Svelte, that only takes another couple of seconds.
Depending on your preference, another benefit of Svelte is having all the JS, HTML, and CSS in one Component file, similar to Vue. The JS is in a <script>
tag right above a templated HTML. With JS, you can still import / export, include props, create functions and variables, and do normal, JavaScripty things.
The only difference with the JS and HTML is some syntactical changes. The HTML template is a bit different than other templates like Handlebars or EJS. Opening a code block {#each todos as todo}
will end with {/each}
. Making two different symbols open and close blocks of code is a bit confusing to me. Bringing in props with @import let propName
is a bit odd to me as well, but something that I can quickly get used to.
Another similarity Svelte has to Vue is the use of binding variables with elements.
<input type="text" bind:value={myVariable} />
This code will bind a variable written in the <script>
tag to the input. That means a user can change the value within the input, and the value of that variable will also change! It eliminates the use of useState
and creating a separate function handleChange(ev)
that's required for React.
Actions are just as easy.
<button on:click={myFunction}>Click me</button>
And within myFunction, do whatever you want. The action commands can go in any kind of element. Want to do something when a user clicks on a paragraph? Go right ahead! There are several other actions, :class
, :animate
, or :transition
, but for now, I have only stuck with :click
.
Reactive variables are Svelte variables that will change in real time as the data that it depends on is updated. So far, I have seen in Meteor that this makes interacting with a database much easier. But I'm ahead of myself.
Declare a reactive variable within the <script>
tag
$: fullName = `${firstName} ${lastName}`;
which will then be updated whenever a user updates the values of either firstName
or lastName
!
Statements can also be run with the $
which will run whenever the value of the variable within the statement is altered.
$: console.log(myVar)
So whenever myVar is altered, the code will log it to the console.
These are simply the bareboned benefits of Svelte, the simple of the simple. In future articles, I will get into Components, props, HTML templating, CSS styling, and all of that good stuff.
For now, I just wanted to write down some of the simpler code of Svelte so I wouldn't forget. I wanted to remind myself why learning Svelte is important. I wanted a place to show the similarities and differences between Svelte and other technologies so when I'm writing a project, I can look back and remember why Svelte's fun!