SvelteKit just hit version 1.0 and provides an awesome set of tools for building fullstack web applications. Let's take a first look at its features and compare it to other frameworks like Next.js and Nuxt. 

#webdevelopment #javascript #TheCodeReport

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

- SvelteKit announcement https://svelte.dev/blog/announcing-sveltekit-1.0
- SvelteKit Docs https://kit.svelte.dev/
- Svelte in 100 Seconds https://youtu.be/rv3Yq-B8qp4
- Subscribe to Beyond Fireship for the Full Tutorial https://www.youtube.com/channel/UC2Xd-TjJByJyK2w1zNwY0zQ

🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- SvelteKit vs Next.js
- SvelteKit vs Nuxt
- Svelte vs React
- Build SSR apps with Svelte
2024-02-04T05:15:56.497Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
5558e83e-b4f2-40d6-b502-b7d856756643
04e44737c36d53ce49eeb278cad0bdae28fd586cd35ac032cc8d69bc8fa520ea
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
It is December 15, 2022, and you're watching The Code Report.
After what felt like a lifetime of waiting, SvelteKit officially hit version 1.0 yesterday, which is a full stack framework for the world's most loved UI library.
When I tried Svelte for the first time over 3 years ago, it left me extremely titillated.
It had an innovative compiler, elegant reactivity, and we just had so much fun together.
H.
As the years went on, I continued working with React and Angular, but truth be told, I would often close my eyes and pretend that they were actually spelt.
I was web mentally frustrated, but luckily just in time for Christmas, we've achieved a glorious climax that makes it possible to use Svelte in a server rendered application.
Let's take a look at some code and see if lives up to all of these innuendos.
SvelteKit is very similar to other JavaScript meta frameworks like Next.
Js, Remix, and Nuxt.
Like Next.
Js 13, it uses file system routing, but made a somewhat controversial decision of using reserved names to represent different types of UI, like page, layout, loading, and error.
In addition, any file that has significance to the framework, is prefixed with a plus sign.
There's been a lot of discussion around this approach and not everybody likes it because you end up with tons of files in project with the exact same name, which can lead to migraines if you expand all the directories in your editor.
On the other hand, though, these conventions keep your project clear and consistent.
Pagedot Svelte contains a component that will be server rendered when you navigate to that route.
After the initial page load, it will hydrate, and then the client side router takes over from there.
This is what we call SSR, and I think it's the most sensible default.
However, in SvelteKit, you can mix and match other rendering strategies, like you can pre render static HTML for jamstack style sites.
Or if no server is required, you can use client rendering to do everything in the browser.
Or on the flip side, if you don't want any JavaScript at all, you can render everything on the server like a traditional a multi page application.
What's awesome though is that you can choose the best rendering strategy for a page with a simple configuration option.
You're not locked in to just one rendering paradigm.
That's awesome, but the other big thing you'll want to know about the developer experience is how data fetching works.
Every page dot Svelte file can have a matching page dot JS or TS file that exports a load function.
The return value from this function will automatically be made available in the page dot Svelte file via this data variable.
It's incredibly simple and also provides end to end type safety.
The load function can run both server side and client side.
However, if you want to committed to just the server.
You can do that by adding server to the file name.
And speaking of server, I love SvelteKit's convention for building APIs.
You create a server dot JS file, then export functions named as HTTP verbs, like get, post, patch, and so on.
That's nice, but here's where things get cool.
In many applications, you need to fetch data at multiple levels, like you might have user data at the root, then a dashboard with an order, then some comments below it.
Fetching all this data is complex, and people have come up with all kinds of complex state management libraries that try to wrangle the complexity.
In helped Kit you can do nested routing with layouts that can share UI with their children and also fetch data that's accessible by the children.
But what's special about Svelte is that has built in stores.
The the page store gives you access to all the data on the current page and can be subscribed to with reactive updates from anywhere in the application by putting a dollar signed in front of it.
Angular has actually been doing stuff like this for years with its async pipe, and I can tell you from experience that patterns like this eliminate tons of complexity when it comes to state management.
Now it's also important to know that when fetching data, you can have error and loading files that represent the UI for those special states.
This pattern is basically identical to Next.
Js version 13.
In addition, SvelteKit has form actions, which allow you to define functions on the server that handle form submissions.
At this point pretty much every modern framework, has stolen this feature from Remix, which itself got the idea from the way every other PHP framework has worked since the beginning of time.
And another piece of bonus news is that SvelteKit is also getting a library very similar to NextAuth for user authentication.
Rich Harris, Chris, the creator of Svelte and SvelteKit, works at Vercel, and the team from NextAuth developed this library, which is awesome because that means it's getting world class tools proven to work at the largest hail.
Overall, SvelteKit is a genre defining masterpiece.
If you wanna penetrate deeper into this topic, stay tuned for a full uncensored tutorial on Beyond Fire ship.
This has been the Code Report.
Thanks for watching, and I will see you in the next one.

