Svelte vs Svelte Kit - What's The Difference?

Summary

In this informative video, Scott from Level Up Tutorials clarifies the distinction between Svelte and SvelteKit. Svelte is likened to front-end frameworks such as React or Vue.js, focusing on the manipulation of the DOM through JavaScript. In contrast, SvelteKit is a comprehensive toolkit for building applications and websites with Svelte, offering features like file-based routing, server-side rendering, and API support. The video also touches on SvelteKit's unique components, such as adapters, loading functions, and layouts, emphasizing how they facilitate the development process. Scott encourages viewers interested in learning Svelte and SvelteKit to visit Level Up Tutorials for in-depth courses and resources.

Takeaways

• 📝 Svelte is a front-end framework analogous to React or Vue.js, focusing on writing code that manipulates the DOM through features like two-way binding and single-file components.
• 🛠️ SvelteKit is a toolset for building applications, static sites, and packages with Svelte, providing a structured way to develop projects using the Svelte framework.
• 🎯 The primary difference between Svelte and SvelteKit is that Svelte is the core framework for front-end development, while SvelteKit encompasses the tools and features needed to build complete applications.
• 🔄 SvelteKit includes innovative features like an adapter system for determining the output of the site, whether it's static generation like Gatsby or server-side rendering for Node.js applications.
• 🗺️ Routing in SvelteKit is based on the folder structure of the application, making it intuitive and similar to other modern web development frameworks.
• 🚀 SvelteKit's loading functions allow for server-side data fetching and preparation before the client-side render, enhancing performance and user experience.
• 🔄 Layouts in SvelteKit are special files that wrap around router files within the same folder, providing a way to create consistent structures across the application.
• 📌 Hooks in SvelteKit are not React hooks but are more akin to traditional web development hooks, allowing for interaction with the application's rendering cycle.
• 📋 SvelteKit comes with additional modules for development, such as app navigation, paths, stores, and aliasing, making it easier to build and manage applications.
• 🌐 SvelteKit supports various output modes, including Node.js apps, static generation, client-only, and server-only deployments, offering flexibility for different types of projects.
• 🎢 The SvelteKit community offers a wealth of learning resources, including Level Up Tutorials, which provide comprehensive courses on Svelte and SvelteKit for those looking to develop their skills.

Q & A

What is Svelte and how does it relate to Svelte Kit?

Svelte is a front-end framework similar to React or Vue.js, which allows developers to write code that produces JavaScript to manipulate the DOM. Svelte Kit, on the other hand, is a set of tools for building applications, static sites, and packages with Svelte. Essentially, Svelte is the core framework, while Svelte Kit is the ecosystem for creating full-fledged web applications.

What are the key differences between Svelte and Svelte Kit?

Svelte is focused on the front-end and is used for creating the interactive parts of web applications. It deals with features like two-way data binding, single-file components, and reactive updates. Svelte Kit, however, includes additional features like an adapter for outputting the site, a file-based routing system, server-side loading of data, and support for various deployment targets like static sites or server-side rendered applications.

What is the role of an adapter in Svelte Kit?

An adapter in Svelte Kit determines how the application will be run or outputted. It can be used to create a statically generated site, a Node.js application, or even a Cloudflare worker. The adapter allows developers to choose the output format of the site, whether it's server-side rendered, client-side only, or a combination of both.

How does routing work in Svelte Kit?

Svelte Kit uses a file and folder-based routing system. The structure of the application's directories dictates the routes of the site. This means that the file system layout directly corresponds to the URLs and the pages that are accessible to users.

What is the concept of 'loading' in Svelte Kit?

In Svelte Kit, 'loading' refers to the process of fetching and preparing data on the server-side before the client-side rendering takes place. This can be used to improve performance by loading data quickly from the server. Additionally, the loading function can handle tasks like redirects, allowing for more dynamic control over navigation within the application.

Can you explain the concept of 'layouts' in Svelte Kit?

Layouts in Svelte Kit are special files that wrap around other components, particularly the ones generated by the file-based router. They are denoted by having two underscores in their file names. A layout requires a 'slot' which is where the content from the router files is inserted. This concept is similar to how slots work in Svelte components and allows for a consistent structure across different pages of the application.