Speaker 0: It is December 15, 2022, and you're watching The Code Report. After what felt like a lifetime of waiting, SvelteKit officially hit version 1.0 yesterday, which is a full stack framework for the world's most loved UI library. When I tried Svelte for the first time over 3 years ago, it left me extremely titillated. It had an innovative compiler, elegant reactivity, and we just had so much fun together. H.

As the years went on, I continued working with React and Angular, but truth be told, I would often close my eyes and pretend that they were actually spelt. I was web mentally frustrated, but luckily just in time for Christmas, we've achieved a glorious climax that makes it possible to use Svelte in a server rendered application. Let's take a look at some code and see if lives up to all of these innuendos. SvelteKit is very similar to other JavaScript meta frameworks like Next. Js, Remix, and Nuxt.

Like Next. Js 13, it uses file system routing, but made a somewhat controversial decision of using reserved names to represent different types of UI, like page, layout, loading, and error. In addition, any file that has significance to the framework, is prefixed with a plus sign. There's been a lot of discussion around this approach and not everybody likes it because you end up with tons of files in project with the exact same name, which can lead to migraines if you expand all the directories in your editor. On the other hand, though, these conventions keep your project clear and consistent.

Pagedot Svelte contains a component that will be server rendered when you navigate to that route. After the initial page load, it will hydrate, and then the client side router takes over from there. This is what we call SSR, and I think it's the most sensible default. However, in SvelteKit, you can mix and match other rendering strategies, like you can pre render static HTML for jamstack style sites. Or if no server is required, you can use client rendering to do everything in the browser.

Or on the flip side, if you don't want any JavaScript at all, you can render everything on the server like a traditional a multi page application. What's awesome though is that you can choose the best rendering strategy for a page with a simple configuration option. You're not locked in to just one rendering paradigm. That's awesome, but the other big thing you'll want to know about the developer experience is how data fetching works. Every page dot Svelte file can have a matching page dot JS or TS file that exports a load function.

The return value from this function will automatically be made available in the page dot Svelte file via this data variable. It's incredibly simple and also provides end to end type safety. The load function can run both server side and client side. However, if you want to committed to just the server. You can do that by adding server to the file name.

And speaking of server, I love SvelteKit's convention for building APIs. You create a server dot JS file, then export functions named as HTTP verbs, like get, post, patch, and so on. That's nice, but here's where things get cool. In many applications, you need to fetch data at multiple levels, like you might have user data at the root, then a dashboard with an order, then some comments below it. Fetching all this data is complex, and people have come up with all kinds of complex state management libraries that try to wrangle the complexity.

In helped Kit you can do nested routing with layouts that can share UI with their children and also fetch data that's accessible by the children. But what's special about Svelte is that has built in stores. The the page store gives you access to all the data on the current page and can be subscribed to with reactive updates from anywhere in the application by putting a dollar signed in front of it. Angular has actually been doing stuff like this for years with its async pipe, and I can tell you from experience that patterns like this eliminate tons of complexity when it comes to state management. Now it's also important to know that when fetching data, you can have error and loading files that represent the UI for those special states.