What additional modules does Svelte Kit provide for development?

Svelte Kit comes with several additional modules to aid in development. These include 'app/env' for accessing environment information, 'app/navigation' for programmatic interaction with the router, 'app/paths' for base path information, and 'app/stores' for default reactive stores. These modules help developers manage various aspects of the application's behavior and interaction with the user.

How does Svelte Kit handle prefetching of routes?

Svelte Kit offers a feature called 'svelteKit prefetch' that allows for prefetching of routes. This means that the application can load parts of the site in the background, improving the overall user experience by having content ready to display as soon as the user navigates to it.

What is the command-line interface provided by Svelte Kit?

Svelte Kit includes a command-line interface that allows developers to easily run various modes and tasks. Commands like 'dev' for development mode, 'build' for creating a production build, and 'preview' for previewing the production build are available. This simplifies the development and deployment process for Svelte Kit applications.

How does Svelte Kit handle different deployment targets?

Svelte Kit is flexible when it comes to deployment. It supports various deployment targets such as static sites, Node.js applications, client-only applications, and even server-only applications. This is achieved through the use of different adapters, which dictate the output and behavior of the application depending on the chosen deployment method.

What is the relationship between Svelte Kit and other Svelte-based platforms like Elder.js or Astro.build?

Svelte Kit is a specific ecosystem for building applications with Svelte, while other platforms like Elder.js or Astro.build are alternative ways to consume and build with Svelte. While Svelte can be used across these different platforms, Svelte Kit is specifically designed to provide a comprehensive set of tools for application development, including features like routing, data loading, and deployment options that may not be present in other Svelte-based platforms.

Outlines

00:00

🚀 Introduction to Svelte and SvelteKit

This paragraph introduces the speaker, Scott from LevelUp Tutorials, and sets the stage for a discussion on Svelte and SvelteKit. Scott addresses the common confusion between the two, noting that while Svelte is frequently mentioned online, SvelteKit is less well understood by newcomers. He promises a brief explanation rather than an in-depth tutorial, aiming to clarify when and how to use Svelte and SvelteKit together in web development.

05:02

📚 Understanding the Differences: Svelte vs SvelteKit

Scott explains the fundamental difference between Svelte and SvelteKit using analogies to other popular frameworks. Svelte is likened to React or Vue.js, serving as a front-end framework for writing code that manipulates the DOM. SvelteKit, on the other hand, is a toolset for building applications, static sites, and packages with Svelte. It includes features like adapters for outputting the site, a file-based routing system, and a unique loading function for server-side data fetching and redirects. The explanation positions SvelteKit as the go-to for building apps with Svelte, while emphasizing that Svelte itself is the front-end framework utilized within SvelteKit.

10:03

🛠️ Additional Features and Capabilities of SvelteKit

This paragraph delves into the additional features that make SvelteKit stand out for building web applications. It covers the concept of layouts, which are special files that wrap around the router files, and hooks, which are reminiscent of web development hooks rather than React hooks. Scott also mentions various modules included with SvelteKit, such as app navigation, paths, stores, and aliasing. He touches on SvelteKit's flexibility in outputting code for different types of applications and its command-line interface. Furthermore, he highlights SvelteKit's compatibility with Svelte's configuration options and Rollup plugins, wrapping up with a note on the potential for future exploration of SvelteKit's features.

🎓 Learning Resources and Course Promotion

In the final paragraph, Scott promotes LevelUp Tutorials as a resource for learning Svelte, SvelteKit, and other related technologies. He mentions the regular release of new tutorial courses and the variety of content creators contributing to the platform. Scott specifically points out the current month's focus on Astro.build and Svelte's role in it. He encourages viewers to visit LevelUp Tutorials for a comprehensive learning experience and mentions a discount for annual subscriptions, emphasizing the value of the content provided.

Keywords

💡Svelte