This pattern is basically identical to Next. Js version 13. In addition, SvelteKit has form actions, which allow you to define functions on the server that handle form submissions. At this point pretty much every modern framework, has stolen this feature from Remix, which itself got the idea from the way every other PHP framework has worked since the beginning of time. And another piece of bonus news is that SvelteKit is also getting a library very similar to NextAuth for user authentication.

Rich Harris, Chris, the creator of Svelte and SvelteKit, works at Vercel, and the team from NextAuth developed this library, which is awesome because that means it's getting world class tools proven to work at the largest hail. Overall, SvelteKit is a genre defining masterpiece. If you wanna penetrate deeper into this topic, stay tuned for a full uncensored tutorial on Beyond Fire ship. This has been the Code Report. Thanks for watching, and I will see you in the next one.
It is December 15, 2022, and you're watching The Code Report. After what felt like a lifetime of waiting, SvelteKit officially hit version 1.0 yesterday, which is a full stack framework for the world's most loved UI library. When I tried Svelte for the first time over 3 years ago, it left me extremely titillated. It had an innovative compiler, elegant reactivity, and we just had so much fun together. H. As the years went on, I continued working with React and Angular, but truth be told, I would often close my eyes and pretend that they were actually spelt. I was web mentally frustrated, but luckily just in time for Christmas, we've achieved a glorious climax that makes it possible to use Svelte in a server rendered application. Let's take a look at some code and see if lives up to all of these innuendos. SvelteKit is very similar to other JavaScript meta frameworks like Next. Js, Remix, and Nuxt. Like Next. Js 13, it uses file system routing, but made a somewhat controversial decision of using reserved names to represent different types of UI, like page, layout, loading, and error. In addition, any file that has significance to the framework, is prefixed with a plus sign. There's been a lot of discussion around this approach and not everybody likes it because you end up with tons of files in project with the exact same name, which can lead to migraines if you expand all the directories in your editor. On the other hand, though, these conventions keep your project clear and consistent. Pagedot Svelte contains a component that will be server rendered when you navigate to that route. After the initial page load, it will hydrate, and then the client side router takes over from there. This is what we call SSR, and I think it's the most sensible default. However, in SvelteKit, you can mix and match other rendering strategies, like you can pre render static HTML for jamstack style sites. Or if no server is required, you can use client rendering to do everything in the browser.
Or on the flip side, if you don't want any JavaScript at all, you can render everything on the server like a traditional a multi page application. What's awesome though is that you can choose the best rendering strategy for a page with a simple configuration option. You're not locked in to just one rendering paradigm.
graphic design
That's awesome, but the other big thing you'll want to know about the developer experience is how data fetching works. Every page dot Svelte file can have a matching page dot JS or TS file that exports a load function. The return value from this function will automatically be made available in the page dot Svelte file via this data variable. It's incredibly simple and also provides end to end type safety. The load function can run both server side and client side. However, if you want to committed to just the server. You can do that by adding server to the file name. And speaking of server, I love SvelteKit's convention for building APIs. You create a server dot JS file, then export functions named as HTTP verbs, like get, post, patch, and so on.
That's nice, but here's where things get cool. In many applications, you need to fetch data at multiple levels, like you might have user data at the root, then a dashboard with an order, then some comments below it. Fetching all this data is complex, and people have come up with all kinds of complex state management libraries that try to wrangle the complexity. In helped Kit you can do nested routing with layouts that can share UI with their children and also fetch data that's accessible by the children.
databases
data management
data
computer science
programming
computers
But what's special about Svelte is that has built in stores. The the page store gives you access to all the data on the current page and can be subscribed to with reactive updates from anywhere in the application by putting a dollar signed in front of it. Angular has actually been doing stuff like this for years with its async pipe, and I can tell you from experience that patterns like this eliminate tons of complexity when it comes to state management. Now it's also important to know that when fetching data, you can have error and loading files that represent the UI for those special states. This pattern is basically identical to Next. Js version 13. In addition, SvelteKit has form actions, which allow you to define functions on the server that handle form submissions. At this point pretty much every modern framework, has stolen this feature from Remix, which itself got the idea from the way every other PHP framework has worked since the beginning of time. And another piece of bonus news is that SvelteKit is also getting a library very similar to NextAuth for user authentication. Rich Harris, Chris, the creator of Svelte and SvelteKit, works at Vercel, and the team from NextAuth developed this library, which is awesome because that means it's getting world class tools proven to work at the largest hail. Overall, SvelteKit is a genre defining masterpiece. If you wanna penetrate deeper into this topic, stay tuned for a full uncensored tutorial on Beyond Fire ship. This has been the Code Report. Thanks for watching, and I will see you in the next one.
It is December 15, 2022, and you're watching The Code Report. After what felt like a lifetime of waiting, SvelteKit officially hit version 1.0 yesterday, which is a full stack framework for the world's most loved UI library. When I tried Svelte for the first time over 3 years ago, it left me extremely titillated. It had an innovative compiler, elegant reactivity, and we just had so much fun together. H. As the years went on, I continued working with React and Angular, but truth be told, I would often close my eyes and pretend that they were actually spelt. I was web mentally frustrated, but luckily just in time for Christmas, we've achieved a glorious climax that makes it possible to use Svelte in a server rendered application. Let's take a look at some code and see if lives up to all of these innuendos. SvelteKit is very similar to other JavaScript meta frameworks like Next. Js, Remix, and Nuxt. Like Next. Js 13, it uses file system routing, but made a somewhat controversial decision of using reserved names to represent different types of UI, like page, layout, loading, and error. In addition, any file that has significance to the framework, is prefixed with a plus sign. There's been a lot of discussion around this approach and not everybody likes it because you end up with tons of files in project with the exact same name, which can lead to migraines if you expand all the directories in your editor. On the other hand, though, these conventions keep your project clear and consistent. Pagedot Svelte contains a component that will be server rendered when you navigate to that route. After the initial page load, it will hydrate, and then the client side router takes over from there. This is what we call SSR, and I think it's the most sensible default. However, in SvelteKit, you can mix and match other rendering strategies, like you can pre render static HTML for jamstack style sites. Or if no server is required, you can use client rendering to do everything in the browser. Or on the flip side, if you don't want any JavaScript at all, you can render everything on the server like a traditional a multi page application. What's awesome though is that you can choose the best rendering strategy for a page with a simple configuration option. You're not locked in to just one rendering paradigm. That's awesome, but the other big thing you'll want to know about the developer experience is how data fetching works. Every page dot Svelte file can have a matching page dot JS or TS file that exports a load function. The return value from this function will automatically be made available in the page dot Svelte file via this data variable. It's incredibly simple and also provides end to end type safety. The load function can run both server side and client side. However, if you want to committed to just the server. You can do that by adding server to the file name. And speaking of server, I love SvelteKit's convention for building APIs. You create a server dot JS file, then export functions named as HTTP verbs, like get, post, patch, and so on. That's nice, but here's where things get cool. In many applications, you need to fetch data at multiple levels, like you might have user data at the root, then a dashboard with an order, then some comments below it. Fetching all this data is complex, and people have come up with all kinds of complex state management libraries that try to wrangle the complexity. In helped Kit you can do nested routing with layouts that can share UI with their children and also fetch data that's accessible by the children. But what's special about Svelte is that has built in stores. The the page store gives you access to all the data on the current page and can be subscribed to with reactive updates from anywhere in the application by putting a dollar signed in front of it. Angular has actually been doing stuff like this for years with its async pipe, and I can tell you from experience that patterns like this eliminate tons of complexity when it comes to state management. Now it's also important to know that when fetching data, you can have error and loading files that represent the UI for those special states. This pattern is basically identical to Next. Js version 13. In addition, SvelteKit has form actions, which allow you to define functions on the server that handle form submissions. At this point pretty much every modern framework, has stolen this feature from Remix, which itself got the idea from the way every other PHP framework has worked since the beginning of time. And another piece of bonus news is that SvelteKit is also getting a library very similar to NextAuth for user authentication. Rich Harris, Chris, the creator of Svelte and SvelteKit, works at Vercel, and the team from NextAuth developed this library, which is awesome because that means it's getting world class tools proven to work at the largest hail. Overall, SvelteKit is a genre defining masterpiece. If you wanna penetrate deeper into this topic, stay tuned for a full uncensored tutorial on Beyond Fire ship. This has been the Code Report. Thanks for watching, and I will see you in the next one.
It
it
is
is
December
december
15,
15
2022,
2022
and
and
you're
you're
watching
watching
The
the
Code
code
Report.
report
After
after
what
what
felt
felt
like
like
a
a
lifetime
lifetime
of
of
waiting,
waiting
SvelteKit
sveltekit
officially
officially
hit
hit
version
version
1.0
1.0
yesterday,
yesterday
which
which
is
is
a
a
full
full
stack
stack
framework
framework
for
for
the
the
world's
world's
most
most
loved
loved
UI
ui
library.
library
When
when
I
i
tried
tried
Svelte
svelte
for
for
the
the
first
first
time
time
over
over
3
3
years
years
ago,
ago
it
it
left
left
me
me
extremely
extremely
titillated.
titillated
It
it
had
had
an
an
innovative
innovative
compiler,
compiler
elegant
elegant
reactivity,
reactivity
and
and
we
we
just
just
had
had
so
so
much
much
fun
fun
together.
together
H.
h
As
as
the
the
years
years
went
went
on,
on
I
i
continued
continued
working
working
with
with
React
react
and
and
Angular,
angular
but
but
truth
truth
be
be
told,
told
I
i
would
would
often
often
close
close
my
my
eyes
eyes
and
and
pretend
pretend
that
that
they
they
were
were
actually
actually
spelt.
spelt
I
i
was
was
web
web
mentally
mentally
frustrated,
frustrated
but
but
luckily
luckily
just
just
in
in
time
time
for
for
Christmas,
christmas
we've
we've
achieved
achieved
a
a
glorious
glorious
climax
climax
that
that
makes
makes
it
it
possible
possible
to
to
use
use
Svelte
svelte
in
in
a
a
server
server
rendered
rendered
application.
application
Let's
let's
take
take
a
a
look
look
at
at
some
some
code
code
and
and
see
see
if
if
lives
lives
up
up
to
to
all
all
of
of
these
these
innuendos.
innuendos
SvelteKit
sveltekit
is
is
very
very
similar
similar
to
to
other
other
JavaScript
javascript
meta
meta
frameworks
frameworks
like
like
Next.
next
Js,
js
Remix,
remix
and
and
Nuxt.
nuxt
Like
like
Next.
next
Js
js
13,
13
it
it
uses
uses
file
file
system
system
routing,
routing
but
but
made
made
a
a
somewhat
somewhat
controversial
controversial
decision
decision
of
of
using
using
reserved
reserved
names
names
to
to
represent
represent
different
different
types
types
of
of
UI,
ui
like
like
page,
page
layout,
layout
loading,
loading
and
and
error.
error
In
in
addition,
addition
any
any
file
file
that
that
has
has
significance
significance
to
to
the
the
framework,
framework
is
is
prefixed
prefixed
with
with
a
a
plus
plus
sign.
sign
There's
there's
been
been
a
a
lot
lot
of
of
discussion
discussion
around
around
this
this
approach
approach
and
and
not
not
everybody
everybody
likes
likes
it
it
because
because
you
you
end
end
up
up
with
with
tons
tons
of
of
files
files
in
in
project
project
with
with
the
the
exact
exact
same
same
name,
name
which
which
can
can
lead
lead
to
to
migraines
migraines
if
if
you
you
expand
expand
all
all
the
the
directories
directories
in
in
your
your
editor.
editor
On
on
the
the
other
other
hand,
hand
though,
though
these
these
conventions
conventions
keep
keep
your
your
project
project
clear
clear
and
and
consistent.
consistent
Pagedot
pagedot
Svelte
svelte
contains
contains
a
a
component
component
that
that
will
will
be
be
server
server
rendered
rendered
when
when
you
you
navigate
navigate
to
to
that
that
route.
route
After
after
the
the
initial
initial
page
page
load,
load
it
it
will
will
hydrate,
hydrate
and
and
then
then
the
the
client
client
side
side
router
router
takes
takes
over
over
from
from
there.
there
This
this
is
is
what
what
we
we
call
call
SSR,
ssr
and
and
I
i
think
think
it's
it's
the
the
most
most
sensible
sensible
default.
default
However,
however
in
in
SvelteKit,
sveltekit
you
you
can
can
mix
mix
and
and
match
match
other
other
rendering
rendering
strategies,
strategies
like
like
you
you
can
can
pre
pre
render
render
static
static
HTML
html
for
for
jamstack
jamstack
style
style
sites.
sites
Or
or
if
if
no
no
server
server
is
is
required,
required
you
you
can
can
use
use
client
client
rendering
rendering
to
to
do
do
everything
everything
in
in
the
the
browser.
browser
Or
or
on
on
the
the
flip
flip
side,
side
if
if
you
you
don't
don't
want
want
any
any
JavaScript
javascript
at
at
all,
all
you
you
can
can
render
render
everything
everything
on
on
the
the
server
server
like
like
a
a
traditional
traditional
a
a
multi
multi
page
page
application.
application
What's
what's
awesome
awesome
though
though
is
is
that
that
you
you
can
can
choose
choose
the
the
best
best
rendering
rendering
strategy
strategy
for
for
a
a
page
page
with
with
a
a
simple
simple
configuration
configuration
option.
option
You're
you're
not
not
locked
locked
in
in
to
to
just
just
one
one
rendering
rendering
paradigm.
paradigm
That's
that's
awesome,
awesome
but
but
the
the
other
other
big
big
thing
thing
you'll
you'll
want
want
to
to
know
know
about
about
the
the
developer
developer
experience
experience
is
is
how
how
data
data
fetching
fetching
works.
works
Every
every
page
page
dot
dot
Svelte
svelte
file
file
can
can
have
have
a
a
matching
matching
page
page
dot
dot
JS
js
or
or
TS
ts
file
file
that
that
exports
exports
a
a
load
load
function.
function
The
the
return
return
value
value
from
from
this
this
function
function
will
will
automatically
automatically
be
be
made
made
available
available
in
in
the
the
page
page
dot
dot
Svelte
svelte
file
file
via
via
this
this
data
data
variable.
variable
It's
it's
incredibly
incredibly
simple
simple
and
and
also
also
provides
provides
end
end
to
to
end
end
type
type
safety.
safety
The
the
load
load
function
function
can
can
run
run
both
both
server
server
side
side
and
and
client
client
side.
side
However,
however
if
if
you
you
want
want
to
to
committed
committed
to
to
just
just
the
the
server.
server
You
you
can
can
do
do
that
that
by
by
adding
adding
server
server
to
to
the
the
file
file
name.
name
And
and
speaking
speaking
of
of
server,
server
I
i
love
love
SvelteKit's
sveltekit's
convention
convention
for
for
building
building
APIs.
apis
You
you
create
create
a
a
server
server
dot
dot
JS
js
file,
file
then
then
export
export
functions
functions
named
named
as
as
HTTP
http
verbs,
verbs
like
like
get,
get
post,
post
patch,
patch
and
and
so
so
on.
on
That's
that's
nice,
nice
but
but
here's
here's
where
where
things
things
get
get
cool.
cool
In
in
many
many
applications,
applications
you
you
need
need
to
to
fetch
fetch
data
data
at
at
multiple
multiple
levels,
levels
like
like
you
you
might
might
have
have
user
user
data
data
at
at
the
the
root,
root
then
then
a
a
dashboard
dashboard
with
with
an
an
order,
order
then
then
some
some
comments
comments
below
below
it.
it
Fetching
fetching
all
all
this
this
data
data
is
is
complex,
complex
and
and
people
people
have
have
come
come
up
up
with
with
all
all
kinds
kinds
of
of
complex
complex
state
state
management
management
libraries
libraries
that
that
try
try
to
to
wrangle
wrangle
the
the
complexity.
complexity
In
in
helped
helped
Kit
kit
you
you
can
can
do
do
nested
nested
routing
routing
with
with
layouts
layouts
that
that
can
can
share
share
UI
ui
with
with
their
their
children
children
and
and
also
also
fetch
fetch
data
data
that's
that's
accessible
accessible
by
by
the
the
children.
children
But
but
what's
what's
special
special
about
about
Svelte
svelte
is
is
that
that
has
has
built
built
in
in
stores.
stores
The
the
the
the
page
page
store
store
gives
gives
you
you
access
access
to
to
all
all
the
the
data
data
on
on
the
the
current
current
page
page
and
and
can
can
be
be
subscribed
subscribed
to
to
with
with
reactive
reactive
updates
updates
from
from
anywhere
anywhere
in
in
the
the
application
application
by
by
putting
putting
a
a
dollar
dollar
signed
signed
in
in
front
front
of
of
it.
it
Angular
angular
has
has
actually
actually
been
been
doing
doing
stuff
stuff
like
like
this
this
for
for
years
years
with
with
its
its
async
async
pipe,
pipe
and
and
I
i
can
can
tell
tell
you
you
from
from
experience
experience
that
that
patterns
patterns
like
like
this
this
eliminate
eliminate
tons
tons
of
of
complexity
complexity
when
when
it
it
comes
comes
to
to
state
state
management.
management
Now
now
it's
it's
also
also
important
important
to
to
know
know
that
that
when
when
fetching
fetching
data,
data
you
you
can
can
have
have
error
error
and
and
loading
loading
files
files
that
that
represent
represent
the
the
UI
ui
for
for
those
those
special
special
states.
states
This
this
pattern
pattern
is
is
basically
basically
identical
identical
to
to
Next.
next
Js
js
version
version
13.
13
In
in
addition,
addition
SvelteKit
sveltekit
has
has
form
form
actions,
actions
which
which
allow
allow
you
you
to
to
define
define
functions
functions
on
on
the
the
server
server
that
that
handle
handle
form
form
submissions.
submissions
At
at
this
this
point
point
pretty
pretty
much
much
every
every
modern
modern
framework,
framework
has
has
stolen
stolen
this
this
feature
feature
from
from
Remix,
remix
which
which
itself
itself
got
got
the
the
idea
idea
from
from
the
the
way
way
every
every
other
other
PHP
php
framework
framework
has
has
worked
worked
since
since
the
the
beginning
beginning
of
of
time.
time
And
and
another
another
piece
piece
of
of
bonus
bonus
news
news
is
is
that
that
SvelteKit
sveltekit
is
is
also
also
getting
getting
a
a
library
library
very
very
similar
similar
to
to
NextAuth
nextauth
for
for
user
user
authentication.
authentication
Rich
rich
Harris,
harris
Chris,
chris
the
the
creator
creator
of
of
Svelte
svelte
and
and
SvelteKit,
sveltekit
works
works
at
at
Vercel,
vercel
and
and
the
the
team
team
from
from
NextAuth
nextauth
developed
developed
this
this
library,
library
which
which
is
is
awesome
awesome
because
because
that
that
means
means
it's
it's
getting
getting
world
world
class
class
tools
tools
proven
proven
to
to
work
work
at
at
the
the
largest
largest
hail.
hail
Overall,
overall
SvelteKit
sveltekit
is
is
a
a
genre
genre
defining
defining
masterpiece.
masterpiece
If
if
you
you
wanna
wanna
penetrate
penetrate
deeper
deeper
into
into
this
this
topic,
topic
stay
stay
tuned
tuned
for
for
a
a
full
full
uncensored
uncensored
tutorial
tutorial
on
on
Beyond
beyond
Fire
fire
ship.
ship
This
this
has
has
been
been
the
the
Code
code
Report.
report
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The Code Report discusses the use of SvelteLD, a framework for the world's most loved UI library, and how it can be used in a server rendered application. The framework can be mixed and matched with other rendering strategies, and the developer experience is also discussed, including the ability to create a matching page and load data from multiple places. The framework is also designed to eliminate complexity and provide end-to-end type safety.
SvelteKit is my mistress
It is December 15, 2022, and you're watching The Code Report. After what felt like a lifetime of waiting, SvelteKit officially hit version 1.0 yesterday, which is a full stack framework for the world's most loved UI library. When I tried Svelte for the first time over 3 years ago, it left me extremely titillated. It had an innovative compiler, elegant reactivity, and we just had so much fun together. H. As the years went on, I continued working with React and Angular, but truth be told, I would often close my eyes and pretend that they were actually spelt. I was web mentally frustrated, but luckily just in time for Christmas, we've achieved a glorious climax that makes it possible to use Svelte in a server rendered application. Let's take a look at some code and see if lives up to all of these innuendos. SvelteKit is very similar to other JavaScript meta frameworks like Next. Js, Remix, and Nuxt. Like Next. Js 13, it uses file system routing, but made a somewhat controversial decision of using reserved names to represent different types of UI, like page, layout, loading, and error. In addition, any file that has significance to the framework, is prefixed with a plus sign. There's been a lot of discussion around this approach and not everybody likes it because you end up with tons of files in project with the exact same name, which can lead to migraines if you expand all the directories in your editor. On the other hand, though, these conventions keep your project clear and consistent. Pagedot Svelte contains a component that will be server rendered when you navigate to that route. After the initial page load, it will hydrate, and then the client side router takes over from there. This is what we call SSR, and I think it's the most sensible default. However, in SvelteKit, you can mix and match other rendering strategies, like you can pre render static HTML for jamstack style sites. Or if no server is required, you can use client rendering to do everything in the browser. Or on the flip side, if you don't want any JavaScript at all, you can render everything on the server like a traditional a multi page application. What's awesome though is that you can choose the best rendering strategy for a page with a simple configuration option. You're not locked in to just one rendering paradigm. That's awesome, but the other big thing you'll want to know about the developer experience is how data fetching works. Every page dot Svelte file can have a matching page dot JS or TS file that exports a load function. The return value from this function will automatically be made available in the page dot Svelte file via this data variable. It's incredibly simple and also provides end to end type safety. The load function can run both server side and client side. However, if you want to committed to just the server. You can do that by adding server to the file name. And speaking of server, I love SvelteKit's convention for building APIs. You create a server dot JS file, then export functions named as HTTP verbs, like get, post, patch, and so on. That's nice, but here's where things get cool. In many applications, you need to fetch data at multiple levels, like you might have user data at the root, then a dashboard with an order, then some comments below it. Fetching all this data is complex, and people have come up with all kinds of complex state management libraries that try to wrangle the complexity. In helped Kit you can do nested routing with layouts that can share UI with their children and also fetch data that's accessible by the children. But what's special about Svelte is that has built in stores. The the page store gives you access to all the data on the current page and can be subscribed to with reactive updates from anywhere in the application by putting a dollar signed in front of it. Angular has actually been doing stuff like this for years with its async pipe, and I can tell you from experience that patterns like this eliminate tons of complexity when it comes to state management. Now it's also important to know that when fetching data, you can have error and loading files that represent the UI for those special states. This pattern is basically identical to Next. Js version 13. In addition, SvelteKit has form actions, which allow you to define functions on the server that handle form submissions. At this point pretty much every modern framework, has stolen this feature from Remix, which itself got the idea from the way every other PHP framework has worked since the beginning of time. And another piece of bonus news is that SvelteKit is also getting a library very similar to NextAuth for user authentication. Rich Harris, Chris, the creator of Svelte and SvelteKit, works at Vercel, and the team from NextAuth developed this library, which is awesome because that means it's getting world class tools proven to work at the largest hail. Overall, SvelteKit is a genre defining masterpiece. If you wanna penetrate deeper into this topic, stay tuned for a full uncensored tutorial on Beyond Fire ship. This has been the Code Report. Thanks for watching, and I will see you in the next one.
The Code Report discusses the use of SvelteLD, a framework for the world's most loved UI library, and how it can be used in a server rendered application. The framework can be mixed and matched with other rendering strategies, and the developer experience is also discussed, including the ability to create a matching page and load data from multiple places. The framework is also designed to eliminate complexity and provide end-to-end type safety.