Svelte is a front-end framework analogous to React or Vue.js, allowing developers to write code that produces JavaScript for manipulating the DOM. It is the fundamental technology used within SvelteKit for rendering user interfaces. In the script, Svelte is described as the core framework for building interactive web applications.

💡SvelteKit

SvelteKit is a set of tools and conventions for building web applications with Svelte. It includes features like routing, server-side rendering, and API support, making it a comprehensive solution for developing web applications. Unlike Svelte alone, SvelteKit provides a complete ecosystem for creating full-stack applications.

💡Adapter

An adapter in SvelteKit determines how the application is outputted. It can be used for statically generating sites like Gatsby does, or for creating server-based applications, or even running in cloud environments like Cloudflare Workers. Adapters provide flexibility in how the application is deployed and accessed.

💡Routing

Routing in SvelteKit refers to the system that manages the navigation between different pages or views within an application. It uses a file-based approach, where the folder structure of the application determines the URLs and the corresponding components or pages that load. This makes it easy to manage and scale the navigation of a web application.

💡Loading

Loading in the context of SvelteKit is a concept that allows developers to define how and when data is loaded, particularly on the server-side before the client-side rendering takes place. This can improve performance by fetching and preparing data ahead of time, and it can also handle tasks like redirects.

💡Layouts

Layouts in SvelteKit are special files that wrap around other components to provide a consistent structure or design across different pages. They are similar to the concept of slots in Svelte, and they require a slot to be defined. Layouts help in maintaining a uniform look and feel across an application by encapsulating common elements like headers, footers, or navigation menus.

💡Hooks

While not directly mentioned in the script, hooks in web development generally refer to functions that allow developers to 'hook into' different parts of an application's lifecycle, such as rendering or state management. In the context of SvelteKit, hooks might be similar to other web development patterns but are distinct from React hooks.

💡Additional Modules

SvelteKit comes with additional modules that assist in the development process. These modules provide functionalities like environment information, navigation, and prefetching of routes. They are designed to enhance the development experience and streamline common tasks within a SvelteKit application.

💡Prefetching

Prefetching in SvelteKit is a technique used to improve the performance of web applications by loading resources (like pages or data) in advance, based on user behavior predictions. This technique helps reduce the perceived load time by having content ready before the user actually requests it.

💡Configuration Options

Configuration options in SvelteKit allow developers to customize the behavior and settings of their applications. These options can include how the application is built, its development environment, and how it interacts with other tools or services.

💡Command Line Interface (CLI)

The Command Line Interface, or CLI, is a tool provided by SvelteKit that allows developers to interact with their applications through the command line. It enables actions like running the application in development mode, building the application for production, and previewing the built application.

Highlights

Svelte and SvelteKit are often confused but they serve different purposes in web development.

Svelte is a front-end framework similar to React or Vue.js, focusing on the manipulation of the DOM through JavaScript.

SvelteKit is a toolset for building applications, static sites, and packages with Svelte, offering a more comprehensive development experience.

SvelteKit includes features like an adapter for outputting the site, routing, loading, and layouts, which are not present in Svelte alone.

The adapter in SvelteKit allows developers to choose the output method of their site, such as static generation or server-side rendering.

SvelteKit uses a file and folder-based routing system, simplifying the process of defining site routes based on the application's structure.

Loading in SvelteKit is a concept for server-side data fetching and preparation before the client-side rendering takes place.

Layouts in SvelteKit are special files that wrap around router files, providing a way to create consistent structures across the site.

SvelteKit includes additional modules like app navigation, paths, stores, and aliasing to enhance the development process.

SvelteKit supports various output methods, including Node apps, static generation, client-only, and server-only deployments.

SvelteKit has a command-line interface for easy management of development modes, building, and previewing.

SvelteKit is built on top of Vite, offering all the Vite configuration options and the ability to use Rollup plugins.

Svelte can be used with other platforms like Elder.js or Astro.build, but SvelteKit is the recommended toolset for building applications with Svelte.

Level Up Tutorials offers courses on Svelte and SvelteKit, including animation and component development.

The upcoming course on Astro.build will feature the use of Svelte within the Astro framework.

By understanding the differences between Svelte and SvelteKit, developers can make informed decisions on the right tools for their web development projects.

Transcripts

hey what's up this is scott with level

up tutorials and in this weekly's felt

we're going to be talking about svelt

and svelt kit now this is a question i

see pop up on reddit twitter everywhere

all the time what's the difference

between svelt and svelt kit uh whether

or not there's confusion there or people

just are new to the platform and see

people building things with self kit and

or don't know what the difference is

this will be a quick explainer it's not

going to be anything crazy in depth it's

by all means not going to be like a

full-on tutorial on using either of

these projects but it will hopefully

give you an idea of when to use what and

where and how to talk about these things

as if they're these separate things but

uh used together and how they are so

okay let's talk about the difference

between svelt and sveltkit

svelt is more analogous if we're looking

at front-end frameworks it's more

analogous to something like react or

even vue.js right it's the framework

it's the front-end framework it's the

thing that allows you to write the code

and it spits out

the

javascript that manipulates the dom okay

that's felt when you use the the two-way

binding when you use what other kind of

features the um the single file

components the svelt files those are all

svelte things what about sveltkit

well sveltkit is how you build apps

sites static apps static sites packages

that's how you build things with svelt

and in the past

you've built

uh things with svelten in many other

ways whether you're using svelt's own

thing that used to be called it was

sapper was the the precursor just felt

kit or maybe use something like elder js

there's a number of these different

svelte projects but sveltkit is

essentially the way to build apps or

websites with svelt okay so svelte is

the front-end framework and svelte kit

is essentially the kit to build

applications with now sveltkit has a lot

of really neat features that make it

stand out and be different from some of

these other platforms so if we're going

to try to keep up with this analogous

thing if you're coming up from the react

world svelt is to react as spelt kit is

to next js or perhaps even gatsby and if

you're coming from the view land of

things uh svelte is to view as felt kit

is to nuxt js and if you're not coming

from either of these think about it like

this svelte is the front-end framework

sveltekit is what you use to build apps

with svelte okay that is at the very

most plain english the best way to

possibly describe it so if you were

saying i want to i want to build an

application from scratch and this thing

needs to be server side rendered and

needs to have an api you'd pick up svelt

kit you wouldn't even you wouldn't pick

up svelte itself you'd pick up sveltekit

to build that application now spelled

kid uses svelt so you are writing the

app in spelt

but sveltkit again is the tools in the

kit for you to build these applications

now what does it include that makes it

do these things well it includes things

like an adapter now an adapter is how

you output the site

so let's say you wanted to have a

statically generated site like a gatsby

site it's a site that takes your

javascript and outputs it in just

straight up html that is going to be

using an adapter in swelt kit or if you

want to say i want this actually be a

node app where everything is generated

on the server that's also an adapter or

maybe you want this to run in a

cloudflare worker that's an adapter okay

so an adapter is something that chooses

the output of the site and it's really

neat that you get to pick that so you

don't have to have your different

project built on something else just to

have a static output right now what else

is included in spell kit also in spell

kit is the routing system now just like

next js or some of these other ones it

uses a file

uh folder based routing system as in uh

based on the folder structure of your

application it determines the routes of

your site now routers uh as a concept is

basically when you hit a url when you go

to a url in your browser where does the

app go like what files does this thing

load what components does this render

so

spell kit includes routing

okay it includes adapters how the

application will eventually be run

but it also includes something called

loading now loading is an interesting

concept and loading is basically where

you define the data can be loaded uh in

the server side before the client side

render takes place

again this can also be run just straight

up client side if you want it to be that

way or it can be run both so a loading

function is basically this is where you

fetch all your data before the component

gets to be run okay

so this loading function is something

that is only in spell kit is not in

svelt and this thing runs essentially

before the component even starts to

mount so unmount none of that stuff will

be called until long after the well

maybe not long after but after the load

function has been run and load functions

can do a number of things it can like i

said fetch your data prepare that data

for server-side rendering but it also

can handle redirects let's say you want

to uh look at something on the server

you know based on that maybe perhaps do

a redirect so okay we have page routing

we have the output we have

um the loading

we also have layouts now layouts is a

concept that kind of exists in felt as

in we have this this concept is felt

called slots which is how you insert

something into another component in

react it's children but in svelte you

have the idea of a slot now a layout in

sveltkit is a special file that has two

underscores in front of it and it

requires a slot and it will essentially

wrap around the file based router files

within that same folder okay it's just

what you would expect when you hear the

word layout if you've worked in any of

these platforms now in addition to that

there's some other little things like

hooks which aren't necessarily anything

you need to think about too much if

we're giving a 101 here these aren't

like essential it's not analogous to

react hooks no relation there whatsoever

this is more like what you're used to

with any sort of web development hook

you know when react started calling them

hooks it was kind of weird that they did

because hooks has this other connotation

where it's like you can hook into parts

of the application uh the rendering

cycle right and that that's kind of what

hooks are and react in a way but it's

confusing right so also svelka has a

number of additional modules which are

basically packages that come with felt

kit to help you in your development flow

things like app env which gives you

environment information whether or not

your application's running in

development mode those types of things

we also have things like app navigation

which allows you to interact with the

router there's a go to function to go to

a url invalidate

prefetch prefetch routes a lot of cool

stuff in here

but just basically you could think of

this as the router right if you want to

have access to the router programically

that's how you do it um there's app

paths which are some base path

information app stores which are some

default stores um some reactive stores

that come baked into sphelp kit such as

whether or not the page is currently

navigating we use this on level up

tutorials that if the page is currently

navigating show a loading spinner some

people use this for some different

things but that's what exists

we have things like the page again i'm

not going to do a total in depth about

everything here

there's also some aliasing going on here

there's some neat stuff but basically at

the end of the day this is the stuff

that allows you to again uh this is the

stuff that allows you to build websites

and applications um with svelte

now some neat stuff okay uh svelkit has

some really neat stuff that i would love

to dive more into in this video but like

stuff like uh svelkit prefetch to

prefetch routes again this is all

routing related spell kit no scroll

what else do we have here some amp mode

i don't use amp myself so um i don't as

i honestly don't know too much about amp

as it exists in spell kit because i just

don't straight up use it it allows you

again to choose how you're outputting

your code whether it is as a node app

and ssr whether it's statically

generated whether it's client only or

even just server only right you can do

all of that now there's also a command

line interface that allows you to just

basically run dev mode build preview

package and sveltkit is built on top of

veet so uh you you end up having all the

veeat configuration options as well

which

is awesome and again v uses rollup

plugins so you can use rollup plugins in

spell kit it all works very very well

very super good um and and that's it i

mean there's some configuration options

but if we're doing like what's the

difference here i think i've made it

pretty clear what the difference is um

there's some neat stuff about um

just in general what's going on here but

again at the end of the day you're

building applications with spell kit and

you're most likely not building

applications with svelt but you're using

svelte in sveltkit to build applications

okay

so like think about it this way there's

other platforms that can consume svelte

uh whether that is elder js or astro dot

build right astro build you can use felt

and astronaut dot built but you're not

using spelled kit in astro build if that

makes sense right so i hope this is a

quick explainer again i'm hoping not to

go too too in-depth here i don't want to

um you know turn this into a full-on

every every little thing that is about

here but what i do want to do is make it

very clear in plain english what the

difference is here because i do hear

this question come up all the time i'm

hearing the words felt i'm hearing the

words spell kit i don't know the

difference

that's the difference thank you so much

for watching and if you'd like to learn

svelte and spelt kit or svelte in spell

kit or

s felt with sappers still leaving for

some reason but i would recommend going

to spell kit um if you want to learn

spelt spell kit animating spelled

buildings fall components any of that

head on over to level up tutorials dot

com uh if you sign up for the year you

can save 25

um and that's a really good deal because

we come out with a new tutorial course

every single month and we have some

brand new courses coming from some

extremely talented content creators as

well as a ton of new courses from yours

truly doing all sorts of really cool

stuff in fact this month's course is on

astro astro.build and we're going to be

using some svelt in astro you better

believe so thanks so much for watching

and i will see you in the next one